Zum Inhalt springen

probleme mit inhalten (mehrspaltiges css-layout mit float)

Erstellt am 19. August 2006 · 5 Antworten · letzte Antwort am 16. Oktober 2007

Tags: HTML & CSS, Frage

stevee ·

n'abend

hab da ein für mich unlösbares problem mit der darstellung von inhalten in typo3 4.0:

geht mal auf die seite:
http://www.synor.ch/typo3/index.php?id=28
http://www.synor.ch/typo3/index.php?id=24

wie ihr seht, werden teilweise inhaltselement (grauer kasten oder bilder) erst unterhalb des menü-hintergrundbildes (grüner verlauf) dargestellt.

ich finde einfach nicht heraus, an was das liegt.
- doctype mit deprecated dingen wie zentrierung?

habe jeweils das ganze in dreamweaver genommen und alles überflüssige gelöscht, um das problem einzukreisen.
die menüs link und rechts sind als erstes in der html-reihenfolge und haben float: left und right. also wie bei de.selfhtml.org vorgeschlagen...

weiss jemand rat?
das traurige: das ganze kommt nur bei bestimmten seiten bzw. inhalten bzw. deren reihenfolge vor.

besten dank für hilfe!
stevee

Michaelh74 ·

Hallo Stevee,

vielleicht ist an diesen Stellen die Breite für den div Inhalt zu groß und deshalb bricht er um. Versuch mal einen festen kleinen Wert für die integrierte Tabelle bzw. dem content div zu nehmen u. kuck ob es daran liegt - ich denke nämlich ja.

Viel Glück!
Michael

stevee ·
Michaelh74 schrieb

vielleicht ist an diesen Stellen die Breite für den div Inhalt zu groß und deshalb bricht er um.

das dachte ich zuerst auch, ist es aber nicht.

bin unterdessen ein wenig weitergekommen.
es hat auf jeden fall mit dem "css styled content" zu tun.

habe herausgefunden:
wenn ich den quellcode von http://www.synor.ch/typo3/index.php?id=24 (mit dazugehörenden css-files in richtiger verarbeitungsreihenfolge - hab sie jeweils direkt in das html-file kopiert, ist einfacher zur fehlersuche)
in dreamweaver öffne, existiert vom css styled content der stil:

/* Positioning of images: */
/* Above */
DIV.csc-textpic-above DIV.csc-textpic-text { clear: both; }

das heisst, alle elemente, die in einem div sind, die klasse "csc-textpic-above" haben und des weiteren wieder in einem untergeordneten div und einer klasse "csc-textpic-text" entsprechen (dies ist der fall beim legendentext "Es war sehr nass..."), erhalten die eigenschaft "clear: both"

das habe ich jetzt mal verstanden.

das wäre eigentlich soweit auch nachvollziehbar, aber wer ich frage mich nur, wer das überhaupt so nutzen kann, diese "css styled content" ???
kompizierter gehts ja gar nicht, meine meinung, und so ein layout mit 3 spalten haben ja noch viele?! daher frage ich mich, ob nicht mehr solche probleme haben oder ob einfach niemand den css styled content einsetzt?!

oder hat da jemand ein patentrezept für css styled content? oder eine sinnvolle anleitung, was überhaupt der vorteil dieser erweiterung ist?

das wäre wirklich sehr sinnvoll zu wissen.
ich hab gedacht, das sei praktisch, aber in der art ist das ganze ja schlicht nicht überschaubar, denn ihr müsst euch mal die anleitung zur css styled content erweiterung anschauen (tools > ext manager > auf "css styled content" klicken und dann oben rechts im pulldown-menü auf "edit files" und dann "css/readme.txt -> edit file").
da seht ihr nämlich, dass alle styles in der datei "css/example.css" definiert sind.
diese habe ich dann auch direkt in mein template eingebunden.
ich dachte, ich könne dort alles nur mögliche definieren.
aber die datei ist so umfangreich, dass man schlicht den durchblick nicht hat...

oder hat der jemand??

besten dank für eine gute diskussion und hilfe
stevee

Chuonrad ·

Nun ... dieses Problem habe ich auch, und wäre ein einer Idee Interessiert.
Bei kommt der "clear"-tag mit der rechten Spalte zum tragen ...

KliM23 ·

Ich hab das Problem so gelößt in dem ich die CSS-Werte in meiner css-Datei überschrieben habe:

DIV.csc-textpic-left DIV.csc-textpic-text {
  clear: none;
}
DIV.csc-textpic-above DIV.csc-textpic-text {
  clear: none; float: left;
}
stevee ·

hallo klim

hmm, nun, das mit "clear: none" funktioniert sicher, das problem ist nur (wie ich in der reichlichen zwischenzeit herausgefunden habe), dass dann nachfolgende typo3-inhalte nicht mehr mit einem clear versetzt werden, was sicher wiederum auch nicht so sinnvoll ist.
das clear: both braucht es eben schon.
das eigentliche problem, warum das ganze nicht wie gewünscht funktioniert, liegt aber bei der css 2 spezifikation (weiss nicht mehr genau ob 2.0 oder 2.x...?!).
und was dort aktuell noch nicht richtig funktioniert, ist, dass das clear: both beim nächst äusseren elternelement resp. beim nächstäusseren div eben leider immer noch wirkung zeigt. anders sieht es aber aus, wenn ihr einfach um euren typo3-content, also innerhalb des inhalts-markers im html-template, eine html-tabelle baut.
dann wirkt der clearer nur bis zu dort hin und nicht mehr weiter.
das war und ist nach meiner intensiven suche danach im internet die einzig machbare lösung. anderes habe ich nicht gefunden.

siehe auch hier: #486853

liebe grüsse
stevee