Navigationsleiste Breite korrekt anpassen - automatisch einstellen

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

MrMurphy

Hallo,

du arbeitest viel mit festen Breitenangaben. Wenn das umgende Element eine festgelegte Breite hat und die eingeschlossenen Elemente insgesamt breiter sind als das umgebende Element erfolgt ein Zeilenumbruch. Bei dir könntest du zum Beispiel das padding für das a-Element links und / oder rechts verringern.

Die Ursache ist, das die unterschiedlichen Browser und Betriebssysteme die Schriften leicht unterschiedlich interpretieren. Oder wenn die vorgegene Schrift auf dem Rechner des Users nicht vorhanden ist eine Ersatzschrift wählen.

Wenn du das vermeiden willst solltest du ein flexibles Design, am besten verbunden mit einem Responsive Design, wählen. Google bietet da jede Menge Lösungen.

Gruss

MrMurphy

djheke

Wobei Prozentangaben völlig ausreichen würden. Zumindestens solange bis Media-Queries greifen.

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!

djheke

Eigentlich hatte ich es so vestanden, dass sich die Menüleiste über die gesamte Breite erstrecken soll.
Hier mal ein Beispiel:

HTML

<!doctype html>
<html>
<head>
<title>Beispielseite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
* {
 margin:0;
 padding:0;
 list-style:none;
 border:none;
 box-sizing:border-box;
}
/* CSS Document  8*/
body {
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    line-height: 1.4;
}


nav , ul {
 float:left;
 width:100%;
 background:#eee;
 position:relative;
}


ul {
 border-bottom:1px solid #000;
}
nav:after {
 content:"";
 position:absolute;
 top:0;
 right:16.66666667%;
 bottom:0;
 width:1px;
 background:#000;
}


li {
 float:left;
 width:16.666666667%;
 position:relative;
}




a {
 display:block;
 padding:10px;
 text-decoration:none;
 text-align:center;
 font-weight:bold;
 color:#000;
 border:1px;
 border-style:none solid ;
 margin-right:-1px;
}


li ul {
 position:absolute;
 left:-99999em;
}




li ul li {
 float:none;
 width:100%;
}


li ul li a {
 text-align:left;
}


li:hover > ul {
 top:auto;
 left:0;
}


li:hover > ul  a {
 text-decoration:none;
}




ul ul li:hover a {
 background:#dea;
}


li:hover a {
 text-decoration:underline;
}


nav li:nth-child(1) a ,
nav li:nth-child(5) a ,
nav li:nth-child(6) a {
  border-style:solid none none none;
}


nav li:nth-child(2) a ,
nav li:nth-child(3) a ,
nav li:nth-child(4) a {
 border-style:solid solid none solid;
}
</style>
</head>
<body>
<div id="content">
<nav>
    <ul>
        <li><a href="index.php?site=start">Startseite</a></li>
        <li><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><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><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><a href="mailto: xxxyyyzzz">Kontakt</a></li>
        <li><a href="index.php?form=logout">Abmelden</a></li>
    </ul>
</nav>
</div>


</body>
</html>

Alles anzeigen

Navigationsleiste Breite korrekt anpassen - automatisch einstellen

Tags

Benutzer online in diesem Thema