wenn man das fenster verkleinert dann wandern die einzelnen links untereinander
Beiträge von nuni83
-
-
Code
Alles anzeigen<div align="center" id="navcontainer"> <ul id="navlist"> <li background:url(images/link.jpg)> </li> <li><a class="home" href="index.htm"> </a></li> <li><a class="archiv" href="archiv.htm"> </a></li> <li><a class="clubdaten" href="clubdaten.htm"> </a></li> <li><a class="fanartikel" href="fanartikel.htm"> </a></li> <li><a class="vorstand" href="vorstand.htm"> </a></li> <li><a class="events" href="events.htm"> </a></li> <li><a class="fotos" href="fotos.htm"> </a></li> <li><a class="links" href="links.htm"> </a></li> <li><a class="gaestebuch" href="gaestebuch.htm"> </a></li> </ul> </div>
sieht immer noch genau gleich aus, die navigation ist immer noch nicht mittig ausgerichtet und das bild kann ich auch nicht sehen links von der navigation, und die einzelnen links gehen bei verkleinertem fenster immer noch untereinander.
-
ja der onmouseover evekt klappt nun. nun habe ich aber ein anderes problem, bzw. mehrere kleine probleme.
habe die website mal hochgeladen, hier der link:
http://www.hcd-uri.ch/neu/index.htmIch habe die Navigation mit einem onmouseover. Jetzt sollte aber noch links von der navigation dieses Bild hier http://www.hcd-uri.ch/neu/images/link.jpg ohne onmouseover hin. Wie mache ich das? und wie mache ich dass die navigation bündig ist mit dem banner und schön in der mitte ausgerichtet ist. weitterhin geht die navigation untereinander bei verkleinertem fenster. sie sollte aber immer nebeneinander bleiben. kannst du mir vielleicht da auch noch helfen?
hier der css code:
Code
Alles anzeigenbody { margin-bottom:0px; margin-left:0px; margin-right:0px; margin-right:0px; margin-top:0px; background-image:url(images/hintergrund.jpg); background-repeat:repeat-x; background-color:#3399FF; } #banner_oben { background:url(images/banner_oben.jpg) no-repeat top; margin: 0 auto; height:25px; width:900px; } #banner { background:url(images/banner.jpg) no-repeat top; margin: 0 auto; height:150px; width:900px; } #navcontainer ul li { list-style-type: none; padding: 0; margin: 0; display: block; float: left; } #navcontainer a { text-decoration: none; display: block; height: 25px; } #navcontainer li a.home { background: url(images/home1.jpg); width: 59px; } #navcontainer li.active a.home, #navcontainer li a.home:hover { background: url(images/home2.jpg); width: 59px; } #navcontainer li a.archiv{ background: url(images/archiv1.jpg); width: 68px; } #navcontainer li.active a.archiv, #navcontainer li a.archiv:hover { background: url(images/archiv2.jpg); width: 68px; } #navcontainer li a.clubdaten{ background: url(images/clubdaten1.jpg); width: 95px; } #navcontainer li.active a.clubdaten, #navcontainer li a.clubdaten:hover { background: url(images/clubdaten2.jpg); width: 95px; } #navcontainer li a.fanartikel{ background: url(images/fanartikel1.jpg); width: 93px; } #navcontainer li.active a.fanartikel, #navcontainer li a.fanartikel:hover { background: url(images/fanartikel2.jpg); width: 93px; } #navcontainer li a.vorstand{ background: url(images/vorstand1.jpg); width: 86px; } #navcontainer li.active a.vorstand, #navcontainer li a.vorstand:hover { background: url(images/vorstand2.jpg); width: 86px; } #navcontainer li a.events{ background: url(images/events1.jpg); width: 71px; } #navcontainer li.active a.events, #navcontainer li a.events:hover { background: url(images/events2.jpg); width: 71px; } #navcontainer li a.fotos{ background: url(images/fotos1.jpg); width: 62px; } #navcontainer li.active a.fotos, #navcontainer li a.fotos:hover { background: url(images/fotos2.jpg); width: 62px; } #navcontainer li a.links{ background: url(images/links1.jpg); width: 61px; } #navcontainer li.active a.links, #navcontainer li a.links:hover { background: url(images/links2.jpg); width: 61px; } #navcontainer li a.gaestebuch{ background: url(images/gaestebuch1.jpg); width: 100px; } #navcontainer li.active a.gaestebuch, #navcontainer li a.gaestebuch:hover { background: url(images/gaestebuch2.jpg); width: 100px; }
Freundliche grüsse[/url]
-
hmm schaade
finde beim quelltext nichts was mich weiter bringen könnte
ja dann lasse ich halt dies sein :cry:
-
ich meine so wie zum beispiel hier
wenn mann auf aktuell, saison, teams, verein, fans oder medien klickt dann bleibt dies danacht gelb.
das möchte ich auch.
weist du was ich meine ?
-
Hervorragend
Vielen herzlichen Dank, der onmouseover Evekt klappt jetzt. Nur noch etwas sollte ich haben und zwar den active Evekt, also wenn der Link aktiv ist das es dann so aussieht wie beim onmouseover.
Kriegst du das auch noch hin?
Wäre sensationell
Nochmals vielen Dank
-
ok dann sieht bei mir der quelltext nun so aus:
HTML
Alles anzeigen<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unbenanntes Dokument</title> </head> <style type="text/css"> <!-- .hoverbild a {background: url(images/home2.jpg); no-repeat;display:block; width:59px;} .hoverbild img {display:block; width:59px; height:25px; border:0;} .hoverbild a:hover img {visibility: hidden;} /* Nur Internet Explorer 5.5 und 6 */ .hoverbild a:hover {border:0;} * html .hoverbild a {margin-right:1px;} /* Nur Internet Explorer 5.01 */ * html .hoverbild a:hover {width:59px; margin-right:0;} --> </style> <body> <div class="hoverbild"><img src="images/home1.jpg" /></div> </body> </html>
aber funzt leider immer noch nicht
-
hmm also egal.
ich möchte einfach drei bilder nebeneinander ohne abstand und mittig ausgerichtet.
meine frage ist der css code dafür. -
ich meine es so wie bei dieser website hier:
http://www.geneva-hockey.ch/ [[INHALT NICHT MEHR AUF DOMAIN!]]
oben links der schatten, dann der banner und dann wieder links der schatten.
verstehst du was ich meine?
-
funzt bei mir immer noch nicht. irgend etwas mache ich noch falsch.
könntest du mir nicht gerade bei meinem quelltext eingeben? damit ich es nur noch kopieren müsste und es dann klappt. bei html und bei css.
wäre toll
-
Hallo Zusammen
Ich habe eine Frage bezüglich CSS.
Und zwar habe ich ein Bild, das genau oben in der Mitte ist. Jetzt möchte ich rechts und links noch ein Bild anfügen (die zwei Bilder sehen aus wie ein Schatten vom Bild in der Mitte).
Kann mir jemand sagen wie ich dies in CSS programmieren muss?
Vielen Herzlichen Dank
Freundliche Grüsse
-
hmm bei mir klappt das nicht irgendetwas mache ich falsch :cry:
könntest du mir nicht gerade den code von mir bearbeiten, damit das erste bild "home" ein onmouseover ist und auch wenn mann auf diesem link ist, dass dann das bild auch active ist (also wie beim onmouseover aussieht)
wäre super nett. dann könnte ich an meinem projekt entlich weiter arbeiten.
freundliche grüsse
-
ok hat geklappt, habe es jetzt in tabellen eingebaut.
jetzt möchte ich noch ein onmouseover machen. habe da schon so einiges versucht aber hat nicht geklapt
HTML
Alles anzeigen<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>hcd-uri</title> <link rel="stylesheet" href="design.css" type="text/css"> </head> <body> <div id="banner_oben"> </div> <div id="banner"> </div> <table align="center" cellspacing="0" cellpadding=0 width="900" height="25" border="0"> <tr> <td width="205" background="images/links.jpg"> <td><a href="index.htm"><img src="images/home1.jpg" width="59" height="25" border="0"></a></td> <td><a href="archiv.htm"><img src="images/archiv1.jpg" width="68" height="25" border="0"></a></td> <td><a href="clubdaten.htm"><img src="images/clubdaten1.jpg" width="95" height="25" border="0"></a></td> <td><a href="fanartikel.htm"><img src="images/fanartikel1.jpg" width="93" height="25" border="0"></a></td> <td><a href="vorstand.htm"><img src="images/vorstand1.jpg" width="86" height="25" border="0"></a></td> <td><a href="events.htm"><img src="images/events1.jpg" width="71" height="25" border="0"></a></td> <td><a href="fotos.htm"><img src="images/fotos1.jpg" name="links" width="62" height="25" border="0"></a></td> <td><a href="links.htm"><img src="images/links1.jpg" width="61" height="25" border="0"></a></td> <td><a href="gaestebuch.htm"><img src="images/gaestebuch1.jpg" width="100" height="25" border="0"></a></td> </tr> </table> </body> </html>
möchte dem
Code<td><a href="index.htm"><img src="images/home1.jpg" width="59" height="25" border="0"></a></td>
einen onmouseover geben mit dem bild home2.jpg. weiter möchte ich noch das bild home2.jpg als aktieves bild haben, wenn mann sich auf dieser seite befindet. wäre wirklich sehr sehr nett wenn du mir helfen könntest.
hättest du da die richtige lösung auch noch bereit? wäre toll.
-
kann dir sonst mal den quelltext vom css und vom html schicken. dann findest du sicher den fehler von mir, den ich leider nicht sehe
nochmals meine zwei probleme:
1. die spalte zwischen den bildern entfernen, dass die bilder schön bündig sind.
2. bei verkleinerung des browser fenser die links immernoch nebeneinander und nicht das sie dann untereinander sind.Quelltext css:
#banner_oben {
background:url(images/banner_oben.jpg) no-repeat top;
margin: 0 auto;
height:25px;
width:900px;
}#banner {
background:url(images/banner.jpg) no-repeat top;
margin: 0 auto;
height:150px;
width:900px;
}#links {
text-align:center;
margin: 0 auto;
height:25px;
}Quelltext html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hcd-uri</title>
<link rel="stylesheet" href="design.css" type="text/css">
</head>
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<div id="banner_oben">
</div><div id="banner">
</div><div id="links">
<img id="links" src="images/links.jpg" width="205" height="25" border="0">
<img id="links" src="images/home1.jpg" width="59" height="25" border="0" >
<img id="links" src="images/archiv1.jpg" width="68" height="25" border="0">
<img id="links" src="images/clubdaten1.jpg" width="95" height="25" border="0">
<img id="links" src="images/fanartikel1.jpg" width="93" height="25" border="0">
<img id="links" src="images/vorstand1.jpg" width="86" height="25" border="0">
<img id="links" src="images/events1.jpg" width="71" height="25" border="0">
<img src="images/fotos1.jpg" name="links" width="62" height="25" border="0" id="links">
<img id="links" src="images/links1.jpg" width="61" height="25" border="0">
<img id="links" src="images/gaestebuch1.jpg" width="100" height="25" border="0"></div></body>
</html>wäre toll wenn du mir helfen könntest.
freundliche grüsse und schon einmal besten dank
-
leider kann ich deine sätze nicht ganz nach vollziehen. gibt es kein css code oder so wo man dies ändern kann?
ebenso ist noch ein anderes problem aufgetreten.
und zwar sollten die lücken zwischen den "links" (bildern) nicht sein
http://www.bilder-hochladen.net/files/7jhi-3-jpg.html -
Hallo Zusammen
Ich bin an einer Website für einen Verein dran.
Und da habe ich auch schon das erste Problem.
Und zwar habe ich eine Steuerung (Linkbereich), die besteht aus 10 nebeneinander stehenden Bilder. Jetzt wenn ich im Browser das Fenster verkleinere, wandern die plötzlich untereinander.
So sollte es aussehen
http://www.bilder-hochladen.net/files/7jhi-1-jpg.htmlUnd so eben nicht wenn das Fenster verkleinert ist
http://www.bilder-hochladen.net/files/7jhi-2-jpg.htmlKann mir jemand sagen, was ich machen muss, damit die Links bei verkleinertem Fenster immer noch schön in einer Reihe sind?
Freundliche Grüsse