Text mit Bild (2.)

[LBH]

Hi nochmal,

Bei http://www.spezialradmesse.de/wcms/index.php?1-2-3-rad habe ich zwei CPs Text mit Bild untereinander (Option "Bild innerhalb des Textes links anordnen"). Wie kann ich verhindern, dass bei geringer Textmenge des ersten CPs der nachfolgende CP neben das Bild rutscht?

Grüße, Ludger

[flip-flop]

In der Regel das float auflösen mit clear: both;

[LBH]

Schon klar, aber wo bapp ich das am effektivsten hin, ohne dass ich jedesmal nach "Text mit Bild" ein clear:both einbauen muss?

L.

[juergen]

Ins Artikeltemplate ?

[LBH]

... wenn ich wüsste, wo der schlummert, hätt' ich's schon probiert.

[Jensensen]

ändere wie folgt:

<div style="overflow:hidden;">
<a id="jump26" name="jump26"/>
.....

sowie ergänzen:

<div style="margin: 0pt 0pt 20px; padding: 0pt; clear: left;" class="spaceAfterCP">

dann klappt es.


Tipp:
templates checken
CSS aufräumen --> organisieren

[LBH]

Wo denn? Welches div? Und wo finde ich dieses Artikel-Template?

[flip-flop]

Das <div> sollte irgendwo in deinem Template stehen. (Schau dir doch bitte einmal den generierten Quelltext an. (FF Firebug).

Die zweite Ergänzung bekommst du nur mit einem Ersetzer hin. -> space after/before

Oder du verwendest alternativ zum CP Text mit Bild den CP Bilder <div>. Hier kannst du ein Template bearbeiten.

Die einfachste Variante ist sicher die Positionierung "Bild in Tabelle links anordnen"

[Jensensen]

im quelltext deiner oben genannten seite steht:
A)

<div>
<a id="jump26" name="jump26"/>
.....

B)

<div style="margin: 0pt 0pt 20px; padding: 0pt;" class="spaceAfterCP">

WOHER DAS KOMMT? WOHER SOLLEN WIR DAS WISSEN?
CP text with images hat allerdings kein separates template.

Einfaches DIV (siehe A) kommt vermutlich aus Deiner Seitenvorlage.
Restlicher Code sieht nach WYSIWYG Editor aus.

ändere wie folgt:
A)

<div style="overflow:hidden;">
<a id="jump26" name="jump26"/>
.....

sowie ergänzen:
B)

<div style="margin: 0pt 0pt 20px; padding: 0pt; clear: left;" class="spaceAfterCP">

...

[flip-flop]

<div style="margin: 0pt 0pt 20px; padding: 0pt;" class="spaceAfterCP">

Das ist "Abstand danach". Änderung nur mit Ersetzer möglich oder in die class schreiben.

[Jensensen]

...
Einfaches DIV (siehe A) kommt vermutlich aus Deiner Seitenvorlage....

Da bestünde bspw. die Möglichkeit wie folgt zu ändern:

<div class="Meine_MIttelspalte">
{CONTENT}
</div>

CSS:
.Meine_MIttelspalte {overflow:hidden;}

spaceAfterCP (siehe B) entsprechend.

[update]

..und wo kommt dann
div.imgDIVinTextLeft {
float: left;
margin-right: 0.5em;
margin-bottom: 0.5em;
padding: 0;
clear:both;
}
zum Tragen?

[Jensensen]

noch einfacher: --> Zeilenumbrüche ergänzen nach:

vélos couchés Radius, revue "Liegerad-Profi"

<br /><br /><br /><br />

[Jensensen]

..und wo kommt dann
div.imgDIVinTextLeft {
float: left;
margin-right: 0.5em;
margin-bottom: 0.5em;
padding: 0;
clear:both;
}
zum Tragen?

float und clearer in einer klasse funktioniert nicht!

nach imgDIVinTextLeft folgt auch image_td oder so ähnlich. da kann man auch cssen.


danach muss [hier] ein clearer folgen. wo auch immer.

[Jensensen]

...danach muss [hier] ein clearer folgen. wo auch immer.

da isser doch:

class="spaceAfterCP"

...oder in die class schreiben.

da muss der clearer rein. (frontend.css)


übrigens reicht hier nicht der clearer allein, da zudem auch eine art "whitespace-problem" besteht, dass meist in verbindung mit MARGINs auftaucht. das lässt sich nur in den Griff bekommen, mit dem overflow:hidden; (s.o.) im UMGEBENDEN DIV!!!

Das lässt sich hier sehr schön testen, indem man mit "Firebug for Firefox" zuerst B ändert und dann A (s.o.).

Und damit hat YAML regelmäßig zu kämpfen:
http://forum.phpwcms.org/viewtopic.php?f=28&t=17613

Anstatt <div class="Meine_MIttelspalte"> kann das Ding auch heißen: <div class="floatbox">