XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Horizontal zentrierte Navigationsleiste erstellen (http://xhtmlforum.de/showthread.php?t=63501)

Webnut 16.01.2011 08:04

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>

Das HTML:
HTML-Code:

<div id="nav">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
...
</ul>
</div>

Würde mich freuen wenn jemand einen Tipp für mich hätte.

hubspe 16.01.2011 11:33

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. ;)

Webnut 16.01.2011 12:31

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.

hubspe 16.01.2011 12:44

Zitat:

Zitat von Webnut (Beitrag 485409)
Ich habe es mit festen Höhenangaben hingebogen bekommen, aber das ist auch mehr schlecht als recht. Ich mag es einfach nicht.

feste Höhenangaben brauchst du nicht unbedingt.
Denk mal über einen CSS-Prolog nach und lies dich mal ab hier in horizontale Menüs ein. ;)

Webnut 16.01.2011 13:09

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>

Gäbe es da noch etwas zu beachten oder besser zu machen?


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