Hallo an Alle,
ich bin etwas verzweifelt. Ich suche seit zwei Stunden eine Lösung meines Problems.
Ich verwende css_styled_imgtext. Dort habe ich die Styles nach meinen Wünschen angepasst. Das hat alles super funktioniert. Auch alle restlichen Inhaltselemente funktionieren super.
Zum Problem: Der Abstand zwischen den Inhaltselementen (NUR "Text mit BILD" - also css_styled_imgtext Elemente) stimmt nicht. Konkret gesagt: Zwischen ersten und zweiten "Text mit Bild" ist ein Abstand von ca. 200 Pixel. Alle weiteren Abstände (zwischen 2. und 3., zwischen 3 und 4. und so weiter) sind so, wie es die divs in css_styled imgtext vorsehen.
Also noch mal, zum Staunen.
Text mit Bild 1
---Abstand--- (viel zu groß, ca. 200 px)
Text mit Bild 2
---Abstand--- (ok)
Text mit Bild 3
---Abstand--- (ok)
Text mit Bild 4
---Abstand--- (ok)
Text mit Bild 5
---Abstand--- (ok)
Text mit Bild 6
---Abstand--- (ok)
Text mit Bild 7
Hat sowas schon mal jemand gehabt??? Wie gesagt, nur bei text mit Bild. Danke
besinnliches Weihnachtsfest wüschnst
Dierk
was steht den im quelltext wo der abstand herkommt??
im Quelltext steht nichts....
Also, die Text mit Bild Elemente sind (nur zum Testen) alle identisch. Der Quelltext zeigt keine Unterschiede zwischen ersten und zweiten bzw. zwischen zweiten und dritten Element. Das ist total kurios, ist aber so.
<!-- CONTENT ELEMENT, uid:34/textpic [begin] -->
<a name="34"></a>
<!-- Image block: [begin] -->
<div class="csi-textpic csi-intext-left-nowrap">
<div class="csi-image"><img src="uploads/pics/dummy_04.jpg" width="100" height="130" border="0" alt="" title="" /><div class="csi-caption"> <p class="csc-caption">BILDTEXT Unterschrift</p> </div>
</div>
<div class="csi-text">
<!-- Header: [begin] -->
<div class="csc-textpicHeader csc-textpicHeader-26"><h1 class="csc-firstHeader">Testüberschrift (Kopie 3)</h1></div>
<!-- Header: [end] -->
<!-- Text: [begin] -->
<p class="bodytext">ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf afahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafjafh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf afahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj </p>
<!-- Text: [end] -->
</div><!-- keep it in the box! --><div style="clear:both;"></div></div>
<!-- Image block: [end] -->
<!-- CONTENT ELEMENT, uid:34/textpic [end] -->
<!-- CONTENT ELEMENT, uid:33/textpic [begin] -->
<a name="33"></a>
<!-- Image block: [begin] -->
<div class="csi-textpic csi-intext-left-nowrap">
<div class="csi-image"><img src="uploads/pics/dummy_03.jpg" width="100" height="130" border="0" alt="" title="" /><div class="csi-caption"> <p class="csc-caption">BILDTEXT Unterschrift</p> </div>
</div>
<div class="csi-text">
<!-- Header: [begin] -->
<div class="csc-textpicHeader csc-textpicHeader-26"><h1>Testüberschrift (Kopie 2)</h1></div>
<!-- Header: [end] -->
<!-- Text: [begin] -->
<p class="bodytext">ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf afahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafjafh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf afahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj </p>
<!-- Text: [end] -->
</div><!-- keep it in the box! --><div style="clear:both;"></div></div>
<!-- Image block: [end] -->
<!-- CONTENT ELEMENT, uid:33/textpic [end] -->
<!-- CONTENT ELEMENT, uid:32/textpic [begin] -->
<a name="32"></a>
<!-- Image block: [begin] -->
<div class="csi-textpic csi-intext-left-nowrap">
<div class="csi-image"><img src="uploads/pics/dummy_02.jpg" width="100" height="130" border="0" alt="" title="" /><div class="csi-caption"> <p class="csc-caption">BILDTEXT Unterschrift</p> </div>
</div>
<div class="csi-text">
<!-- Header: [begin] -->
<div class="csc-textpicHeader csc-textpicHeader-26"><h1>Testüberschrift (Kopie 1)</h1></div>
<!-- Header: [end] -->
<!-- Text: [begin] -->
<p class="bodytext">ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf afahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafjafh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf afahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj </p>
<!-- Text: [end] -->
</div><!-- keep it in the box! --><div style="clear:both;"></div></div>
<!-- Image block: [end] -->
<!-- CONTENT ELEMENT, uid:32/textpic [end] -->
<!-- CONTENT ELEMENT, uid:4/textpic [begin] -->
<a name="4"></a>
<!-- Image block: [begin] -->
<div class="csi-textpic csi-intext-left-nowrap">
<div class="csi-image"><img src="uploads/pics/dummy.jpg" width="100" height="130" border="0" alt="" title="" /><div class="csi-caption"> <p class="csc-caption">BILDTEXT Unterschrift</p> </div>
</div>
<div class="csi-text">
<!-- Header: [begin] -->
<div class="csc-textpicHeader csc-textpicHeader-26"><h1>Testüberschrift</h1></div>
<!-- Header: [end] -->
<!-- Text: [begin] -->
<p class="bodytext">ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf afahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafjafh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf afahsfg afh afs fka asf fafs lkafj lkaj klajf klaj k alkfjklajf af ahsfg afh afs fka asf fafs lkafj </p>
<!-- Text: [end] -->
</div><!-- keep it in the box! --><div style="clear:both;"></div></div>
<!-- Image block: [end] -->
<!-- CONTENT ELEMENT, uid:4/textpic [end] -->
Danke
Dierk
dann ist es die p klasse im stylesheet
Das gleiche ganze Problem hat mich heute ca. 4 Stunden beschäftigt, jedoch nicht mit der Extension. Daran liegt es auch nicht. Es ist eine generelles CSS-Problem.
Der Code müsste (so wie es hier im Forum steht) ohne Fehler laufen. Du hast aber wahrscheinlich die Navigation oder eine Sietenspalte in deinem Layout, die per float ausgerichtet ist. Nach jedem Text-mit-Bild-Objekt ist ein DIV mit "clear:both" gesetzt. Dadurch wird vermieden, dass die einzelnen Objekteineinanderlaufen, was bei großen Bildern und wenig Text passieren kann. Die Bilder sind in den Content-Objekten ebenfalls per float ausgerichtet. Das "clear:both" gibt nun aber vor, soviel Platz zu lassen, bis rechts und links kein float-Objekt mehr ist. Dazu zählen aber auch Navigation und Seitenspalte, wodurch der große Platz zu erklären ist. Das 2. Text-Bild-Objekt fängt genau unterhalb von navi und Seitenspalte an, obwohl (!) es in einem ganz anderen DIV liegt.
In den derzeitigen CSS-Spezifikationen gibt es keine getrennten Float-Bereiche. Das wird sich vielleicht mit CSS3 ändern (hatte keine Lust mehr zu suchen).
Lösung 1: "Nicht schön, aber geht."
<div style="clear:both;"></div>
muss aus dem Template herausgenommen werden. Stattdessen muss eine Tabelle mit einer Zeile und einer Zelle um das Objekt gelegt werden.
...ich kann den Aufschrei jetzt hören: "Was ist mit den Web-Standard?". Ich programmiere selber auch sehr genau nach den Standards und habe deshalb sehr lange gesucht.
Lösung 2: keine Fußzeile
Ok, ok. Eine andere Lösung gibt es noch für den Fall, dass man keine Fußzeile im Layout hat (ich gehe mal von 3-spaltigem Layout aus). Navigation und Seitenspalte werden nicht per float, sondern mit position:absolute ausgerichtet. Dann sind die Text-Bild-Objekte die einzigen float-Objekte und die Probleme treten nicht mehr auf.
Mehr dazu:
Limiting the scope of css clear: attribute:
http://www.issociate.de/board/post/195082/
How To Clear Floats Without Structural Markup:
http://www.positioniseverything.net/easyclearing.html
Viel Erfolg!
Fabian