|
|||
grafische Navigation horizontal zentrieren, klappt nicht
Hallo,
ich bin noch CSS Anfänger und habe ein grafisches Navi gebaut, funktioniert auch prima, dank der tollen Anleitung in den FAQs Jetzt sollte das Ganze horizontal zentriert werden. Ich habe es mit der display-table Variante probiert, was leider nicht klappt. Mit margin: 0 auto im #navi sollte es doch funktionieren? Ich habe wegen des grafischen Menüs noch width Angaben im CSS, die ich aber nicht weglassen kann??? Bin mittlerweile ziemlich ratlos. Ich hoffe es kann mir jemand weiterhelfen. Hier liegt die Testseite Und hier kommt der HTML code: HTML-Code:
<div id="pageheader"> <div id="header1"> </div> <div id="header2"> <div id="navi"> <ul> <li id="home"><a href="index.html">Home<span></span></a></li> <li id="ueberuns"><a href="#">Ueber uns<span></span></a></li> <li id="produkte"><a href="#">Produkte<span></span></a></li> <li id="anfahrt"><a href="#">Anfahrt<span></span></a></li> <li id="kontakt"><a href="#">Kontakt<span></span></a></li> </ul> </div> </div> <!--ende header 2--> </div> <!-- Endepageheader--> Und hier das CSS Code:
#navi { float: left; display: table; margin: 0 auto; } #navi ul { display: table-row; } #navi li { float: left; width: 100px; padding-left: 20px; list-style-type: none; display: table-cell; } #navi #home, #navi #ueberuns, #navi #produkte, #navi #anfahrt, #navi #kontakt { width: 100px; } #navi a, #navi strong { display: block; height: 26px; width: 100%; position: relative; overflow: hidden; } #navi span { display: table-cell; position: absolute; width: 100%; height: 26px; top: 0px; left: 0px; background: url(images/navi_1611_hg_nichttransparent.png); cursor: pointer; } #navi a span { cursor: pointer; } /* Navi home */ #navi #home a span { background-position: 0 0; } #navi #home a:hover span, #navi #home a:active span, #navi #home a:focus span { background-position: 0 -26px; } /* Navi ueberuns */ #navi #ueberuns a span { background-position: -120px -0px; } #navi #ueberuns a:hover span, #navi #ueberuns a:active span, #navi #ueberuns a:focus span { background-position: -120px -26px; } /* Navi produkte */ #navi #produkte a span { background-position: -240px 0; } #navi #produkte a:hover span, #navi #produkte a:active span, #navi #produkte a:focus span { background-position: -240px -26px; } /* Navi anfahrt */ #navi #anfahrt a span { background-position: -360px 0; } #navi #anfahrt a:hover span, #navi #anfahrt a:active span, #navi #anfahrt a:focus span { background-position: -360px -26px; } /* Navi kontakt */ #navi #kontakt a span { background-position: -480px 0; } #navi #kontakt a:hover span, #navi #kontakt a:active span, #navi #kontakt a:focus span { background-position: -480px -26px; } Danke für eure Hilfe lila_3 |
Sponsored Links |
|
|||
Nicht bei einem gefloateten Element. Dem sagst du schließlich, es soll so weit links wie möglich stehen.
Zitat:
Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
Hallo fricca,
habe ich das richtig verstanden, dass ich für jeden link den Abstand nach links angeben soll. Dann kann ich die width angaben weglassen und die Navi sollte zentriert sein? Danke für die Tipps lila_3 |
|
|||
Nein, gar nicht.
Wenn du feste Breiten hast brauchst du keine Zentriermethode für unbekannte Breiten. Du kannst einfach rechnen und dem umgebenden Element einen linken Abstand geben. Oder du gibst den li-Elementen nicht nur ein linkes Padding, sondern verteilst es auf rechts und links. Dann kannst du die Gesamtbreite ausrechnen und dem umgebenden Element zuweisen und dieses zentrieren.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 11:11 |
Float-Problem? | mischaef | CSS | 33 | 20.10.2010 16:20 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 15:29 |
navigation will sich nicht horizontal zentrieren lassen | mrParker | CSS | 24 | 30.05.2006 20:03 |
Container mit 2 Container darin -> Hintergrund anzeigen | bendar | CSS | 4 | 05.04.2005 18:18 |