Schneller mit Css arbeiten – ein kleiner Trick
Wie sieht mein Ablauf aus, wenn ich ein Layout entwerfe:
- Ich modelliere die Boxen in Css und kontrolliere das Layout mit dem Firefox
- Ich behebe die restlichen kleinen Mängel und kontrolliere wieder
- nachdem alles abgeschlossen wurde rufe ich die Website mit dem Internet Explorer auf…
- … und dann ärgere ich mich
Sicher kennen einige dieses Szenario. Das der IE alles etwas “anders” interpretiert ist bekannt. Nun muss das Layout aber in beiden Browsern gleich aussehen. Den ersten Schritt den ich mache, bevor ich mich großartig durch den Code wühle und Dinge ausprobiere, ich gehe in mein Stylesheet und schreibe ganz oben folgenden Code:
div {border: 1px solid black;}
Damit erhalten alle Boxen einen Rahmen von einem Pixel in schwarz und nun kann ich sehen, welche Dimensionen die Boxen haben und aus welchem Grund das Layout nicht richtig dargestellt wird. In 95% der Fälle sind Layoutfehler dort zu finden, also spart euch in Zukunft Umwege und benutzt diesen Schritt als erstes.
Verwandte Artikel
- Css – boxenorientiertes Denken
- Css – boxenorientiertes Denken
- Eigene Rahmen mit kleinen transparenten Gifs gestalten
- Eigenes WordPress Template in wenigen Schritten – Schritt 5
- Javascript Trick “getElementByClass” – versteckter Content für Sumas direkt sichtbar
4 Kommentare
Tut mir leid, die Kommentarfunktion für diesen Beitrag ist geschlossen.
Und wer einen Mac nutzt schaut sich einfach mal Xyle scope an – so was wie die Deluxe-Version der 1-Pixel-Rahmen ;-)
*g ja hätte ich auch gern, aber dafür muss ich erstmal einiges mehr mit meinen Projekten verdienen ;)
Alternativ die Web Developer Toolbar oder/und das Aardvark-Plugin in FF installieren. Mit der Toolbar kann man die Divs auch anzeigen und die Stylesheets direkt “live” bearbeiten.
Dachte ich auch anfangs, aber ich brauche ja die Sicht für den Internet Explorer, und dort wird die Toolbar nicht unterstützt (Divs lassen sich sich nicht anzeigen).