CSS Debugging
Piet
- css
0 Detlef G.0 Piet
0 Sven Rautenberg0 Tim Tepaße0 Piet
0 Christoph Ruhnke
Wie überprüft ihr in Zweifelsfällen auf Windows die Box-Abmessungen? Im Mozilla ist der Dom-Inspector ja sehr hilfreich, aber nicht immer und auch nicht immer sehr bequem. Screenshot in Photoshop laden und nachmessen geht ja ganz gut aber es muss doch noch was performanteres und weniger kostspieleriges geben. Beim IE gibt es zudem keinen Dom-Inspector obwohl er da am dringensten benötigt werden würde.
Wichtige Features wären die Möglichkeit zur Vergrößerung um die Maus Pixelgenau ansetzen zu können. Nice to have die Möglichkeit mehrere Versionen mit etwas Transparenz übereinanderlegen zu können. Vor allem aber müsste alles sehr einfach, komfortabel und sehr schnell gehen können.
Für Anregungen wäre ich sehr dankbar.
Hallo Piet
Für Anregungen wäre ich sehr dankbar.
Ich binde zum Test folgende Grafik vorübergehend als Hintergrund ein.
<img src="http://d-graff.de/demos/selfhtml/lineal.gif" border="0" alt="">
MFG
Detlef
Ich binde zum Test folgende Grafik vorübergehend als Hintergrund ein.
Ja, die Idee mit den Hintergrundgrafiken ist nicht verkehrt. Setzte ich auch öfter ein. Allerdings hilft das nicht weiter, wenn man pixelgenaue einen Abstand mitten im Geschehen ermitteln will. Ein Hintergundraster wäre eine andere Möglichkeit, aber das muss man natürlich erst mal einbinden und dann eventuell die im Weg liegenden Hintergrundfarben entfernen.
Trotzdem Danke für die Antwort.
Moin!
Wie überprüft ihr in Zweifelsfällen auf Windows die Box-Abmessungen?
Wieso prüfen? Man schreibt das CSS, und dann sind die Boxen da, wo man sie hinhaben wollte, inklusive der gewünschten Abmessung. Oder nicht?
Wenn die Schachtelung unklar ist: Rahmen oder Hintergrundfarbe auffällig setzen, dann sieht man meist mehr.
- Sven Rautenberg
Hallo,
Wie überprüft ihr in Zweifelsfällen auf Windows die Box-Abmessungen?
Kaum. So wichtig ist mir pixelgenaues Positionieren nicht mehr. Aber
das bin bloß ich.
Wenn die Schachtelung unklar ist: Rahmen oder Hintergrundfarbe auffällig
setzen, dann sieht man meist mehr.
Aber eine schnelle Angabe wie border:1px solid red; gehört zu den von
am häufigsten getippten Dingen in Stylesheets.
Tim
Wieso prüfen? Man schreibt das CSS, und dann sind die Boxen da, wo man sie hinhaben wollte, inklusive der gewünschten Abmessung. Oder nicht?
OK, dann oute ich mich jetzt als nicht-Geek. So virtuos beherrsche ich leider komplexes CSS unter Berücksichtigung aller Browsereigenheiten und Hacks nicht. Mit komplex meine ich dann schon die Pixelgenaue Umsetzung von Layouts von Screendesignern (nicht immer ein Traumjob). Das heißt oft mehrfach verschachtelte und gefloatete Divs, Listen etc. Alles mit (leider) festen Breiten, Paddings, Margins und den damit verbundenen Schwierigkeiten.
Wenn die Schachtelung unklar ist: Rahmen oder Hintergrundfarbe auffällig setzen, dann sieht man meist mehr.
Mein Tipp hier (für Mozilla) die Webdeveloper Tools. Spart die mühervolle Handarbeit: http://www.chrispederick.com/work/firefox/webdeveloper/
Hallo,
Wie überprüft ihr in Zweifelsfällen auf Windows die Box-Abmessungen?
Wie wärs mit einem kleinen JavaScript, welches die Maus-Koordinaten in der Statuszeile anzeigt ? Oder sich vielleicht beim Left-Click die Koordinaten merkt und beim Right-Click die Differenz ausrechnet und in der Statuszeile ausgibt...
Kochrezept hier http://selfhtml.teamone.de/javascript/objekte/anzeige/event_x_y.htm
CU Christoph