Hallo GoLiver,

ich habe eine Seite mit einer Reihe von kleinen Abbildungen. Ich möchte gerne, dass der Text mit einem Abstand vom Bild angezeigt wird, das Bild aber linksbündig mit dem Text erscheint. Wenn ich einen Abstand eingebe, bezieht sich das jedoch immer auch auf das Bild, welches dann auch auf der linken Seite eingerückt wird.

Siehe: http://www.elis-webdesign.de/...seiten/sichel03.html

Wie muß ich meine Eingaben ändern, damit das Bild linksbündig mit dem Text steht und der Text mit einem Abstand von vielleicht 10px rechts neben dem Text.

Vielleicht hat jemand von Euch einen Rat.

Vielen Dank

Jürgen

Versuche es doch mal per CSS....

Gruß
Dirk

[Adobe GoLive Tipps & Tricks]
http://www.gltipps.de

Hallo Jürgen,

dazu ein Beispiel.

Auschnitt aus dem Quellcode (eine Tabellenzelle mit Bild)


vorher:
<td valign="top">
<p class="zwischenüberschrift"><img src="../media/funk2.jpg" alt="" height="61" width="54" align="left" border="0" hspace="10">GSM Wählgerät</p>
<p class="fliesstext">Gewährleistet die Alarmübertragung
<br>auch bei Totalausfall der Festnetztelefonleitungen.
Betrieb über ein beliebiges Mobilfunknetz (Lieferung ohne Mobilfunkkarte)</p>
</td>

nachher:
<td valign="top">
<img src="../media/funk2.jpg" alt="" height="61" width="54" align="left" border="0">
<p class="zwischenüberschrift">GSM Wählgerät</p>
<p class="fliesstext">Gewährleistet die Alarmübertragung
<br>auch bei Totalausfall der Festnetztelefonleitungen.
Betrieb über ein beliebiges Mobilfunknetz (Lieferung ohne Mobilfunkkarte)</p>
</td>

Für die Klasse .zwischenüberschrift und .fliesstext zusätzlich
margin-left:10px
hinzufügen

Gruß Sabine

Hallo Sabine, hallo Dirk,

vielen Dank für Eure Tipps.

Zu Dirks Tipp: Selbstverständlich hatte ich es mit CSS probiert, aber leider nicht das Ergebnis erhalten, welches ich mir wünschte. Darum mein Hilferuf an die Experten im GoLive-Forum.

Zu Sabines Tipp: Ich habe nun "margin-left: 10px" eingegeben, mit dem Ergebnis, dass die Überschrift richtig angezeigt wird. Nur beim fliesstext stimmt etwas nicht. Es wird nur die erste Zeile eingerückt. Der restliche Text steht wieder direkt am Bild. Was kann ich noch tun?

Seltsamerweise zeigt mir die Layout-Ansicht in GoLive die Seite so, wie ich sie haben möchte. Nur die Browser IE und Mozilla zeigen es "falsch" an.

Die geänderte Seite steht zur Ansicht im Netz. http://www.elis-webdesign.de/...seiten/sichel03.html

Danke im voraus

Jürgen

Hallo Jürgen,

vergleiche Deinen HTML-Code mal mit dem HTML-Code den ich oben gepostet hatte (nachher: ...).

Gruß Sabine

Hallo Sabine,

habe Deinen Code 1:1 eingesetzt und dann nur noch meine CSS-Namen geändert. Das Ergebnis ist, dass das Bild nach oben rutscht und die Überschrift nicht oben bündig steht. Habe die Seite mit Deinem Code(Abbildung oben rechts) noch einmal ins Netz gestellt.

http://www.elis-webdesign.de/...seiten/sichel03.html

Weißt Du, wo der Fehler liegt?

Jürgen

Hallo Jürgen,

>> und die Überschrift nicht oben bündig steht.

Ja stimmt, die Browser verhalten sich verschieden, ich hatte nur mit IE4 getestet.

Schreib in die Klasse .zwischenüberschrift2 noch margin-top:0px;
Dann steht der Text oben.

Was mir gerade noch auffällt.
Klassennamen dürfen keine Umlaute enthalten.

Also sollte die KLasse nicht .zwischenüberschrift2 heißen sondern lieber .zwischenueberschrift2


Eine ganz andere Möglichkeit könnte so aussehen:

Das Bild bekommt die Klasse abstand
<img class="abstand" src="../media/funk2.jpg" alt="" height="61" width="54" align="left" border="0">

Abstand nach rechts und nach unten zum Text 10px
.abstand {margin-right:10px;margin-bottom:10px}

Grüße von Sabine

Hallo Sabine,

vielen Dank für Deine Geduld mit mir. Die Überschriften stehen nun so, wie sie sollen, mit Abstand zum Text, aber oben.

Die Style-Nasmen habe ich geändert. "Asche über mein Haupt", hätt ich wissen müssen.

Weißt Du jetzt auch noch einen Tipp, wie ich es erreichen kann, dass vom Fliesstext nicht nur die erste Zeile, sondern alle Zeilen, die neben dem Bild stehen eingezogen werden? So sieht das jetzt ein bisschen blöd aus, oder?

Die adresse noch mal: http://www.elis-webdesign.de/...seiten/sichel03.html

Vielen Dank im voraus

Jürgen

Hallo Jürgen,


<td valign="top">
<img class="fliesstext2" src="../media/funk2.jpg" alt="" height="61" width="54" align="left" border="0">
<p class="zwischenueberschrift2">GSM W&auml;hlger&auml;t</p>
<p class="fliesstext2">Gew&auml;hrleistet die Alarm&uuml;bertragung<br>
auch bei Totalausfall der Festnetztelefonleitungen. Betrieb &uuml;ber
ein beliebiges Mobilfunknetz (Lieferung ohne Mobilfunkkarte)</p>
</td>

Du verwendest immer wieder mehrere Klassen für ein Element.
<span> ist für Abstände ungeeignet, da es ein inline-Element ist.
Zum Anwenden von Abständen mit CSS (margin bzw. padding) immer nur <p> oder <div> verwenden, das sind Block-Elemente.

Gruß Sabine

Hallo Sabine,

jetzt hat es geklappt. Vielen Dank. Hatte zuerst nicht verstanden, dass ich für dasw Bild eine eigene Klasse erzeugen muß, in der ich die Abstände angeben kann.

Nochmal vielen Dank für Deine Hilfe und Deine Geduld

Jürgen