Hallo,
mir ist aufgefallen, dass nebeneinander angeordnete divs (per float:left) sich trotzdem untereinander anordnen, wenn man das Browserfenster in horizontaler Richtung schmaler macht.
Hier sieht man das sehr gut. Wenn man das Fenster kleiner macht, verschieben sich die Buttons untereinander. Im IE ist eins sogar von anfang an in der nächsten "Zeile".
Wie kann ich das denn unterbinden?
Die Buttons:
Code
<div style="float:left; background-color:#FF0000;">
<span class="content">
<span class="buttons_oben">
<span class="1">[url='index.php']LABER[/url]</span>
<span class="2">[url='index.php']BLA[/url]</span>
<span class="3">[url='index.php']FORUM[/url]</span>
<span class="4">[url='index.php']START[/url]</span>
<span class="5">[url='index.php']SÜLZ[/url]</span>
</span>
</span>
</div>style.css
Code
.content{
float:left;
border-width:3px;
border-color:#000000;
border-style:double;
}
.buttons_oben a{
float:left;
background-color:#D5D5D5;
color:#404040;
font-size: 12px;
font-family:Eurostile;
font-weight: bold;
width:197px;
text-align:center;
text-decoration:none;
padding-top: 10px;
padding-bottom:10px;
}
.1 a{
float:left;
border-top: solid 2px #444;
border-bottom: solid 1px #444;
}
.1 a:hover{
float:left;
border-top: solid 4px #444;
}
.2 a{
float:left;
}
.3 a{
float:left;
}
.4 a{
float:left;
}
.5 a{
float:left;
}Bei den klassen 1 - 5 hab ich auch noch das Problem, dass die sich rein gar nicht bemerkbar machen... der Border in .1 a{...} ist nicht zu sehen z.B.
ansonsten rutschen dir wieder Buttons von Anfang an in die nächste Zeile...