2012-07-30 8 views
7

Ich versuche meine Hand bei HTML5/CSS3 als Lernprozess, aber ich habe Mühe, eine Navigationsleiste für Links zu anderen Abschnitten auf meinen Seiten zu erstellen. Ich habe den Code aus einem Tutorial gefunden und es funktioniert aber nur bei einer Auflösung von 1080p, wenn die Breite kleiner ist, wird der Balken auf andere Zeilen umgebrochen.nav bar wrapping auf kleineren Auflösungen

Wie stelle ich sicher, dass die Navigationsleiste nur eine Zeile aufnimmt (verkleinert, um zu passen), egal welche Auflösung der Benutzer verwendet?

img

Hier ist mein CSS-Code für die Navigationsleiste. Bitte beachten Sie, dass ich unter nav die Breite auf 33,3% eingestellt habe und auf die gleiche Weise gepolstert habe, um die Schaltflächen zu zentrieren. Ich weiß nicht, ob das der Grund ist.

nav { 
    display:block; 
    position: absolute; 
    left:0; 
    white-space:nowrap; 
    margin: 0 auto; 
    width: 33.3%; 
    background-color:#ff6600; 
    padding-left: 33.3%; 
    padding-right: 33.3%; 
} 

nav ul { 
    margin: 0 auto; 
    width: 100%; 
    list-style: none; 
    display: inline; 
    white-space:nowrap; 
} 

nav ul li { 
    float: left; 
    position: relative; 
    white-space:nowrap; 
} 

nav ul li a { 
    display: block; 
    margin: 0 auto; 
    width: 150px; 
    font-size: 16px; 
    font-family: century gothic; 
    line-height: 44px; 
    text-align: center; 
    text-decoration: none; 
    color:#575757; 
    white-space:nowrap; 
} 

nav ul ul { 
    width: 200px; 
    position:absolute; 
    top:-99999px; 
    left:0; 
    opacity: 0; 
    -webkit-transition: opacity .4s ease-in-out; 
    -moz-transition: opacity .4s ease-in-out; 
    -o-transition: opacity .4s ease-in-out; 
    transition: opacity .4s ease-in-out; 
    z-index:497; 
    background:#333; 
    padding: 2px; 
    border:1px solid #444; 
    border-top:none; 
    box-shadow:#111 0 3px 4px; 
} 


nav ul ul li a { 
    display: block; 
    width: 200px; 
    text-align: left; 
    padding-left: 3px; 
    font-size: 14px;  
} 



nav ul li:hover>ul{ 
    opacity: 1; 
    position:absolute; 
    top:98%; 
    left:0; 

} 


nav ul li a:hover { 
    color: #fff; 
    background-color: #cc3300 
} 

nav ul li.selected a { 
    color: #fff; 
    background-color: #cc3300; 
} 

Antwort

11

Sie haben es fast richtig gemacht. Das Problem mit Ihrem CSS ist, dass white-space: nowrap; nur für inline Elemente funktioniert - aber Sie verwenden float. Floated-Elemente werden auf Blockebene gesetzt, selbst wenn Sie die Eigenschaft display: inline; für ein solches Element festlegen (es wird nicht angewendet). Also - wenn Sie Ihren Wagen mit display: inline-block; ersetzen - Ihre white-space Eigenschaft funktioniert :)

Ein anschauliches Beispiel von inline-block s und white-space kann hier gesehen werden: http://jsfiddle.net/skip405/wzgcH/

Wie für Ihre Zentrierung Methode - gibt es eine bessere Lösung . (Sie können die padding entfernen und die richtige Breite einstellen) Besonders wenn Sie Inline-Blöcke verwenden. Setzen Sie einfach text-align: center; auf ihre übergeordnete - und Sie werden es zentriert haben.

+0

vielen Dank, krank geben Sie dies einen Versuch – user1563865

+0

Es funktioniert, wenn das Menü nur eine Ebene hat. Mit verschachtelten "ul" ist es nicht. – Moesio

0

Das Problem ist, dass Sie die nav Breite setzen ein bloßes 33,3% mit der Rest zu sein Polsterung zu sein. Der kleine zulässige Platz drückt dann alle Elemente unter einander, wenn die Größe nach einem bestimmten Punkt geändert wird. Um dies zu verhindern, können Sie zwei Dinge tun, stellen Sie die Nav-Breite stattdessen auf 100% ein, und zweitens, wenn Sie nicht wollen, dass die Größe überhaupt geändert wird, müssen Sie ihr min-width der Summe aller a geben Elemente Breite zusammen. Sie sollten es höchstwahrscheinlich auch max-width geben, es sei denn, Sie verwenden ein responsives Design. Hier ist eine Demo, die ich zusammen mit Ihrem modifizierten css gemacht habe: http://jsfiddle.net/c3HE6/

+0

danke Paul krank damit gehen. Prost – user1563865