CSS Syntax kleine Einführung Teil 3

In diesem Post kommen wir nun zum sogenannten Floaten! Dies ist eine Nicht-Übersetzung des englischen Worts float, was so viel heißt wie fluten. Gemeint sind das Fluten von Bildern oder Bereiche der Seiten über den Bildschirm.

Floaten

Machen wir wieder ein kleines Beispiel. Wir haben 2 Bilder und wollen diese nebeneinander auf der Seite platzieren.

„Dafür brauchen wir eine Tabelle“  sagt der HTML’ler! Also:

<table width=“50%“>

<tr>
<td><img src=“bild1.png“ align=“center“></td>
<td><img src=“bild2.png“ align=“center“></td>
</tr>
</table>

Ja so geht es! Aber:

Was wäre, wenn das Coding folgendermaßen aussieht?

<div><img style=“height:100px; width:100px;“ src=“../images/Bild1.png“  /></div>
<div><img  style=“height:100px; width:100px;“ src=“../images/Bild2.jpg“ /></div>

dann stellt der Browser die Bilder untereinander dar, siehe Beispiel.

Das hilft uns irgendwie nicht weiter.

Im CSS gibt es aber die Anweisung „float:left oder fload:right“, damit können wir die Bilder auf eine „Zeile“ stellen.

<div style=“float:left;“>

<img style=“height:100px; width:100px;“ src=“../images/Bild1.png“  />

</div>

<div style=“float:left;“>

<img  style=“height:100px; width:100px;“ src=“../images/Bild2.jpg“ />

</div>

vgl. Beispiel.

Jetzt stehen die Bilder auf einer Zeile. Genau das befähigt uns später für unser Menü die Menüpunkte auf eine Zeile zu stellen.

Normalerweise floaten auf der Seite alle Bereichselemente. Sie werden vom Browser soweit links und soweit oben wie möglich angeordnet. Das bedeutet, dass der Browser neue Elemente immer rechts anfügt bis kein Platz mehr da ist, erst dann kommt eine neue „Zeile“.

Diesen Fluss kann man mit der CSS-Anweisung float beeinflussen, und das haben wir oben gemacht.

Die hier gezeigten Darstellungen des HTML-Codes mit dem style-Attribut sind hier natürlich sehr unübersichtlich, doch wenn Sie die Anweisungen in eine Style-Sheet-Datei stellen, nun für die div-Tags nur class oder id verwenden, wird die Darstellung übersichtlicher.

Ein float bleibt solange erhalten bis Sie ihn mit einer eigenen CSS-Anweisung außer Kraft setzen. Diese Anweisung ist die clear:left, clear:right oder clear:both. Ab dann werden die Elemente der Seite wieder nach der oben beschriebenen Standardanordnung gezeigt.

Deshalb hat fast jedes CSS-Sheet eine Regel wie

.clearing { clear: both; }

als Klassendefinition.

Mit einer einfachen Anweiung in unserem Script wie

<div class=“clearing“>&nbsp;</div>

setzt man das floating außer Kraft.

Hintergrundbild

Sie haben sicherlich schon Seiten gesehen, die ein Hintergrundbild hatten. Um diese Hintergrundbilder soll es in diesem Abschnit gehen. Sie können mit CSS ja nicht nur auf Klassen oder Id-Variablen Regeln erstellen, sondern Sie können auch direkt für fast alle HTML-Tags Regeln erstellen.

So können Sie mit einer CSS-Regel leicht auf den Tag <body> eine Farbregel für den Hintergrund festlegen:

body { background-color:yellow }

Nun ist, wenn dieses Stylesheet eingebunden ist, der gesamte Body-Bereich mit der Farbe yellow versehen.

Was ist aber mit den Seiten, die z.B. ein Hintergrundlogo haben, das sich über den ganzen Bildschirm wiederholt?  Werden da die Bilder per HTML aneinander gelegt?

In CSS können Sie neben der Hintergrundfarbe auch ein Hintergrundbild definieren und dieses sowohl in der Horizontalen wie in der Vertikalen wiederholen lassen.

Mit dem Coding (vgl. Beispiel )

<div style=“background-image: url(../images/Bild1.png);
background-repeat:repeat-x;float:left; width:400px;height:300px“ >
Hintergrundbild nur waagerecht wiederholen
</div>

können Sie Bilder als sich wiederholende Hintergrungbilder anordnen. Das Bild wiederholt sich in der Horizontale solange, wie es auf der Länge von 400 Pixeln wiederholt werden kann. Das kennen Sie bestimmt von Ihrem Hintergrundbild auf Ihrem Desktop, dort wird Ähnliches erzeugt.

Die Wiederholung kommt von der Angabe bei „background-repeat:repeat-x“. Das Bild muss in „background-image“ angegeben werden mit der Anweisung url(…).

Merken Sie sich: Die Anweisung reapeat-x meint die horizontale Wiederholung und repeat-y die vertikale Wiederholung. Die Anweisung für die url muß sich bei einer Stylesheet-Datei auf diese Datei beziehen nicht auf die HTML-Seite die Sie bearbeiten.

Natürlich brauchen wir zu dieser Ausgabe auch eine float-Angabe!

Falls das Bild „Löcher“ hat, d.h. an manchen Stellen durchsichtig ist, dann kann man zusätzlich mit „background-color“ den Hintergrung in der richtigen Farbe durchscheinen lassen.

Für was brauchen wir das alles?

Letztlich geht es um unser ominöses Menü das folgendes Aussehen haben soll:

Menü Beispiel

Sie sehen von oben als Einrahmung einen Farbverlauf. Die einzelnen Buttons der „Registerleiste“ haben runde Ecken und unterschiedliche Texte. Diese Texte werden durch die Seite eingestreut und gesetze. Aber die Außenränder und Innenbereiche der einzelen Registerbereiche setzen sich aus 2 Grafiken zusammen:

Einen rechten und einen linken Rand:

linker Rand

und einen rechten Rand

linker Rand

Diese Bilder werden als Hintergrundbilder in CSS angegeben und in der Länge variiert, so dass Sie den Text genau aufnehmen können.

Doch auf die Zusammensetzung dieser Bilder zum variablen, dynamischen Horizontalmenü will ich im nächsten Teil dieser kleinen Einführung kommen.

Viel Spaß beim Ausprobieren

Bernd Klüppelberg

Bisher gibt es keinen Kommentar. Schreiben Sie einen Kommentar!

Schreibe einen Kommentar