|
|||
![]()
Hallo,
ich bin neu hier und habe meine Navigation mit Grafiken dank eurer FAQ ganz gut hinbekommen. Jetzt sollte sie rechts angeordnet sein. Klappt aber irgendwie nicht. Pobiert habe ich schon sie mit margin-left nach rechts zu schieben. Und dem #navi ein float right zu geben ist wohl auch keine Lösung? Im Forum habe ich keine Antworten gefunden. Das Ganze ist noch im Entwurfsstadium, deshalb so bunt... Ich hoffe ihr könnt mir weiterhelfen. Hier der Link molocco index zur Seite und der Code. Code:
<!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>molocco index</title> <style type="text/css"> body { margin: 0; padding: 0; text-align:center; } #container { width: 1000px; text-align: left; margin: 10px auto; background-image:url(bilder/muster_links.gif); background-repeat:repeat; } #main { width: 600px; margin-left: 200px; background: #FFF; color: #000; } /* Kopfbereich */ #header { margin-top: 0px; margin-right: 30px; margin-left: 30px; width: 540px; background:#FFF; } #logo { padding-top : 0px; } #logo h1 { background:url(bilder/logo.gif) no-repeat top left; margin-top: 20px; margin-bottom: 2px; width: 213px; height: 15px; float: right; } #logo h1 span { display : none; } /* navigation */ #navi { clear:right; width: 540px; } #navi li{ float:left; width: 50px; list-style-type:none; } #navi #grafik { width: 45px; } #navi #fotografie { width: 85px; } #navi #kontakt { width: 65px; } #navi #impressum { width: 85px; } #navi a { display: block; height: 10px; width: 100%; position: relative; overflow: hidden; } #navi span { position: absolute; width: 100%; height: 10px; top: 0; left: 0; background: url(bilder/navi_grafiken/navigation.gif) ; background-repeat: no-repeat; } #navi #grafik a span { background-position: 0 0; } #navi #grafik a:hover span, #navi #grafik a:active span, #navi #grafik a:focus span { background-position: 0 -10px; } #navi #fotografie a span { background-position: -45px 0; } #navi #fotografie a:hover span, #navi #fotografie a:active span, #navi #fotografie a:focus span{ background-position: -45px -10px; } #navi #kontakt a span { background-position: -130px 0; } #navi #kontakt a:hover span, #navi #kontakt a:active span, #navi #kontakt a:focus span { background-position: -130px -10px; } #navi #impressum a span { background-position: -195px 0; } #navi #impressum a:hover span, #navi #impressum a:active span, #navi #impressum a:focus span { background-position: -195px -10px; } </style> </head> </html> und der html code HTML-Code:
<body> <div id="container"> <div id="main"> <div id="header"> <div id="logo"> <h1><span>css Zen Garden</span></h1> </div> <div id="navi"> <ul id="navi"> <li id="grafik"><a href="test_navi.html">Grafik<span></span> </a></li> <li id="fotografie"><a href="tagesthemen.html">fotografie<span></span></a></li> <li id="kontakt"><a href="#">Kontakt<span></span></a></li> <li id="impressum"><a href="#">Impressum<span></span></a></li> </ul> </div> <!-- Ende header--> <!--Beginn Titelbild--> </div> <div id="titel"> <div id="skip_zurueck" > <div id="skip"> <a href="#zurueck"><img src="bilder/pfeil_gespiegelt.gif" alt="" height="8" width="24"/></a> </div> </div> <div id="titelbild" ><img src="bilder/grafik_01.gif" alt="" height="260" width="540"/></div> <div id="skip_vor" > <div id="skip"> <a href="#zurueck"><img src="bilder/pfeil.gif" alt="" height="8" width="24"/></a> </div> </div> </div> <div id="bildunterzeile"> New York </div> <!--Ende Titelbild--> <!--Beginn hauptinhalt--> <!-- Ende main--> </div> <!-- Ende container--> </div> </body> Grüße lila_3 |
Sponsored Links |
|
|||
![]()
Guten Morgen,
zunächst einmal hast du deine #nav-ID zweimal vergeben. Einmal für das <div> und einmal für die <ul>. Desweiteren clearst du falsch. Dein <h1> innerhalb von #logo hat float: right. Somit hat #logo keine Höhe (das <span> ist ja ausgeblendet). Nun gibst du der #navi das clear: right; was aber außerhalb von #logo steht. Das clear muss in #logo. Dann rutscht die #navi auch richtig unter das #logo und du kannst #nav mit float: right; und ohne width nach rechts schieben. Danach dann das clearen nicht vergessen. |
Sponsored Links |
|
|||
![]()
Hallo,
hat etwas gedauert, aber ich glaube jetzt gehts. #logo hat das clear:right und eine Höhe bekommen. Und #navi hat sein clear:right behalten zusammen mit float:right. Ohne clear:right rutscht die navi wieder nach oben. Anders hat es nicht funktioniert. Vielen Dank nochmal. lila_3 |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten | mazzo | CSS | 10 | 05.04.2012 18:32 |
grafische Navigation horizontal zentrieren, klappt nicht | lila_3 | CSS | 4 | 30.11.2010 11:25 |
Boxen von Navigation und Logo sind zu weit auseinander | lila_3 | CSS | 2 | 04.09.2009 00:28 |
IE verschiebt Navi Menü | macmensa | CSS | 7 | 17.08.2009 17:45 |
ie. Abstand über horizontaler Navi geht nicht weg. | tifi | CSS | 5 | 21.11.2006 18:17 |