5202

ein Blog über technische Fragen zu Blogger

Blogger: Drei Bilder nebeneinander, Teil 12

von

In der unendlichen Geschichte drei-Bilder-nebeneinander in einem blogspot.com Blog heute mal eine exotische Idee. Warum nicht Pseudoelemente dafür nehmen? Wenn ihr euch tiefer mit Pseudoelemente beschäftigt werdet ihr sehen, dass sie für sehr viele Sache sehr nützlich sind, weil ihr mit wenig Aufwand zu schnellen Ergebnissen kommt.

Demo

Markup

Das ganz Markup besteht aus drei A-Elementen und einem Wrapper, der drumrum gewickelt wird.
<div class="wrapper">
  <a class="a1" href=""></a>
  <a class="a2" href=""></a>
  <a class="a3" href=""></a>
</div>
Nicht besonders kompliziert, oder? Vor allem sind A-Elemente Inline Elemente, d.h ihr müsst nichts floaten und clearen, die Elemente richten sich automatisch horizontal aus.
CSS
Und jetzt noch die CSS.
.wrapper {text-align:center;}
.wrapper a.a1::after {content:url("http://goo.gl/dFzBA")}
.wrapper a.a2::after {content:url("http://goo.gl/LC3DE")}
.wrapper a.a3::after {content:url("http://goo.gl/bFVam")}
Yeah, das ist alles. Der Wrapper zentriert die Bilder und jedes Bild bekommt ein Pseudoelement zugeordnet, fertig! Viel einfacher geht es nicht.

Anmerkung

Es gibt ein Problem: Das funktioniert innerhalb von blogspot.com Blogs nicht mit dem Internet Explorer. Der Internet Explorer ab Version 8 kann mit Pseudoelementen theoretisch umgehen, schafft das aber nicht in den normalen Layouts ... es funktioniert mit allen Browsern und wäre eine clevere Alternative, aber (wie üblich) scheitert eine gute Idee am ®†©©√ªª IE ...