Horizontal zentrierte Navigationsleiste erstellen
Guten Morgen!
Ich habe bei der Erstellung eines CSS-Layouts ein Problem mit meiner Navigationsleiste. Ich habe eine unsortierte Liste mit Links in ein DIV gepackt, und das ganze soll mit CSS zu einer horizontal zentrierten Navigationsleiste formatiert werden. Am unteren Rand der Navigationsleiste habe ich vom DIV aber einen Leerraum, der da nicht sein soll. Zumindest ist es im IE und dem Firefox so. Der Opera zeigt es an wie ich mir das vorstelle. Ich komme leider nicht dahinter, was ich falsch mache. Ich gebe euch am Besten mal einen Link zur Live-Demo (Navigationsleiste alleinstehend). Navbar Demo Die CSS Angaben: HTML-Code:
<style type="text/css"> HTML-Code:
<div id="nav"> |
Moin,
das wird durch display:inline-block; für ul hervorgerufen, bzw. braucht ul dann noch vertical-align:bottom;. Die Lücke da unten entsteht durch den reservierten Platz für die Unterlänge der Buchstaben (g, y, j), weil bei inline-Elementen das default vertical-align:baseline; ist. Warum überhaupt der inline-block? Den finde ich unnötig, zumal da ältere IE's ihre Probleme haben. ;) |
Vielen Dank schon mal für den wertvollen Hinweis. Dann werde ich wohl mein Konzept für die horizontale Navigation nochmal überdenken müssen.
Wenn ich das display:inline-block herausnehme, dann haut gar nichts mehr hin. Die Hintergrundfarbe wird nicht angezeigt und die linke Sidebar ist dann rechts neben der Navigationsleiste. Ich habe es mit festen Höhenangaben hingebogen bekommen, aber das ist auch mehr schlecht als recht. Ich mag es einfach nicht. |
Zitat:
Denk mal über einen CSS-Prolog nach und lies dich mal ab hier in horizontale Menüs ein. ;) |
Danke für den Lesestoff. Da werde ich mich nochmal einlesen und die FAQ durcharbeiten.
Ich glaube dass ich die Lösung gefunden habe. Das ganze muss natürlich noch gehübscht werden. Mir ging es erstmal nur um das Grundgerüst. Und das könnte meiner Ansicht nach so aussehen: HTML-Code:
* { |
Alle Zeitangaben in WEZ +2. Es ist jetzt 09:38 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023