Wer saß nicht schon einmal vor dem Problem, in seine Netzseite ein Bild einbauen zu wollen, dass zentriert dargestellt werden soll? Früher (als CSS noch nicht so intensiv angewendet wurde) hat man dies normalerweise mit align=“center“ oder dem Tag <center>…</center> erledigt. Dummerweise sind diese Methoden als „deprecated“ eingestuft. Wer also mit HTML-Strict arbeiten will, kommt um CSS nicht herum.

Beim Stöbern im Netz bin ich auf folgende einfache Möglichkeit gestoßen. Man muss dem img-Tag nur folgende Werte zuweisen:

img { display: block ; margin: 0 auto }

Der Wert block macht aus dem img-Tag einen eigenen (absatzerzeugenden) Block. Man braucht also kein umschließendes div– oder p-Tag. Die Zuweisung des Wertes auto für den linken und äußeren Abstandes sorgt dafür, dass man dem Browser nichts anderes mitteilt, als dass linker und rechter Abstand gleich sein sollen. Dies ist gleichbedeutend mit einer Zentrierung des Elements. Einfach, oder?

Während der Arbeit an meiner eigentlichen Heimatseite war ich auf der Suche nach einer optisch ansprechenden Sitemap (ich bevorzuge ja den Begriff Seitenstruktur, allerdings kann heutzutage kaum noch jemand etwas mit solch deutschen Begriffen anfangen ;)). Der Netzseite liegt das CMS TYPOlight zugrunde, das von Haus aus bereits ein Sitemap-Modul mitliefert. Allerdings wird die Seitenstruktur hier nur in Form einer nicht geordneten Liste wiedergegeben. Sicherlich reicht dies für einen groben Überblick, allerdings bevorzuge ich eine intuitivere Darstellung, in der die Seiten auf gleicher Ebene optisch deutlicher hervorgehoben werden.

Mir haben schon immer Seitenstrukturdarstellungen gefallen, die in einer Art Organigramm dargestellt waren. Auf meiner alten Netzseite hatte ich dies dadurch erreicht, dass ich in PowerPoint ein Organigramm mit der Seitenstruktur erzeugt, als Bild exportiert und in die Netzseite als Image-Map eingebunden hatte, sodass die einzelnen Seiten auch auf dem Organigramm verknüpft waren. Wie aufwendig, ich weiß. „Optisch ansprechende Sitemaps mit SlickMap CSS“ weiterlesen →