Navigation - Warum nicht in einer Linie?

unkown-6363

Warum sind "oben" in der Leiste nicht alle Elemente in einer Reihe?
Der "Mantel" ist 800px breit und es gibt 4x200px breite Bereiche. Wo ist da das Problem?

PS: Diese krassen Kontraste nutze ich immer beim designen um die Layoutgrenzen zu sehen

html-seminar.de/woltlab/attachment/374/

Code

<nav id="primary">
            <!-- Navigation zwischen meinen Projekten -->
            <ul>
                <li>Blog</li>
                <li>Programmierung
                    <!--<ul>
                        <li>Webentwicklung</li>
                        <li>Java</li>
                    </ul>-->
                </li>
                <li>Sonstige Projekte
                    <!--<ul>
                        <li>Schere-Stein-Papier-Echse-Spock</li>

                    </ul>-->
                </li>
                <li>Kontakt</li>
            </ul>
        </nav>

Alles anzeigen

CSS

body
{
    min-width: 800px;
}
nav#primary
{
    height: 30px;
    background-color: #444;
}
    nav#primary ul
    {
        color: #6A92D4;
        font-weight: 900;
        line-height: 30px;
        width: 800px;
        background-color: yellow;
        margin: 0 auto;
    }
    nav#primary li
    {
        display: inline-block;
        text-align: center;
        width: 200px;
        margin: 0 auto;
    }

Alles anzeigen

lauras

margin, padding und border auf 0 setzen

Roland

oh da hätte ich auch noch eine frage was ist besser:
display: inline-block;
oder
float:left;
(bei nav#primary li)

bewirkt irgendwie das gleiche nur das ich bei float dann noch cleanen muss^^ (aber bei inline-block ist komischer weise egal was man macht, immer ein abstand zwischen 2 inlineblocks wiiiiisooooo^^)

unkown-6363

Zitat von lauras

margin, padding und border auf 0

Entschuldigung, das habe ich vergessen zu erwähnen.
Weiter oben im Code wird eine reset.css eingebunden, auf der ALL das gemacht wird

kanufrosch

Vielleicht hilft

HTML

border: none;

Edit: Sorry hab übersehen das Lauras auch border aufgezählt hatte

unkown-6363

Ist auch. ._.
Ich kann zwar Improvisieren und die Breite vom Mantel auf 801px setzten, dass ist doch aber irgendwie..naja man versucht doch ein problem zu lösen und nicht zu umgehen

Roland

bei inline-block ist irgendwie immer ein Abstand (vll wegen den leerzeichen zwischen den 2 inline blocks??)

dann ersetzte einfach die zeile
display: inline-block;
durch die hier
float:left;
dann sollte es gehen denke ich

unkown-6363

Hey, mit float funktioniert die ganze sache. Danke!

ramon1611

bei float hast du aber Kompatibilitätsprobleme bei einigen browsern (meines wissens nach auf jeden fall im IE und in etwas älteren versionen vom firefox)

unkown-6363

Bei meiner Zielgruppe dürfte das wohl kaum eine Rolle spielen.

Roland

float funst 1a sogar im ie7 bei meiner gefloateten Navigationsbar

ramon1611

naja, ok
habs mal gehört, dasses nich so gut funktionieren soll
(bei meinen Praktikum als Webdesigner)

Roland

ja ist schon gut den ie schlecht zu reden (zumindest alles älter 9) aber schlechter machen als er ist ist nicht nötig^^

Jetzt mitmachen!