[ERLEDIGT] letzte Navigationsspalte springt in nächste Zeile!

[sparklemachinee]

Hi,

brauche mal eure Hilfe. Beim verkleinern meiner Webseite (auf ganz schmal), rutscht der letzte Menüpunkt meiner Navi in die nächste Zeile. Der zweite Menupunkt rutscht wiederum nicht mit. Weiß jemand eine Lösung wie alles in EINER Zeile bleibt, auch wenn das Browserfenster sehr schmal verkleinert wird?

Hier der Link:
http://happytype.de/Napoleon

LG

 

[sysop]

Auf die Schnelle habe ich im Quellcode nur gesehen, dass deine Container nicht korrekt angeordnet sind. Du schliesst wohl mehr, als du öffnest.
Geh deinen Code nochmal durch und sieh dir das genauer an.
Deine Link-Tags sind auch falsch, was ist das z.B.


<li class="selected" a href="editorial1">Editorial Design</a></li>

 

[sparklemachinee]

Ja das weiß ich. Das Problem muss denke ich irgendwo in den styles für die columns liegen, aber hab keine Eigenschaft gefunden, die das verhindern würde bzw., die das Problem auslöst.

/* Grid 960 / 6
====================================================== */
.site_container {
    margin: 0 auto;
}

.personal {
    margin:0 auto;
}

.container { 
    margin: 0 auto; 
    max-width: 940px; 
    clear:both;
    }

/* === Kolumnen floaten nur wenn sie sich im container befinden und gleichzeitig als column definiert sind!=== */
.line {
    max-width:940px;
    margin-bottom:30px;
    clear:both;
    color:#9E9E9E;
}

.container .column { 
    margin-right:3px;
    float: left; 
    display: inline!important; 
    background:none;

    }

.row  { 
    margin-bottom: 20px; 
    width:940px;
    }
    
.row2  { 
    margin-bottom: 40px; 
    width:940px;
    }

.column.last { 
    margin-right: 0; 
    }


.container .one.column    { width: 135px; }
.container .two.column    { 
    width: 240px; 
    margin-bottom:30px;
    
    }
.container .three.column  { width: 465px; }
.container .four.column   { width: 630px; }
.container .five.column   { width: 795px; }
.container .six.column      { width: 960px; height:20px;}

 

[scbawik]

Also ab und zu versteh ich euch schon nicht...

Wusstest du nicht dass Float in einer Zeile nur möglich ist, solange auch genügend Platz vorhanden ist? Wenn das Fenster kleiner wird, schrumpft auch der verfügbar Platz - logisch oder?

Wie du an deinem CSS erkennen solltest, ist ein .column 135px breit.
(135 Pixel + 3 Margin-Right) * 3 = 414 Pixel

Der .container von .column muss also mindestens 414 Pixel breit sein damit alles rein passt.

Lösung gefällig?

.container{min-width:414px;}

 

[sparklemachinee]

Tausend Dank, es funktioniert. Genau danach hab ich gesucht. Wär ich echt nie drauf gekommen – bin halt noch Anfänger und mache meine erste Website! Don’t hate! ;-)

 

[scbawik]

Ok, lass ich nochmal durchgehen