|
|||
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"> #nav { width: 100%; background: #0F0F0F; color: #FFF; margin: 0 0 10px 0; padding:0; text-align:center; } #nav ul { display: inline-block; margin: 0 auto; padding: 0; } #nav li { display: block; float: left; margin: 0 1px; padding: 0; } #nav a { background: #2F2F2F; color: #FFF; display: block; padding: .3em 1em; text-decoration: none; } #nav a:hover, #nav a:active, #nav a:focus { background-color: #4F4F4F; } </style> HTML-Code:
<div id="nav"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> ... </ul> </div> Geändert von Webnut (16.01.2011 um 08:12 Uhr) Grund: Ergänzung |
Sponsored Links |
Sponsored Links |
|
|||
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. Geändert von Webnut (16.01.2011 um 12:37 Uhr) |
|
||||
Zitat:
Denk mal über einen CSS-Prolog nach und lies dich mal ab hier in horizontale Menüs ein.
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
|
|||
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:
* { margin: 0; padding: 0; } #navbar { background-color:#000; width:100%; list-style: none; text-align: center; padding: .5em; } #navbar li { display:inline; } #navbar a { margin: 0 1px; padding: .5em; background:#202020; color:#fff; text-decoration:none; outline:none; border:none; } #navbar a:hover, a:active, a:focus { background-color:#404040; } <ul id="navbar"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> Geändert von Webnut (16.01.2011 um 13:42 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit Text neben Navigationsleiste | andi01 | CSS | 6 | 08.06.2011 17:54 |
Dynamische Navigationsleiste horizontal, vertikal | Faven | CSS | 6 | 28.06.2010 16:06 |
CSS-Seite horizontal und vertikal zentrieren! | Boof | CSS | 20 | 05.02.2010 13:23 |
Hintergrundbild vertikal UND horizontal zentrieren? | yggdrasil | CSS | 3 | 06.07.2008 11:19 |
Wie Hintergrundkachel bei em-Angaben erstellen? | Mr.T | CSS | 19 | 16.06.2007 04:29 |