Responsive Boxen mit Overlay

[Frucht]

Hallo Leute,
ich habe derzeit ein Problem an dem ich schon ein paar Stunden dransitze. Die Seite beinhaltet mehrere Boxen(beinhalten jeweils ein Image) die nebeneinander angezeigt werden. Der Text soll vor dem Image angezeigt werden, was momentan ja auch funktioniert. Nun habe ich leider das Problem, dass das Image über die Box hinausschaut bzw. sich die Höhe des Divs nicht automatisch anpasst. Im weiteren verlauf wollte ich dann auch den Text via Hover einblenden lassen. Ich hoffe ihr könnt mir helfen oder vlt. einen besseren Lösungsansatz nennen.

Link: http://apu.sh/3p7

Danke schonmal.

Grüße
Frucht

 

[djheke]

du kannst deiner Bildbox noch Overflow:hidden; zuweisen. Dann passen sich die Boxen an der Bildgröße an. Hier ein Link zum Thema Bildbeschreibung mit Hover einblenden.
http://www.gipspferd.de/css/anleitung/bildbeschreibung-mit-css/

 

[Frucht]

Hallo, vielen Dank für deine Antwort. Mit overflow: hidden wird das Bild leider abgeschnitten und der Box angepasst, ich würde gerne die Box dem Bild anpassen bzw. die Box soll die Höhe des Bildes annehmen. Probiert habe ich jetzt dem IMG ein position: relative und dem Text ein position: absolute zu geben was auch sehr gut funktioniert. Nun werden aber die restlichen Mannschaften nicht mehr angezeigt da sie ja kein Bild enthalten :(

es sollte dann in etwa so aussehen: http://playwp.equiet.sk/

 

[Trüffelkrieger]

Ich steige gerade durch deinen Quellcode nicht ganz durch, würde aber mal folgendes vorschlagen:

1. Lösch erstmal die Texte
2. Füge alle Bilder der Mannschaften so ein, wie du dir das vorstellst (umschlossen von je einem div, wie du das ja jetzt schon gemacht hast).
3. anschließend kannst du die Texte in die divs einfügen
4. gib den umschließenden divs ein position:relative
5. gib dem Element, was den Text beinhaltet, ein position:absolute

 

[Frucht]

Hallo,
ich habe den Text Position Absolute und dem IMG + Umschließenden DIV von TEXT + BILD ein Position Relative gegeben. Das funktioniert soweit ganz gut. Das Problem ist nun halt, dass wenn ein Beitrag kein Bild enthält dieser ganz verschwindet. Kann man das dann irgendwie lösen?

 

[Trüffelkrieger]

Das einfachste wäre, du machst von jeder Mannschaft ein Bild. Das wäre im Übrigen auch die schönste – weil durchgängig gleiche – Lösung.

 

[Frucht]

Danke für eure Antworten. Also es ist ein Responsiv Wordpress Theme bei dem ich eben die Beiträge ausgeben möchte, mein Konzept (http://dev.9mango.com/preview.png) sieht eig. ein Beitragsbild vor, dass dem DIV automatisch die Höhe gibt und einem Overlay mit Text. Es kann jetzt jedoch vorkommen, dass der Beitrag kein Bild hat sondern nur den Text enthält, jetzt würde es halt schön aussehen wenn die Boxen alle die selbe Höhe hätten? Wüsstet ihr vlt. eine bessere Lösung? Ich könnte auch via Jquery den Beiträgen ohne Bild automatisch deren Höhe geben?