Matthias Apsel: browser schreddert hp beim zoomen

Beitrag lesen

Om nah hoo pez nyeetz, Martin Klinkmüller!

Ich würde das als Rundungsfehler abtun, weil die Pixel immer kleiner werden und der Browser feststellt, dass die Boxen nicht mehr nebeneinander passen.

Abhilfe schafft ein nicht so festzementiertes Layout. Beispielsweise könnte deine erste Zeile so aussehen

<div>
  <div id="left1"></div>
  <div id="right2"></div>
</div>

Links und rechts sind übrigens bescheuerte Klassen- bzw. ID-bezeichner. Wodurch unterscheiden sich left1 und left5 von der Gestaltung? Gar nicht!

Deshalb reichen Klassen, beispielsweise "de" und "en", aber auch darauf lässt sich verzichten.

Mein Markup sähe vielleicht so aus

<ul> <!-- es gibt beliebig viele solcher Zeilen -->  
  <li>  
    <div war früher id=links></div><div war früher id=rechts></div> <!-- Es gilt, whitespace zu vermeiden -->  
    Hier kommt der Text rein, der in der Mitte steht.  
  </li>  
</ul>

Das dazu passende CSS

li {padding: 0 367px; /* ganz viel Platz links und rechts */  
    text-align: center;  
    clear: both; } /* sollen wieder in einer neuen Zeile beginnen */  
ul div {float: right;} /* alle div-Elemente nach rechts */  
ul div:first-child {float: left;} /* die ersten nach links */

ungetestet, aber damit würde ich beginnen

Matthias

--
1/z ist kein Blatt Papier.