Zum Inhalt springen

Typo3 (Text mit Bild) zerschiesst Layout

Erstellt am 30. April 2007 · 11 Antworten · letzte Antwort am 2. Mai 2007

Tags: Bilder, HTML & CSS, Frage

Waveshaper ·

hallo,

habe schon länger danach gesucht, bin leider nicht fündig geworden..
ich habe bei zwei meiner aktuellen Projekte das Problem, dass Typo3 dass Layout zerschiesst (verschachtelt darstellt), und zwar wenn ich das Inhaltselement "Text mit Bild" verwende...

wie das aussieht, könnt ihr auf folgenden zwei Screenshots sehen..

Das Problem muss mit dem CSS zusammenhängen, aber einen Workaround habe ich leider noch nicht gefunden...

Bild: img61.imageshack.us/…/typo3layouten9.jpg

und hier Beispiel zwei...

Bild: img61.imageshack.us/…/typo3layout2nf9.jpg

cope ·

Hallo Waveshaper,

jo wird ein CSS Problem sein. Irgendwas mit float: left; schätz ich mal.
Hast Du mal eine URL für uns. Dann wirds leichter.

Übrigens, die "verunglückte" Darstellung in Galerie find ich recht schick, sieht doch gut aus.

LG
Cope

Waveshaper ·

naja, die URL gebe ich eigentlich erst raus, wenn die Sachen wirklich stehen...
weil sonst geht Google rauf und fängt Dinge an zu indexieren, die noch gar nicht fertig sind.. Google ist verdammt schnell. Wenn man hier im Forum einen Link postet, dann ist man 2-3 Wochen später garantiert im Index....

aber wenns nicht anders geht, poste ich halt dann doch noch den URL..

Norman2k ·

Ja das Problem kenne ich, dass entsteht wenn du den Text um das Bild floaten lässt aber dann das Bild höher als der Text selber ist.
Ich ab mir angewöhnt, um jedes Contentelement ein div zu legen mit nem "clear:both;". Das sollte das Problem beheben.

Norman

Waveshaper ·

muss ich den clear.both direkt im Stylesheet in der CSS-Klasse definieren?
wie muss ich da vorgehen? ich denke, das ist es, aber wo muss ich was reinschreiben?

danke für nochmals für deine hilfe...

Waveshaper ·

wunderbar, jetzt habe ich zwar den "rechts-stapler"-effekt nicht mehr (oder wie man das nennen soll), aber das Problem, das jetzt die Bilder den DIV-Container überlappen... werde gleich nochmals ein screenshot posten...

aber trotzdem schon mal vielen dank....

Norman2k ·
page.10.marks.CONTENT.renderObj.stdWrap.wrap = <div class="contentelement">|</div>

So mach ich es immer, das setzt halt automatisch ein div um jedes ertstellte Inhaltselement und pack dann in meine CSS "clear:both;" für die Klasse "contentelement".

Norman

Waveshaper ·

klar, so hab ichs auch gemacht... nur das problem ist, wenn die DIV beispielsweise einen weissen Hintergrund hat, der darunterliegende Hintergrund aber z.B. grau ist, dann siehts auch nicht gerade hübsch aus, weil dann das Bild die gewrappte DIV überlagert....

Gregor ·

Ich löse das eigentlich immer durch ein "<div style="clear:both;height:1px;></div>" hinter dem letzten floatenden Element.

Wenn du also <img><p> hast, dann hinter das <p> dieses clear-div und es sollte passen, denke ich.

Gregor

Waveshaper ·

Vielen Dank für Eure Tipps. Leider haben sie mich nicht wirklich weitergebracht.

Norman2k: dein Tipp ergibt folgendes.

Bild: img263.imageshack.us/…/typo3layout3bh1.jpg
an und für sich nicht übel, aber auch nicht wirklich so, wie es sein sollte.

Und Gregor, so sieht es mit deinem Code aus.
Bild: img263.imageshack.us/…/typo3layout4yq5.jpg

Naja, nicht wirklch schön...

Tja, vielleicht hat ja jemand noch ne Idee, wie man dieses CSS-Problem lösen könnte... Irgendwie war es früher mit Tabellen doch viel leichter...

Unbekannter Benutzer ·

Probier es mal so:

page.10.marks.CONTENT.renderObj.stdWrap.wrap = <div class="contentelement">|<div class="klearer"></div></div>

im CSS:

.klearer{
clear: both;
}

---
contentelement braucht damit eigentlich kein clear: both; mehr. Aber es muss vorhanden sein.

Grüße

Christian