Neues Design
27.06.2006
Ich habe das Design der Seite umgestellt. Dabei habe ich versucht, soweit wie möglich auf <div> - Tags zu verzichten. Gestört haben mich auch die Conditional Comments. Bisher benötige ich Sie noch nicht. Mal sehen wie lange ich darauf verzichten kann.
Die Breitenangaben und Schriftgrößen sind relativ mittels % und em definiert. Durch die Umstrukturierung des CSS, ist die Dateigröße beachtlich geschrumpft. Dafür setze ich jeweils zwei css-Dateien pro Seite ein.
Auf jeder Seite befindet sich nun konkurenzlos ein <h1> Tag. Die nachfolgende Struktur wird mittels <h2> und <h3> Tags gegliedert. Ein vorsichtiger, erster Versuch in Richtung Semantik.
An dieser Stelle möchte ich ein bisschen Werbung für CSS3 machen. Besucher mit modernen Browser können den Effekt schon sehen. Mit Hilfe der Eigenschaft -moz-column-count: 2 wird der Text zweispaltig angezeigt. Sehr praktisch vor allem bei längeren Artikeln. Die ausführliche Erklärung des Hover Effekt bei diesem Paragraphen folgt noch, oder ihr schaut euch den Code an ;).
Sucht in der css datei nach
#Firefox-love.
Ist eigentlich nix dabei. Die Pseudo-Klasse :hover kann auf jedes Element angewendet werden. Einige Browser unterstützen das noch nicht. Der Firefox, aktuelle Version 1.5 unterstützt das bereits. Aber auch Opera ab Version 7+, Netscape 6+, Mozilla 1+, Firefox 0.8+, Safari 1.0+ und Konqueror 3.3+. Der Internet Explorer 6 kann das noch nicht. Und der Internet Explorer 7 ist erst beta, also abwarten...
Ich habe bei der Umsetzung der Seite auf Standards geachtet. Soweit ich beurteilen kann erfüllt die Seite die Anforderungen xhtml1.0 Strict und CSS valid. Hauptsächlich beim CSS hatte ich einige harte Nüsse zu knacken. Aber es wird schon noch... Die aktuelle CSS-Datei Größe übersteigt momentan nicht 3KB. Meistens sind es eins bis zwei.
Falls euch etwas auffällt oder Verbesserungsvorschläge habt, schreibt mir bitte eine E-Mail.
Das css für den oberen Artikel. Leider ist das ganze nicht CSS valid. Siehe Warnung!
#Firefox-love{
margin:20px;
padding:20px;
-moz-column-count: 2;
-moz-column-gap: 20px;
}
#Firefox-love:hover {padding:10px;
margin:9px 9px 14px 9px;
border: 1px dashed #efefef;
background:#f5f5f5;
-moz-border-radius: 10px;
}
#Firefox-love:hover img{
border:1px dotted #BDAA5E;
background:#ffffff;
-moz-border-radius: 9px;
}
/** spielereien mit bold, strong, abbr und a **/
#Firefox-love:hover abbr{color:#ff7f00;font-weight:bold;}
#Firefox-love:hover strong{color:#F1C40E;}
#Firefox-love:hover b{color:#BDAA5E;}
#Firefox-love:hover a b{color:#4089AC;border-bottom:1px dashed #afafaf;}
#Firefox-love:hover a:hover b{color:#66B05C;
}
Warnung: Diese Eigenschaften gehören nicht zum offiziellen Standard des W3C, sondern sind in Anlehnung an die kommenden CSS-3-Eigenschaften von den Mozilla-Entwicklern eingeführt worden. Du kannst sie jederzeit einsetzen, musst aber damit rechnen, dass sie durch die CSS-3-Eigenschaften ausgetauscht werden, sobald diese offiziell verabschiedet sind. Quelle (www.css4you.de)
Jetzt noch das HTML
<p id="Firefox-love"> [ mein Text ] </p>
Das wars. Das margin und padding habe ich lediglich mit Firefox 1.5 getestet.