Hallo,
ich bin dabei, mit CSS eine Seite zu entwerfen, bei der in einem horizontal zentrierten Container vier Fotos mit zugehörigen Text untereinander angeordnet sind. Für jedes Foto mit dem zugehörigen Textblock habe ich eigenen Container vorgesehen, wobei der Textblock bündig mit der Oberkante des jeweiligen Fotos beginnt.
Das Design ist resizeable ausgelegt, die Größe der Bilder sowie die Breite und Höhe der Container variiert also mit der Bildschirm- bzw. Fensterbreite. Die Breite wird durch die Fensterbreite bestimmt, die Höhe durch dasjenige Inhalts-Element (Bild oder Text), welches den größeren Platz benötigt. Bei großer Bildschirmbreite reicht der Text nicht einmal bis zur Bildunterkante, bei kleineren Fensterbreiten umflutet der Text das Bild am unteren Rand.
Dabei darf sich aber der Inhalt eines Containers nicht mit dem Inhalt eines nachfolgenden Containers überschneiden, der Text darf nicht in den nachfolgenden Container "hineinwachsen", sondern muss immer mit ca. 1 Zeile Abstand darunter bleiben.
Wie ich glaube, habe ich die Aufgabenstellung ganz gut gelöst, allerdings tritt dabei ein Problem auf, an dem ich mir schon seit Stunden die Zähne ausbeiße (vermutlich ist es eine Kleinigkeit, über die ich immer wieder drüberschaue).
Die dunkelgrüne Footerleiste, die eigentlich am Seitenfuß außerhalb des "content"-Containers über die ganze Fensterbreite erscheinen sollte, wird horizontal geschrumpft und in den Container hineingezogen. Verursacht wird das durch das Clearing nach jedem Bild/Text-Container, das ich aber benötige, damit die einzelnen Bereiche nicht "ineinander wachsen".
Ich habe schon Alles Mögliche ausprobiert, komme aber einfach nicht drauf, wie ich dieses Problem lösen könnte. Zur besseren Übersicht habe ich die div-Container mit farbigen Rahmen versehen. Vielleicht könnte sich das mal jemand anschauen und mir einen Tip geben?
Die Seite zum anschauen: http://gasthof-thaller.com/neu/guten_schlaf.html
P.S:: die Seite ist "W3C-XHTML 1.0 Transitional" validiert
LG und besten Dank im Voraus
Herb