Beiträge von MaxMan

MaxMan

Hallo,

danke für die beiden Antworten.
Ich habe es mit folgender Lösung geschafft:

Zentrierung der Menüleiste durch DIV Container
Siehe hier: http://stackoverflow.com/questions/2839…thout-the-width

Und die Menü Listenelemente der Navigation hab ich so angepasst:
nav ul li {
list-style: none;
float: left;
border-right: 1px solid #dfdfdf;
white-space: nowrap;
}

Danke an alle!

MaxMan

Hallo an alle,

ich habe folgendes Problem bei meiner Navigationsleiste:

Bei manchen Usern ist die Leiste zu schmal, d.h. der letzte Listenpunkt rutscht in die neue Zeile.

Bei anderen Usern ist diese zu groß, d.h. nach dem letzten Listenpunkt ist unschöner Freiraum.

Hier der HTML Code meiner HTML Seite. (Die standardmäßigen <html> und <body> etc. wurden auf einer anderen Seite verknüpft, welche diese Seite aufruft...

HTML

<nav id="nav_eingeloggt">
    <ul>
        <li class="cat1">
            <a href="index.php?site=start">Startseite</a>
        </li>


        <li class="cat2">
            <a href="">Infos zum Tippen</a>
            <ul>
                <li> <a href="index.php?site=anleitung">Anleitung zum Tippen </a></li>
                <li> <a href="index.php?site=regeln" >Tippspiel-Regeln </a></li>
            </ul>
        </li>


        <li class="cat3">
            <a href="#">Das Tippspiel</a>
            <ul>
                <li> <a href="index.php?site=tippspiel" >Meine Tipps </a></li>
                <li> <a href="index.php?site=rangliste" >Rangliste ansehen </a></li>
            </ul>
        </li>


        <li class="cat4">
            <a href="">Rund um die WM</a>
            <ul>
                <li> <a  href="index.php?site=wm_news">WM-News </a> </li>
                <li> <a href="index.php?site=spielplan" >aktueller Spielplan</a></li>
                <li> <a href="index.php?site=tabelle" >aktueller Tabellenstand</a></li>
                <li> <a href="index.php?site=weltmeister" >bisherige Weltmeister</a></li>
            </ul>
        </li>




        <li class="cat5">
            <a href="mailto: xxxyyyzzz">Kontakt</a>


        </li>


        <li class="cat6">
            <a href="index.php?form=logout">Abmelden</a>
        </li>


    </ul>
</nav>

Alles anzeigen

Hier der CSS Code, welcher die NAV betrifft:

Code

[TABLE='width: 500']
[TR]
[TD][COLOR=#808080][I]/* CSS Document  8*/
[/I][/COLOR][COLOR=#000080][B]body [/B][/COLOR]{
    [COLOR=#0000ff][B]font-family[/B][/COLOR]: [COLOR=#008000][B]"Times New Roman"[/B][/COLOR], [COLOR=#000080][B]Times[/B][/COLOR], [COLOR=#008000][B]serif[/B][/COLOR];
    [COLOR=#0000ff][B]font-size[/B][/COLOR]: [COLOR=#0000ff]14[/COLOR][COLOR=#008000][B]px[/B][/COLOR];
    [COLOR=#0000ff][B]line-height[/B][/COLOR]: [COLOR=#0000ff]1.4[/COLOR];
}


[COLOR=#000080][B]#menu [/B][/COLOR]{
    [COLOR=#0000ff][B]margin-bottom[/B][/COLOR]: [COLOR=#0000ff]20[/COLOR][COLOR=#008000][B]px[/B][/COLOR];
}


[COLOR=#000080][B]#content [/B][/COLOR]{
    [COLOR=#0000ff][B]width[/B][/COLOR]: [COLOR=#0000ff]1024[/COLOR][COLOR=#008000][B]px[/B][/COLOR];
    [COLOR=#0000ff][B]margin-left[/B][/COLOR]: [COLOR=#008000][B]auto[/B][/COLOR];
    [COLOR=#0000ff][B]margin-right[/B][/COLOR]: [COLOR=#008000][B]auto[/B][/COLOR];
}


[COLOR=#808080][I]/* Navi 863 pix nav (5 Teile) oder 1095 pix bei (6 Teile)  oder 1064  */
[/I][/COLOR][COLOR=#808080][/COLOR][COLOR=#808080][/COLOR][COLOR=#000080][B]nav [/B][/COLOR]{
    [COLOR=#0000ff][B]width[/B][/COLOR]: [COLOR=#0000ff]1020.6[/COLOR][COLOR=#008000][B]px[/B][/COLOR];
    [COLOR=#0000ff][B]height[/B][/COLOR]: [COLOR=#0000ff]50[/COLOR][COLOR=#008000][B]px[/B][/COLOR];
    [COLOR=#0000ff][B]margin-left[/B][/COLOR]: [COLOR=#008000][B]auto[/B][/COLOR];
    [COLOR=#0000ff][B]margin-right[/B][/COLOR]: [COLOR=#008000][B]auto[/B][/COLOR];
}


[COLOR=#000080][B]#nav_ausgeloggt [/B][/COLOR]{
    [COLOR=#0000ff][B]width[/B][/COLOR]: [COLOR=#0000ff]690.5[/COLOR][COLOR=#008000][B]px
[/B][/COLOR]}


[COLOR=#000080][B]nav ul [/B][/COLOR]{
    [COLOR=#0000ff][B]padding[/B][/COLOR]: [COLOR=#0000ff]0[/COLOR][COLOR=#008000][B]px[/B][/COLOR];
    [COLOR=#0000ff][B]margin[/B][/COLOR]: [COLOR=#0000ff]0[/COLOR][COLOR=#008000][B]px[/B][/COLOR];


    [COLOR=#0000ff][B]box-shadow[/B][/COLOR]: [COLOR=#0000ff]2[/COLOR][COLOR=#008000][B]px [/B][/COLOR][COLOR=#0000ff]2[/COLOR][COLOR=#008000][B]px [/B][/COLOR][COLOR=#0000ff]2[/COLOR][COLOR=#008000][B]px [/B][/COLOR][COLOR=#000080][B]#dfdfdf[/B][/COLOR];
    [COLOR=#0000ff][B]-moz-box-shadow[/B][/COLOR]: [COLOR=#0000ff]2[/COLOR][COLOR=#008000][B]px [/B][/COLOR][COLOR=#0000ff]2[/COLOR][COLOR=#008000][B]px [/B][/COLOR][COLOR=#0000ff]2[/COLOR][COLOR=#008000][B]px [/B][/COLOR][COLOR=#000080][B]#dfdfdf[/B][/COLOR];
    [COLOR=#0000ff][B]-webkit-box-shadow[/B][/COLOR]: [COLOR=#0000ff]2[/COLOR][COLOR=#008000][B]px [/B][/COLOR][COLOR=#0000ff]2[/COLOR][COLOR=#008000][B]px [/B][/COLOR][COLOR=#0000ff]2[/COLOR][COLOR=#008000][B]px [/B][/COLOR][COLOR=#000080][B]#dfdfdf[/B][/COLOR];
}


[COLOR=#000080][B]nav ul[/B][/COLOR]:[COLOR=#000080][B]after [/B][/COLOR]{
    [COLOR=#0000ff][B]clear[/B][/COLOR]: [COLOR=#008000][B]both[/B][/COLOR];
    [COLOR=#0000ff][B]content[/B][/COLOR]: [COLOR=#008000][B]" "[/B][/COLOR];
    [COLOR=#0000ff][B]display[/B][/COLOR]: [COLOR=#008000][B]block[/B][/COLOR];
    [COLOR=#0000ff][B]font-size[/B][/COLOR]: [COLOR=#0000ff]0[/COLOR];
    [COLOR=#0000ff][B]height[/B][/COLOR]: [COLOR=#0000ff]0[/COLOR];
    [COLOR=#0000ff][B]visibility[/B][/COLOR]: [COLOR=#008000][B]hidden[/B][/COLOR];
}


[COLOR=#000080][B]nav ul[/B][/COLOR], [COLOR=#000080][B]nav ul li [/B][/COLOR]{
    [COLOR=#0000ff][B]background-color[/B][/COLOR]: [COLOR=#000080][B]#FAFAFA[/B][/COLOR];
}


[COLOR=#000080][B]nav ul li [/B][/COLOR]{
    [COLOR=#0000ff][B]list-style[/B][/COLOR]: [COLOR=#008000][B]none[/B][/COLOR];
    [COLOR=#0000ff][B]float[/B][/COLOR]: [COLOR=#008000][B]left[/B][/COLOR];
    [COLOR=#0000ff][B]border-right[/B][/COLOR]: [COLOR=#0000ff]1[/COLOR][COLOR=#008000][B]px solid [/B][/COLOR][COLOR=#000080][B]#dfdfdf[/B][/COLOR];
}


[COLOR=#000080][B]nav ul li a [/B][/COLOR]{
    [COLOR=#0000ff][B]text-decoration[/B][/COLOR]: [COLOR=#008000][B]none[/B][/COLOR];
    [COLOR=#0000ff][B]display[/B][/COLOR]: [COLOR=#008000][B]block[/B][/COLOR];
    [COLOR=#0000ff][B]color[/B][/COLOR]: [COLOR=#000080][B]#333[/B][/COLOR];
    [COLOR=#0000ff][B]padding[/B][/COLOR]: [COLOR=#0000ff]14[/COLOR][COLOR=#008000][B]px [/B][/COLOR][COLOR=#0000ff]34[/COLOR][COLOR=#008000][B]px [/B][/COLOR][COLOR=#0000ff]14[/COLOR][COLOR=#008000][B]px [/B][/COLOR][COLOR=#0000ff]34[/COLOR][COLOR=#008000][B]px[/B][/COLOR];
    [COLOR=#0000ff][B]font-size[/B][/COLOR]: [COLOR=#0000ff]18[/COLOR][COLOR=#008000][B]px[/B][/COLOR];
    [COLOR=#0000ff][B]-webkit-transition[/B][/COLOR]: [COLOR=#008000][B]background [/B][/COLOR][COLOR=#0000ff]0.3[/COLOR][COLOR=#000080][B]s ease-out [/B][/COLOR][COLOR=#0000ff]0[/COLOR][COLOR=#000080][B]s[/B][/COLOR];
    [COLOR=#0000ff][B]-moz-transition[/B][/COLOR]: [COLOR=#008000][B]background [/B][/COLOR][COLOR=#0000ff]0.3[/COLOR][COLOR=#000080][B]s ease-out [/B][/COLOR][COLOR=#0000ff]0[/COLOR][COLOR=#000080][B]s[/B][/COLOR];
    [COLOR=#0000ff][B]-o-transition[/B][/COLOR]: [COLOR=#008000][B]background [/B][/COLOR][COLOR=#0000ff]0.3[/COLOR][COLOR=#000080][B]s ease-out [/B][/COLOR][COLOR=#0000ff]0[/COLOR][COLOR=#000080][B]s[/B][/COLOR];
    [COLOR=#0000ff][B]transition[/B][/COLOR]: [COLOR=#008000][B]background [/B][/COLOR][COLOR=#0000ff]0.3[/COLOR][COLOR=#000080][B]s ease-out [/B][/COLOR][COLOR=#0000ff]0[/COLOR][COLOR=#000080][B]s[/B][/COLOR];


}


[COLOR=#000080][B]nav ul li[/B][/COLOR].[COLOR=#000080][B]cat1[/B][/COLOR]:[COLOR=#000080][B]hover a [/B][/COLOR]{
    [COLOR=#0000ff][B]background-color[/B][/COLOR]: [COLOR=#000080][B]#E6DD00[/B][/COLOR];


}


[COLOR=#000080][B]nav ul li[/B][/COLOR].[COLOR=#000080][B]cat2[/B][/COLOR]:[COLOR=#000080][B]hover a [/B][/COLOR]{
    [COLOR=#0000ff][B]background-color[/B][/COLOR]: [COLOR=#000080][B]#8CB302[/B][/COLOR];


}


[COLOR=#000080][B]nav ul li[/B][/COLOR].[COLOR=#000080][B]cat3[/B][/COLOR]:[COLOR=#000080][B]hover a [/B][/COLOR]{
    [COLOR=#0000ff][B]background-color[/B][/COLOR]: [COLOR=#000080][B]#008C74[/B][/COLOR];


}


[COLOR=#000080][B]nav ul li[/B][/COLOR].[COLOR=#000080][B]cat4[/B][/COLOR]:[COLOR=#000080][B]hover a [/B][/COLOR]{
    [COLOR=#0000ff][B]background-color[/B][/COLOR]: [COLOR=#000080][B]#004C66[/B][/COLOR];


}


[COLOR=#000080][B]nav ul li[/B][/COLOR].[COLOR=#000080][B]cat5[/B][/COLOR]:[COLOR=#000080][B]hover a [/B][/COLOR]{
    [COLOR=#0000ff][B]background-color[/B][/COLOR]: [COLOR=#000080][B]rgb[/B][/COLOR]([COLOR=#0000ff]0[/COLOR], [COLOR=#0000ff]102[/COLOR], [COLOR=#0000ff]255[/COLOR]) [COLOR=#808080][I]/*#332B40; */
[/I][/COLOR][COLOR=#808080][/COLOR]}


[COLOR=#000080][B]nav ul li[/B][/COLOR].[COLOR=#000080][B]cat6[/B][/COLOR]:[COLOR=#000080][B]hover a [/B][/COLOR]{
    [COLOR=#0000ff][B]background-color[/B][/COLOR]: [COLOR=#000080][B]#332B40[/B][/COLOR];


}


[COLOR=#000080][B]nav ul li[/B][/COLOR]:[COLOR=#000080][B]hover [/B][/COLOR]> [COLOR=#000080][B]ul [/B][/COLOR]{
    [COLOR=#0000ff][B]visibility[/B][/COLOR]: [COLOR=#008000][B]visible[/B][/COLOR];
}


[COLOR=#000080][B]nav ul li ul [/B][/COLOR]{
    [COLOR=#0000ff][B]display[/B][/COLOR]: [COLOR=#008000][B]inline[/B][/COLOR];
    [COLOR=#0000ff][B]visibility[/B][/COLOR]: [COLOR=#008000][B]hidden[/B][/COLOR];
    [COLOR=#0000ff][B]position[/B][/COLOR]: [COLOR=#008000][B]absolute[/B][/COLOR];
    [COLOR=#0000ff][B]padding[/B][/COLOR]: [COLOR=#0000ff]0[/COLOR][COLOR=#008000][B]px[/B][/COLOR];
    [COLOR=#0000ff][B]z-index[/B][/COLOR]: [COLOR=#0000ff]1[/COLOR];
}


[COLOR=#000080][B]nav ul li ul li [/B][/COLOR]{
    [COLOR=#0000ff][B]float[/B][/COLOR]: [COLOR=#008000][B]none[/B][/COLOR];
}


[COLOR=#000080][B]nav ul li ul li a[/B][/COLOR]:[COLOR=#000080][B]hover [/B][/COLOR]{
    [COLOR=#0000ff][B]color[/B][/COLOR]: [COLOR=#000080][B]#333[/B][/COLOR];
}


[COLOR=#000080][B]nav ul li[/B][/COLOR]:[COLOR=#000080][B]hover [/B][/COLOR]> [COLOR=#000080][B]a [/B][/COLOR]{
    [COLOR=#0000ff][B]color[/B][/COLOR]: [COLOR=#000080][B]#FAFAFA[/B][/COLOR];
}


[COLOR=#000080][B]nav ul li ul li a [/B][/COLOR]{
    [COLOR=#0000ff][B]color[/B][/COLOR]: [COLOR=#000080][B]#FAFAFA[/B][/COLOR];
}


[COLOR=#000080][B]nav ul li ul li a[/B][/COLOR]:[COLOR=#000080][B]hover [/B][/COLOR]{
    [COLOR=#0000ff][B]color[/B][/COLOR]: [COLOR=#000080][B]#333[/B][/COLOR];
    [COLOR=#0000ff][B]background-color[/B][/COLOR]: [COLOR=#000080][B]#FAFAFA !important[/B][/COLOR];
}[/TD]
[/TR]
[/TABLE]

Alles anzeigen

Ich bitte um Hilfe, da bei jedem die Breite anders ist.

Bitte hilft mir

Grüße

MaxMan

Beiträge von MaxMan

Navigationsleiste Breite korrekt anpassen - automatisch einstellen

Navigationsleiste Breite korrekt anpassen - automatisch einstellen