Bilder einfügen

Forentrio

Bilder und Grafiken lockern die Homepage auf und "sagen mehr als tausend Worte". Deshalb wollen wir den vielen Text im Content durch ein Bild etwas ansprechender gestalten. Verwenden wir dazu unser passendes "Gruppenbild" vom ersten Forentreff, der bei Friedel am 28.04.2007 stattgefunden hat.

Kopiert euch dieses Bild und speichert es im gleichen Ordner ab in dem sich eure "index.html" befindet. Natürlich könnt ihr auch passend zu eurem Text ein anderes Bild verwenden.

Wie man Grafiken und Bilder in den HTML-Quelltext einfügt erfahrt ihr hier.

Unser Bild soll an dieser Stelle zwischen <p> und Aus so einer Position heraus eingefügt werden mit

An dieser Stelle haben wir dann folgenden Quelltext stehen:

<p>
<img src="forentrio.jpg" width="409" height="246" border="0" alt="Forentrio">
Aus so einer Position heraus

Das sieht nun zunächst recht unschön aus, denn neben dem Bild ist bis auf die letzte Zeile alles frei. Die Ursache ist, dass "img" ein Inline-Element ist und somit wie ein einzelnes Wort selbst im Textfluss steht.
Sinnvoll wäre es, wenn das Bild vom Text umflossen würde.
Versuchen wir es mit einem float: left; falls der Text rechts vom Bild stehen (bzw. fließen) soll.
Die float-Eigenschaft verwandelt Elemente automatisch zu Blockelementen.

Es gibt nun mehrere Möglichkeiten, wie man das per CSS regeln kann. Wir könnten z.B. speziell für das Bild eine eigene Klasse mit den erforderlichen Angaben hinterlegen. Aus der Vorüberlegung, dass das Bild später auch noch einen Untertitel erhalten soll und mehrere Bilder unterschiedliche Größen haben können, halte ich es in diesem Fall (ausnahmsweise) für sinnvoll, die Style-Angaben einmal nicht in der CSS-Datei zu hinterlegen, sondern direkt im Quelltext anzugeben. Ich hatte auf diese Möglichkeit bei den Styleangaben (ganz unten) hingewiesen. Ihr könnt dabei auch gleich sehen wie es möglich ist, Formatierungs-Angaben einmal außerhalb der CSS-Datei vorzunehmen. Allerdings soll das nicht zur Regel werden, sondern nur dann Anwendung finden, wenn mal eine einmalige Spezialangabe erforderlich wird.
Somit fügen wir den img-Tag in einen Div mit folgender Angabe:

Noch unschön ist, dass der Text zu sehr am Bild klebt. Wir können dies lösen, indem wir noch einen margin-right-Wert von 15px zuweisen.
Außerdem wollen wir gleich berücksichtigen, dass das Bild einen Untertext in Fettschrift haben soll.
Als Schriftgröße verwenden wir 0.8em.
Die "line-height" soll 1.2em betragen.
Damit dieser Text nicht über die Bildgröße herausragt müssen wir den Div auf die Bildbreite, in diesem Fall 409px begrenzen.
Schließlich gilt es zu beachten, dass unser Content-Text im Blocksatz formatiert ist. Für den Bilduntertext mag dies nicht gut aussehen, weshalb wir hier eine linksbündige Textausrichtung vorsehen wollen.
All diese Angaben weisen wir unserem Div wie folgt zu:

Fehlt jetzt nur noch ein passender Bild-Untertext. Hierzu schlage ich folgendes vor:

<div style="float: left; margin-right: 15px; font-weight: bold; font-size: 0.8em; line-height: 1.2em; width: 409px; text-align: left;">
<img src="forentrio.jpg" width="409" height="246" border="0" alt="Forentrio">
<br> Haben beim "Pfälzer Schoppen" den CSS-Kurs ausgeheckt: Adlerauge, sejuma und Friedel beim ersten Forentreff
</div>

Voilà unser Bild mit Textumfluss und Bildunterschrift:

Dies war nur eine Möglichkeit, wie man mittels CSS-Angaben Bilder "in Position" bringen kann. Das gleiche Ergebnis hätte man auch mit einer Tabelle oder einer Liste erzielen können.
Für unseren CSS-Einsteiger-Kurs wollen wir das Thema "Bilder und Grafiken" jedoch damit bewenden lassen.

Kommen wir nun zur "Menue-Formatierung".

Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: