[ExMD]

zu folgendem screenshot habe ich ein problem:
es betrifft den bereich mit Titel/Überschrift und Datum (jeweils h1 und h2), dem eigentlichen artikeltext darunter und dem thumbnail, das floatet.

bilder, css und html hab ich hier hochgeladen: http://karma.myrmidons.de/beta.zip (ich bitte den etwas chaotischen css-aufbau zu entschuldigen, ich probier da drin einiges rum und verschiebe ständig was )

der aufbau und die gründe für diese art der umsetzung:
titel und inhalt habe ich in zwei divs getrennt. bevor jetzt alle aufschreien, hier der grund:




evtl. sieht man es auf dem screenshot nicht so gut, aber der hintergrund der boxen ist leicht opak, so dass die darunterliegende steintextur des body-hintergrundes durchschimmert.
zusätzlich hat der hintergrund der boxen im bereich der überschrift einen leichten verlauf drin, der kurz unter <h2>datum</h2> in homogenes dunkelgrau übergeht, aber immer noch opak ist.
damit ergibt sich für mich folgendes problem:
möglichkeit a) setze ich alles in eine box, müsste ich ein hintergrundbild machen, dass oben einen rund 40pxl verlauf hat und insgesamt, sagen wir mal, 2000pxl hoch ist. die restlichen 1960pxl wären in dem homogenen grau. der hintergrund muss halt so groß sein, weil ich nicht weiß wie groß die inhalte werden können. bei einem blogeintrag oder einer galerie könnte das schon recht viel zum scrollen werden.
möglichkeit b) setze ich wieder alles in eine box, könnte ich den 40pxl hohen verlauf als hintergrundbild angeben, der sich nicht wiederholt. das homogene grau wäre dann als hintergrundfarbe angegeben, die opacity bekommt. das problem: opakes hintergrundbild und opake hintergrundfarbe addieren sich dann zu einem gesamten nicht opaken hintergrund. also pustekuchen mit durchschimmern der textur.

so weit zur erklärung, warum ich mich für die doppel-div-lösung entschieden habe.
nun zur umsetzung...

floating left und die übertragung in das darüberliegende div:
wie man im screenshot sehen kann, floatet das vorschaubildchen links. sowohl überschrift als auch der eigentliche textinhalt sind davon betroffen. das thumbnail ist im zweiten div eingebaut.
damit es bis in das erste hineinreicht, habe ich ein margin-top -37px; eingefügt. damit wächst es also aus dem zweiten div nach oben in das erste.
das problem bei der sache: das float wirkt sich nicht auf das darüberliegende div aus, h1 und h2 liegen über dem thumbnail.

würde ich das thumbnail in das erste div setzen und es nach unten rauswachsen lassen, würde es sich auf den inhalt des darunterliegenden so auswirken, wie erhofft: der text läuft dann um das bild.
ABER: das kann ich nicht machen, weil das cms nur text für überschriften eines artikels oder news-eintrages erlaubt.

also...?
ich hoffe, ich hab alles verständlich rübergebracht und an alle probleme gedacht, die sich mir beim ausprobieren der verschiedenen möglichkeiten in den weg gestellt haben.

wer hätte denn jetzt noch eine idee, wie ich das sonst noch umsetzen könnte?
vielleicht gibts noch ne ganz andere rangehensweise, an die ich nicht gedacht habe?
ich bin für alle vorschläge offen

[edit Kash: Verschoben von Programmierung - HTML/CSS sind keine Programmiersprachen]

[ExMD]

folgende alternativen sind mir noch eingefallen:

1.) ich lass per javascript auslesen, ob ein img im zweiten div vorkommt und wenn ja bekommt das erste div ein padding-left mit x pixeln.
2.) ich setz die überschrift grundsätzlich weiter rechts an, in der hoffnung, dass die benutzer immer ein bild zu jedem artikel einfügen. oder dass da zumindest ein platzhalter-bildchen steht.

[m]

[ExMD]

öhm... nö

[BenjaminSchulz]

[m]

[ApfelQFeierabend]

[pixelpapst303]