CSS Tutorial: Photo Stream

Ein Photo Stream

Ein CSS Tutorial, also. Wir wollen ein Photo Stream mit horizontale Scrollleisten (mit 3 ‘l’!) erstellen; ihr könnt das Endergebnis hier begutachten:

Demo →

(Nicht im Quellcode spicken )

Wenn ihr mal den Photo Stream auf der Demo Seite angeschaut habt, habe ich eine ganz einfache Frage: Was ist eigentlich ein Photo Stream? Ist es eine Überschrift, ein Paragraph, eine Aufteilung, oder was?

Die Musterantwort lautet: Ein Photo Stream ist eine ungeordnete Liste mit Bilder drauf, der eventuell verlinkt ist. Und deshalb lautet das Markup wie folgt:

<!-- xHTML -->
<ul class="photostream">
    <li><img src="photo1.jpg" alt="Foto 1" /></li>
    <li><img src="photo2.jpg" alt="Foto 2" /></li>
    <li><img src="photo3.jpg" alt="Foto 3" /></li>
    <li><img src="photo4.jpg" alt="Foto 4" /></li>

    <!-- usw... -->
</ul>

Die ungeordnete Liste (<ul>) mit Bildern (<img />). Soweit so gut. Doch wie stellen wir es an, dass die einzelnen Punkte nebeneinander statt untereinander befinden? Ganz einfach: Mit CSS.

/* CSS */
ul.photostream {
    overflow: auto;          /*!*/

    /* Zur Verschönerung */
    background: black;
    padding: 1em;
}

ul.photostream li {
    display: inline;         /*!*/
    margin-right: 5px;
}

display: inline; zwingt die <li> Elemente sich wie Inline Objekte zu verhalten: Inline Elemente sind genauso breit, wie deren Inhalt und stehen – natürlich – nebeneinander.

overflow: auto; sorgt dafür, dass horizontale Scrollleisten entstehen, wenn seine Kindelemente aus dem Elternelement rausfließen.

Das Zwischenergebnis

Aber was ist das? Die Kindelemente fließen gar nicht aus ihrem Elternelement raus! Sie brechen am Ende immer ab! Das müssen wir verhindern, nämlich mit white-space: nowrap;.

/* CSS */
ul.photostream {
    overflow: auto;
    white-space: nowrap;  /*!*/

    /* Zur Verschönerung */
    background: black;
    padding: 1em;
}

ul.photostream li {
    display: inline;
    margin-right: 5px;
}

Fertig ist unsere Photo Stream !

Der Internet Explorer

Naja. Fast fertig. IE 6- zeigt leider keine Scrollleisten an, wenn das Element keine bestimmte Breite hat. Fügen wir dem ul.photostream eine Breite von 80%. Dem IE zuliebe:

/* CSS */
ul.photostream {
    overflow: auto;
    white-space: nowrap;

    /* Für Internet Explorer 6- */
    width: 80% !important;          /*!*/
    width: auto;                    /*!*/

    /* Zur Verschönerung */
    background: black;
    padding: 1em;
}

ul.photostream li {
    display: inline;
    margin-right: 5px;
}

Aber der Internet Explorer zeigt noch vertikale Scrollleisten an! Nun, da bin ich auch mit meinem Latein zu Ende. Aber wer benutzt schon IE? Wer benutzt IE? Niemand benutzt IE! **gg*

Der IE zeigt Dinge natürlich wieder drunter und drüber an

lab111