Text ums Bild / Ich schaffe es nicht :-(

Welche Klasse du benutzt ist egal, solange du diese Klasse im Stylesheet mit einem »float« versiehst. Beispiel:

.imgLeft {
    float: left;
    margin: 0 10px 10px 0;
}
.imgRight {
    float: right;
    margin: 0 0 10px 10px;
}

Im Editor muß das IMG-Element dann so aussehen:

<img src="Adresse des Bildes" alt="Alternativtext" class="imgLeft" />

Wenn dir da etwas weggekürzt wird, ist das vielleicht ein unwillkommener Nebeneffekt eines Plugins – also schalte die mal nach und nach ab, bis du den Übeltäter gefunden hast.

Gruß
Thomas

.alignright gilt für alle Elemente, die class="alignright" dastehen haben, img.alignright nur für Bilder der Klasse "alignright".

Schön, daß es funktioniert.

Klassen werden in CSS immer mit einem Punkt vor den Klassennamen angesprochen. Aber man kann einen Klassenselektor mit einem Elementselektor verbinden, indem man beide zusammenschreibt und den Elementselektor davorsetzt.
Übersetzt bedeutet das: ».alignright« betrifft alle Elemente mit der Klasse »alignright«, also auch <p class="alignright">.
»img.alignright« betrifft aber nur Bilder mit dieser Klasse, keine anderen Elemente. Man sagt auch: Dieser Selektor ist »spezifischer«, bzw. er hat eine höhere Spezifizität.

In diesem Fall schlage ich dir übrigens vor, für den Abstand nach unten (die 2px) etwas mehr Platz zu schaffen, damit folgender Text nicht allzusehr am Bild klebt. Gerade bei umfließendem Text fällt es dem Auge etwas schwerer, die richtige Zeile zu finden; da ist das Gestaltungselement Leerraum umso wichtiger.

Gruß
Thomas

Padding ist der Innenabstand, Margin der Außenabstand. Beim <img> ist nur margin interessant, da es kein "Innen" in dem Sinne gibt.

Grüße
Mo

Zitat von Morris

Beim <img> ist nur margin interessant, da es kein "Innen" in dem Sinne gibt.

Nur am Rande...

Natürlich gibt es ein padding bei Bildern. Wenn Du z.B. um das Bild einen Rahmen legen und zwischen Rahmen und Bild Platz lassen willst.

Siehe auch: CSS Box Modell. Content -> Padding -> Border -> Margin.

Bildunterschrift

Klingt gut! Wie würde man bei dem Hack Bildunterschriften einbinden, die unmittelbar mit dem Pic verbunden sind?

Wo tragt Ihr die Styles ein? Ich habe es probeweise bei Blix und Sirius in der jeweiligen CSS-Datei eingetragen - KEINE Wirkung (s. meine Anfrage weiter unten).

Als ob die CSS-Datei eine andere, als die vorhandene sei... :(

Kann jemand einen Tipp geben?

Zitat von Wu_kung

Klingt gut! Wie würde man bei dem Hack Bildunterschriften einbinden, die unmittelbar mit dem Pic verbunden sind?

Als Datenliste.

HTML-Part:

<dl class="bild-mit-text">
<dt><img src="blubb.jpg" alt="bla" /></dt>
<dd>Ich bin ein Text. Ein kurzer Text.</dd>
</dl>

CSS-Part:

.bild-mit-text {
float: left;
margin: 0 10px 10px 0;
}

.bild-mit-text dt, dd {
margin: 0;
padding: 0;
}

Hat den Vorteil, daß für das Bild und den Text noch verschiedene Definitionen seperat erfolgen können, z.B.:

.bild-mit-text img {
border: 1px solid #F00;
}

.bild-mit-text dd {
font-style: italic;
}