Schlagwort-Archiv: css

CSS for Dummies

Irgendwie erinnert mich das Umstellen von HTML-Table auf CSS-Column immer an den Spruch: Vom Regen in die Traufe. Nichtsdestomaso habe ich mir den Schritt für meine Homepage (diesmal wirklich die, die ich zu Hause lokal benutze) ein weiteres Mal angetan. Nicht weil ich mich an Grabenkämpfen und Endlosdiskussionen beteiligen will, sonder weil der Firefox die Tabellen so verdammt langsam rendert. Sei es wie es sei, das ist dabei rausgekommen:

homepage

Ja, ich weiß, jeder Webdesigner würde sich jetzt still in die Ecke stellen und sich schämen, aber ich kann halt nur 3-Spalten-Standard und Bauklötzchenlayout. :yes: Und eigentlich will ich auch nur wissen, wie ich es hinbekomme, daß die Überschriften nicht waagerecht, sondern links senkrecht, um 90º gegen den Uhrzeigersinn gedreht erscheinen. Selbst Powerpoint kann sowas. Aktuell benutze ich dl-, dt- und dd-tags für die Kästchen, bin aber auch bereit, auf was komplett anderes umzustellen. Außer auf Tabellen, klar.

Die FAQ geben hier nur mäßig Auskunft, und irgendwie habe ich das Gefühl, das es nicht geht. Funktionieren muß es nur im IE8, dem Firefox 3.0.9 und optional in der Safari 4 Beta. Vielen Dank im Voraus für alle Tipps…

IE Developer Toolbar

Edel sei das Tool, hilfreich und gut… ❗ Das scheint das Motto der Entwickler der IE Developer Toolbar gewesen zu sein. Lange war ich von keinem Stück Software mehr so begeistert. Thomas hattes es mir für mein aktuelles Problem mit der CSS Layout Übersicht empfohlen. Vielen Dank an dieser Stelle! Und sieht’s dann aus:

iedtb

Die Installation des MSI-Package ist denkbar einfach. Zumindest im IE7 sollte für das microsofteigene Tool allerdings „Enable third-party browser extensions“ an sein. Danach einfach den Button in der Toolbar aktivieren und los gehts! Die Website wird lokal gecached und analysiert. Dann kann man anfangen, die Welten von HTML und CSS zu erkunden.

Hier nur ein paar Features, die mir beim ersten Stöbern aufgefallen sind: Man kann sich verschiedene Grids einblenden lassen, zum Beispiel unsichtbare Tabellen und Divider. Man kann Elemente suchen, indem man auf sie klickt. Danach kann man dessen CSS- und HTML-Elemente live bearbeiten und die Auswirkung seiner Programmierfehler direkt in der Vorschau sehen. Es gibt ein Anzeigefenster für die Cascade, durch die das Element geprägt wurde. Alle Eigenschaften der Bilder können eingeblendet werden, inklusiver einer Darstellung nur mit ALT-Tags. Und wahrscheinlich gibt’s noch Tausend andere, coole Sachen, die ich am ersten Tag gar nicht entdeckt habe.

Und nein, das ganze CSS meines Blogs habe ich auch jetzt noch nicht begriffen. Sind an den dicken Balken die margin eines inneren Divders schuld, oder das padding eines äußeren? Und wie schreibe ich das Element im CSS: mit Punkt, Hash oder ganz anders? Oder ist es ein Subelement einer Region? Dafür habe ich jetzt aber zumindest ein Tool, mit dem ich mich ans Debuggen machen kann.

Im IE8 soll das ganze dann von Hause aus drin sein, aber den mag ich noch nicht testen. Derweil lese ich lieber noch die Artikel in Wikipedia und Code Project. und erfreue mich daran, Trackbacks auf meine eigenen Artikel zu setzen.

Updatemarker

Mal ein kleiner Versuchsaufbau für kaiserfive, wie man Linien um das Wort Update herum bekommt:

Update – Update – Update – Update

Okay, wild gehackt: einfach ein div mit folgenden Styles:


border-top: 1px solid maroon;
border-bottom: 1px solid maroon;
padding-top:1em;
padding-bottom:1em;
text-align:center;
font-size:125%;
font-weight:700;

Das ganze kannst Du Dir auch im CSS direkt ablegen und sozusagen eine class Update erschaffen. Für die absolute Zahlenangabe beim Schriftgewicht kannst Du im CSS wahrscheinlich sogar die Bezeichner nehmen, bei meiner Inline-Angabe hat der Editor versucht, aus dem Doppelpunkt und dem nachfolgendem ‚b‘ ein Smiley zu machen. Und Du mußt mal schaun, wieviele Inkarnationen des Worts „Update“ in Dein Layout passen.

Oder Du läßt die Linien halt weg. 🙂