Strohhalm

Sprung zu Navigation. Sprung zu Privat. Sprung zu StyleSwitcher. Sprung zum Inhalt.

 

Sprung zu Navigation. Sprung zu Privat. Sprung zu StyleSwitcher. Sprung zum Inhalt.

Privat

 

Anmelde-Formular



Als Strohhalm-Mitglied registrieren.

 

Sprung zu Navigation. Sprung zu Privat. Sprung zu StyleSwitcher. Sprung zum Inhalt.

Sprung zu Navigation. Sprung zu Privat. Sprung zu StyleSwitcher. Sprung zum Inhalt.

Magazin

 

strohhalm.org / Magazin / (X)HTML + CSS / CSS-Tricks / Foto-Strecke mit CSS

Foto-Strecke mit CSS

wurstbrot. Nachricht an wurstbrot.+1 -0.31. August 2005, 12:35

Inzwischen gibt es im Internet viele Bild-Archive. Viele haben eines gemeinsam: sie arbeiten mit Tabellen, dabei kann man auch mit CSS einfache Bild-Archive aufbauen.

In diesem Artikel möchte ich deshalb beschreiben, wie ein Film-Streifen in der Form einer Film-Rolle mit einfachen CSS-Tricks realisiert werden kann. Diese Bilder sollen alle nebeneinander angeordnet sein. Dies ist leider gar nicht so einfach, wie man sich denken mag. Jedoch erst zum HTML:

<div> <img src="bild1.JPG" alt="sinnvolle Beschreibung 1" />
<img src="bild2.JPG" alt="sinnvolle Beschreibung 2" />
<img src="bild3.JPG" alt="sinnvolle Beschreibung 3" />

<img src="bild3.JPG" alt="</code><code>sinnvolle Beschreibung 1" />
</div>

Wie diesem Beispiel zu entnehmen ist, legt man einfach die Bilder in den entsprechenden HTML-Tag und umschließt diese Beispielsweise in einem "div". Dieses formatiert man nun mittels CSS:

<div style="width: 200px; overflow: auto;">

Unser "div"-Tag wird also 200 Pixel breit und soll automatisch mit Scroll-Leisten versehen werden. Doch dies reicht nicht, um den Zeilenumbruch zu verhindern. Hierzu benötigen wir noch den zusätzlichen CSS-Ausdruck:

white-space:nowrap;

Dieser weist die Browser an, keinen Zeilenumbruch durchzuführen.

Und so könnte es aussehen

Halmi Einteiger Halmi Flash Halmi Grafik Halmi Showroom Halmi Wissenschaft

von externer LinkMathias Bank [http://www.thunder-2000.com].

Diskutieren Sie mit:

 
Nach oben springen

.(c) 2002 - 2017 strohhalm.org Community.Server powered by Manitu.Software powered by Mathias Bank
.Impressum + Team.Datenschutz