[GastForen Archiv Adobe GoLive Textabstand zum Bild bei "umfließen"

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Archiv - Archivierte Foren
Themen
Beiträge
Moderatoren
Letzter Beitrag

Textabstand zum Bild bei "umfließen"

Jürgen
Beiträge gesamt: 252

17. Aug 2004, 08:35
Beitrag # 1 von 10
Bewertung:
(2623 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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
X

Textabstand zum Bild bei "umfließen"

Dirk Levy
  
Beiträge gesamt: 9433

17. Aug 2004, 08:44
Beitrag # 2 von 10
Beitrag ID: #103434
Bewertung:
(2623 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Versuche es doch mal per CSS....

Gruß
Dirk

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


als Antwort auf: [#103430]

Textabstand zum Bild bei "umfließen"

SabineP
Beiträge gesamt: 7586

17. Aug 2004, 08:54
Beitrag # 3 von 10
Beitrag ID: #103436
Bewertung:
(2623 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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


als Antwort auf: [#103430]

Textabstand zum Bild bei "umfließen"

Jürgen
Beiträge gesamt: 252

17. Aug 2004, 10:04
Beitrag # 4 von 10
Beitrag ID: #103451
Bewertung:
(2623 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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


als Antwort auf: [#103430]

Textabstand zum Bild bei "umfließen"

SabineP
Beiträge gesamt: 7586

17. Aug 2004, 10:19
Beitrag # 5 von 10
Beitrag ID: #103454
Bewertung:
(2623 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Jürgen,

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

Gruß Sabine


als Antwort auf: [#103430]

Textabstand zum Bild bei "umfließen"

Jürgen
Beiträge gesamt: 252

17. Aug 2004, 13:02
Beitrag # 6 von 10
Beitrag ID: #103531
Bewertung:
(2623 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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


als Antwort auf: [#103430]

Textabstand zum Bild bei "umfließen"

SabineP
Beiträge gesamt: 7586

17. Aug 2004, 13:53
Beitrag # 7 von 10
Beitrag ID: #103544
Bewertung:
(2623 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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


als Antwort auf: [#103430]
(Dieser Beitrag wurde von SabineP am 17. Aug 2004, 14:31 geändert)

Textabstand zum Bild bei "umfließen"

Jürgen
Beiträge gesamt: 252

18. Aug 2004, 08:41
Beitrag # 8 von 10
Beitrag ID: #103676
Bewertung:
(2623 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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


als Antwort auf: [#103430]

Textabstand zum Bild bei "umfließen"

SabineP
Beiträge gesamt: 7586

18. Aug 2004, 09:13
Beitrag # 9 von 10
Beitrag ID: #103677
Bewertung:
(2623 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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


als Antwort auf: [#103430]
(Dieser Beitrag wurde von SabineP am 18. Aug 2004, 09:17 geändert)

Textabstand zum Bild bei "umfließen"

Jürgen
Beiträge gesamt: 252

18. Aug 2004, 10:00
Beitrag # 10 von 10
Beitrag ID: #103694
Bewertung:
(2623 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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


als Antwort auf: [#103430]
X

Aktuell

PDF / Print
300_PDF20

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
01.12.2022

Online
Donnerstag, 01. Dez. 2022, 10.00 - 10.45 Uhr

Webinar

Die drei ColorLogic-Programme ZePrA, CoPrA und ColorAnt sind in neuen Versionen mit vielen neuen Funktionen im Jahr 2022 veröffentlich worden oder werden in Kürze veröffentlicht (ColorAnt 9). In unserem ca. 45 minütigen kostenlosen Webinar zeigen wir Ihnen einige dieser neuen Funktionen mit dem Schwerpunkt auf Automatisierung und Produktivitätssteigerungen.

Ja

Organisator: Impressed GmbH

Kontaktinformation: Silvia Noack, E-Mailsnoack AT impressed DOT de

https://www.impressed.de/schulung.php?c=sDetail&sid=311

ColorLogic Update-Webinar ZePrA 10, CoPrA 9 und ColorAnt 9
Veranstaltungen
02.02.2023

Prozesse optimieren und effizient gestalten

Zürich
Donnerstag, 02. Feb. 2023, 08.00 - 10.00 Uhr

Digitalisierung, Webauftritt

Digitalisierung mitgestalten - Worauf kommt es an? Wie wichtig ist die Webseite? Webseite mit Word Press? Interne Prozesse optimieren

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: Birol Isik, E-Mailinfo AT bkcc DOT ch

https://digitalisierung-heute.ch/digitalisierung-informationstag-schweiz/