michelb.de

… kann ich mich eigentlich nur anschließen. Lesebefehl: Webfonts – nun doch eine Meinung

Mitmachen: Umfrage: CSS-Hacks vs. Conditional Comments

Nach geschätzen 100 Jahren Layoutlosigkeit hat michelb.de nun endlich ein Layout. Nichts spektakuläres, aber schon mal besser als das davor, das ein Haufen nichts war. Jetzt habt ihr einen Haufen Nichts gepaart mit grünen Flächen und mehr Konsistenz. Ha!

Die ein oder andere Stelle (Kommentare, Archiv) ist noch nicht ganz fertig, aber das Grundgerüst steht. Sehr spartanisch, aber ich bin mir im Moment eh nicht so sicher, ob und wie ich das hier fortführe und falls Schluss ist, soll es nicht auch noch nach Ruine aussehen. Aber das ist Spekulation.

→ Weiterlesen: Neues Layout!

Runde Ecken kann man ja bald¹ entweder mit border-radius, multiplen Hintergrundbildern (Oldschool) oder waghalsigen CSS-Verzerrungen erstellen. Geht alles irgendwie.

¹ so ungefähr 10 Jahre nach Einführung des Internet Explorer 10

Ich saß heute am neuen Layout und wollte die Bilder, die in den Artikeln auftauchen, mittig ausrichten. Ausnahmen sind Bilder mit den Klassen .alignleft und .alignright.

Gut, dachte ich mir, versuchste es mal mit text-align: center; aber Pustekuchen. Nach ein wenig Recherche schien mir die einzig brauchbare Möglichkeit zu sein, den entsprechenden Bildern ein neues Elternelement zu verpassen, beispielsweise ein <div> oder ein <span> und dessen Inhalt (also auch das Bild) zentriert darzustellen. Da ich 1.) nicht in den Textpattern-Dateien rumwuseln wollte und 2.) das Extra-Markup nicht ins HTML gehört, hab ich mich für die JavaScript-Methode entschieden und dabei jQuery ausprobiert.

Meine Erfahrungen mit JavaScript (oder ECMAScript) sind seit jeher gering, da ich es bisher nicht gebraucht habe und ich immer an Icons die den Mauszeiger verfolgen und sonstige Spielereien denken musste, die ich schon immer fragwürdig hielt.

Der jQuery-Code, den ich dafür nutze, sieht folgendermaßen aus:

$(document).ready(function(){
  $(".entry-content img[class!=alignleft][class!=alignright]").wrap("<span class=\"imgbox\"></span>");
  });

Es macht nichts anderes als nach dem Laden des Dokuments allen Bildern, die in einem Element mit der Klasse .entry-content enthalten sind, ein <span>-Element mit der Klasse .imgbox drumherum zu verpassen. Eine Ausnahme bilden wie schon gesagt Bilder mit den den Klassen .alignright/left, die bekommen kein <span>.
(.entry-content stammt übrigens aus dem hAtom-Mikroformat, über das ich schon mal geschrieben habe.)

In HTML übersetzt (vereinfacht:

<img src="bildname.jpg" />

wird zu

<span class="imgbox"><img src="bildname.jpg" /></a>

Das CSS sieht so aus:

.imgbox {
 text-align: center;
 display: block;	
}

.entry-content img {
 border: 1px solid #CACACA;
 background: #FFF;
 padding: 5px 5px 5px 5px;
 text-align: center;
}

Das <span>-Element wird zu einem Block-Element und bekommt dadurch die komplette Breite des .entry-content. Mittels text-align: center; wird jeglicher Inhalt in dieser Box zentriert, so auch das enthaltende Bild. Dieses besitzt noch die ganzen anderen Standard-Formatierungen erhält wie einen Rahmen, Hintergrundfarbe und einen Innenabstand. Und so sieht das dann aus:

Der IE6 hat ein Problem mit display: block;-Links in absolut positionierten (Listen-)Elementen. Wenn man dem Link keinen Hintergrund zuweist, ist der Link zwar da, kann aber nicht per Drüberfahren erkannt und demnach auch nicht angeklickt werden. Tabbt man sich durchs Dokument, landet man auch beim Link, aber anvisieren mit dem Mauszeiger? No go.

Auch eine Höhen- und Breitenangabe half nicht, einzig und allein ein background: url(leer.gif); half, um den Dämon auszutreiben.

Wieso man Links überhaupt mal absolut positioniert? Nun ja, damit kann man ganz nett eine Imagemap zusammenschustern, das @map@-Element mochte ich noch nie, auch wenn es in XHTML 1 noch existiert.

Ab dem 1. Dezember ist es wieder soweit: Jeden Tag bis Heilig Abend kann ein Webdesign- und Webentwicklungstürchen bei den Webkrauts geöffnet werden.

Diesmal haben wir uns gedacht, kürzere Beiträge als letztes Jahr zu veröffentlichen und die inhaltlich variabler zu werden. So wird erstmals ein Gedicht zu lesen sein, wir kümmern uns um Wireframes, Flash-Implementierung, Schriften oder Entwurfsarbeiten. Jens Grochtdreis

Das verspricht doch eine nette Vorweihnachtszeit ;)

Die Grafik stammt von Manuela Hoffmann.

Ach ja, auch 24 ways wird wieder dabei sein.

Eben in einer der CSS-Gruppen von StudiVZ gefunden:

[…] Was ist bitte schön der Unterschied zwischen P und Div? Ich kann natürlich auch ein DIV so modifizieren, dass es als Zeilenumbruch durchgeht. Geht alles..klar. aber wozu tausend verschiedene tags benutzen? Das macht den HTML-Kode zu einem Chaos. am besten wäre es glatt alle/abgesehen von a,img,table*, body etc. HTML-tags komplett abzuschaffen und nur noch Div-Tags und CSS zu nutzen.

Nur noch Links, Bilder und Tabellen benutzen und dafür auf Überschriften, Listen, Zitate, Absätze, Bereiche, Hervorhebungen, Codes, Beispiele, Formulare und vieles mehr verzichten? Viel Spaß dabei ;)

Ähnlich kurioses liefert CSS Forum Tragedies von Jens Meiert.

Ach ja, ich bin jetzt ein Webkraut, auch wenn ich gerade nich sooo die Zeit dafür hab. Webstandards gehören weitergetragen.

Wie sich das Internet seit 1999 veränderte – aus meiner persönlichen Sicht. Und ein Seitenhieb auf den Informatik-Unterricht ;)

→ Weiterlesen: Das Internet heute und damals - aus persönlicher Sicht