Ich hatte ja schon vor längerer Zeit über das Projekt „Slickmap CSS“ als schicke Möglichkeit, eine Seitenstruktur darzustellen, geschrieben und angekündigt, dies in einem weiteren Artikel zu beschreiben. Nun, here we go 😉 „Integration von SlickMap CSS in Contao“ weiterlesen
CSS
CSS-2.1-Regel @font-face im CMS Contao und Firefox
Immer mehr Browser interpretieren ja nun mittlerweile im Zuge des CSS-3-Hypes auch die @font-face-Regel, die allerdings bereits in der CSS-2.1-Spezifikation enthalten war. Mit Hilfe dieser Regel ist es möglich eigene Web-Schriftarten auf der Homepage darstellen zu können, ohne z.B. das Menü mit der gewünschten Schriftart als Grafik zusammenbasteln zu müssen. Nur leider unterstützten dies die gängigen Browser bisher kaum. Nur der Internet Explorer (ja wirklich!!) hat diese Regel bereits seit Version 5.5 unterstützt, allerdings nur das proprietäre EOT-Format. Truetype- und Opentype-Schriftarten bleiben bis heute außen vor. Mittlerweile können aber auch Firefox (ab Version 3.5), Safari (ab. 3.1), Opera (ab 10.5) und Chrome (ab 0.2) diese Regel, sodass man nun auf abwechslungsreichere Schriftbilder hoffen kann. „CSS-2.1-Regel @font-face im CMS Contao und Firefox“ weiterlesen
In TYPOlight aktive Akkordeon-Elemente gestalten
In TYPOlight ist ein nettes MooTools-Plugin integriert, mit dem man sich Inhaltselemente mit einem Akkordeon-Effekt darstellen lassen kann. Den einzelnen Akkordeon-Elementen kann man im TYPOlight-Backend Überschriften zuweisen, die auch bei geschlossenem Element angezeigt werden.
Ich stand nun vor dem Problem, dass ich dieser Überschriftleiste eine andere Hintergrundfarbe zuweisen wollte, wenn das betreffende Element geöffnet ist, sodass man gleich optisch erkennen kann, welchem Akkordeon-Element der angezeigte Inhalt zuzuordnen ist. „In TYPOlight aktive Akkordeon-Elemente gestalten“ weiterlesen
Bilder mit CSS horizontal zentrieren
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?
Optisch ansprechende Sitemaps mit SlickMap CSS
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