Bilder unter einem Text bündig mit einem größerem Bild

[finke]

Hallo,
ich habe Folgendes Problem:
Ich möchte Neben einem Größeren Bild (G) einen Text (T) schreiben, und darunter mit G unten bündig 2 kleinere Bilder (K) Positionieren.
----------|
| G |  T  |
|   |-----|
|   |   K |
-----------
So Quasi. Mit "altem" HTML würde ich ja einfach eine Tabelle nehmen, und einfach G über 2 Zeilen erstrecken, und die Zelle von K valign="bottom".
Da ich eigentlich versuche wo es geht DIV-Boxen statt Tabellen zu verwenden, suche ich eine Lösung mit DIV-Boxen und CSS.
Meine Bisherigen Versuche sehen in etwa so aus:

div.ref {  
	width: 100%;  
	vertical-align: top;  
}  
  
div.ref div.pic {  
	width: 450px;  
	text-align: center;  
	display: table-cell;  
	vertical-align: bottom;  
}  
  
div.ref div.cell {  
	display: table-cell;  
}  
  
div.ref div.cell div.text,div.ref div.cell div.picbox {  
	display: table-row;  
}  
  
div.ref>div.sep {  
	clear: both;  
	width: 90%;  
	margin: 0 auto;  
	border-bottom: 2px solid #A4A4A4;  
	height: 10px;  
	margin-bottom: 10px;  
}  
  
div.ref:last-child>div.sep {  
	border: 0 none;  
}  
  
img.refPic {  
	width: 400px;  
	margin: auto auto;  
	border: 1px solid #525252;  
	outline: 1px solid #A4A4A4;  
}  
  
img.refPic2 {  
	width: 200px;  
	margin: 10px 35px;  
	border: 1px solid #525252;  
	outline: 1px solid #A4A4A4;  
}

  
<div class="ref">  
<div class="pic"><img src="img/ref/car3.jpg" class="refPic"></div>  
<div class="cell">  
<div class="text">Hir steht ein Text, der sich meist über etwa 2-3 Zeilen erstreckt. G ist etwa doppelt so hoch.</div>  
<div class="picbox"><img src="img/ref/old1.jpg" class="refPic2"><img src="img/ref/old2.jpg" class="refPic2"></div>  
</div>  
<div class="sep"></div>  
</div>  

Da ich an den Sachen schon viel rumgedocktort habe, kann es auch sein, das einige der CSS Angaben überflüssig sind. Würde mich über derartige Hinweise, und auch andere Verbesserungsvorschläge freuen.

Hoffe mir kann einer Tipps geben, wie ich das löschen kann.

Mit freundlichen Grüßen
Finke

[Felix Riesterer]

Liebe(r) finke,

was soll denn die Seite selbst überhaupt sein? Ist das eine Detailansicht eines Bildes, oder ist das eine Infoseite mit einem großen Bild links zur Illustration und einem weiteren Bild zu weiterführenden Galerien?

Je nachdem welchen _Sinn_ Deine Seite hat, könnte man ein sinnbehaftetes (sprich "semantisches") Markup erzeugen, das im Zweifelsfalle immer besser als Deine momentane Div-Suppe ist. Mit CSS geht's dann in aller Regel auch besser...

Liebe Grüße,

Felix Riesterer.

[finke]

was soll denn die Seite selbst überhaupt sein? Ist das eine Detailansicht eines Bildes, oder ist das eine Infoseite mit einem großen Bild links zur Illustration und einem weiteren Bild zu weiterführenden Galerien?

Im Prinzip ist es eine Art werbe Text, welche durch Bilder Illustriert werden. Und die kleinen Bilder sind dann weitere Bilder, wenn man an einem Thema zB mehr als ein Sachverhalt darstellen möchte.

»»»» display: table-cell;
»»»» display: table-cell;
»»»» display: table-row;

»»Das ist nicht dein Ernst, oder? Du willst wirklich Tabellen mit div-Elementen nachbauen? Dann kannst du auch ebensogut bei den echten Tabellen bleiben.
Ist nur mein Aktueller versuch. Davor hatte:

<div class="ref">  
<div class="pic"><img src="img/ref/car3.jpg" class="refPic"></div>  
Wir restaurieren Ihren Traumwagen oder helfen Ihnen bei der Auswahl des richtigen Partners,  
ganz individuell auf Ihre Wünsche und Belange zugeschnitten.</div>  
<div class="picbox"><img src="img/ref/old1.jpg" class="refPic2"><img src="img/ref/old2.jpg" class="refPic2"></div>  
</div>

die diev.refPic bekam ein float, die div.sep ein clear und mehrere dieser Boxen untereinander. Ah hatte iwo gelesen, das man das als Tabellennachbau unten bündig machen könnte.geht auch prinzipiell, allerdings nur für Schrift und Bilder, ich will ja aber die Schrift oben bündig, die Bilder unten.

Hoffe mir kann wer weiterhelfen.

Mit freundlichen Grüßen
finke

[Felix Riesterer]

Liebe(r) finke,

ich mache Dir mal einen Gegenvorschlag für Dein Markup:

<p class="angebot">  
    Wir restaurieren Ihren Traumwagen oder helfen Ihnen bei der Auswahl  
    des richtigen Partners, ganz individuell auf Ihre Wünsche und Belange  
    zugeschnitten.  
    <img src="img/ref/car3.jpg" alt="brandneue Karre" class="refPic" />  
    <img src="img/ref/old1.jpg" alt="alte Karre mit Beulen" />  
    <img src="img/ref/old2.jpg" alt="alte Karre mit noch mehr Beulen" />  
</p>

So, jetzt kann man noch an den alt-Attributen schrauben, damit das Beispiel für den Ernsteinsatz taugt. Wenn das dann passt, dann schauen wir uns ein passendes CSS dazu an. OK?

Liebe Grüße,

Felix Riesterer.

[finke]

Hi,
danke für die bisherige Hilfe.
Hab die Anweisungen mal umgesetzt.
Die Alt Attribute sind überall eingeführt, muss mich allerdings noch ran setzen, und allen was passendes geben.
So sieht es jetzt aus

Sollte vielleicht noch erwähnen, das es gewünscht ist, das die großen Bilder in jeder Reihe die Seiten tauschen sollen.

Wie Positioniere ich jetzt die Elemente am besten? Bin schon etwas am rumspielen, also bitte ich um Nachsicht, wenn es ab und zu richtig grausig aus sieht.

[ChrisB]

Hi,

So sieht es jetzt aus

Sollte vielleicht noch erwähnen, das es gewünscht ist, das die großen Bilder in jeder Reihe die Seiten tauschen sollen.

Also in dem Chaos kann ich jetzt nicht zweifelsfrei erkennen, wie es nun eigentlich letztendlich *gewollt* aussehen soll.

Wie Positioniere ich jetzt die Elemente am besten?

Wenn die „kleinen Bilder“, die unten bündig platziert werden sollen, immer die gleichen Maße haben - dann böte es sich an, sie absolut am jeweiligen Container auszurichten. Damit sie den Text nicht überlagern, bekäme dieser (bzw. dessen [letztes] Element) noch ein entsprechendes padding-bottom; und damit sie das große Bild nicht überlagern, der Container auch noch eine Mindestbreite.

Sollte vielleicht noch erwähnen, das es gewünscht ist, das die großen Bilder in jeder Reihe die Seiten tauschen sollen.

Dazu könntest du, statt den Bildern selbst eine Klasse zu verpassen, die entsprechende Klasse* ebenfalls dem Containerelement geben - und die Ausrichtung der Bilder dann über den Nachfahrenselektor regeln.

* Eine Klasse müsste es natürlich auch nicht unbedingt sein, in modernen Browsern täten es auch die nth-child-Selektoren. Aber derzeit erreicht man mit einer Klasse noch breitere Kompabilität zu aktuell verbreiteten Browsern.

MfG ChrisB

[finke]

So, habe jetzt alles so eingestellt.
Allerdings muss ich den Absätzen jetzt auch eine Höhe geben, da die Bilder sie nicht mehr festlegt. Allerdings sind die großen Bilder unterschiedlich hoch, weswegen die Abstände nach unten überall unterschiedlich sind, was auch doof aussieht.
Mit freundlichen Grüßen
finke

[ChrisB]

Hi,

Allerdings muss ich den Absätzen jetzt auch eine Höhe geben, da die Bilder sie nicht mehr festlegt.

http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#float-einschliessen

MfG ChrisB

[Felix Riesterer]

Lieber finke,

So sieht es jetzt aus

schon viel besser! Das Markup sieht richtig übersichtlich aus mit der Struktur. Und mit der Darstellung scheinst Du mittlerweile auch schon wesentlich weiter gediehen zu sein - prima!

Aber was muss ich da am hintersten Ende Deiner Seite gantz fürchterbar pöhsez sehen??
<div class="linklist"><a href="javascript:history.back();">Zurück</a></div>

Woher willst Du wissen, welche Seite meine vorherige war (in diesem Fall dieses Forum)? Wieso willst Du, dass ich genau dorthin wieder zurück gehe? Solche Links bitte niemals wieder einsetzen! Wenn ich mein JavaScript wegen der nervigen Werbung deaktiviert habe, nützt mir der Link übrigens erst recht nichts.

Liebe Grüße,

Felix Riesterer.

[Der Martin]

Hi,

So Quasi. Mit "altem" HTML würde ich ja einfach eine Tabelle nehmen, [...]
Da ich eigentlich versuche wo es geht DIV-Boxen statt Tabellen zu verwenden, [...]

warum ein Übel durch ein anderes Übel ersetzen?
HTML bietet mehr als nur das div-Element. Nutze die Elemente, die der Struktur des Inhalts am besten entsprechen. Ein div-Element sollte nur die letzte Zuflucht sein, wenn es partout kein anderes Element gibt, das man sinnvollerweise zum Gruppieren verwenden könnte.

display: table-cell;
display: table-cell;
display: table-row;

Das ist nicht dein Ernst, oder? Du willst wirklich Tabellen mit div-Elementen nachbauen? Dann kannst du auch ebensogut bei den echten Tabellen bleiben.

Ciao,
 Martin

[Matthias Apsel]

Om nah hoo pez nyeetz, finke!

Hoffe mir kann einer Tipps geben, wie ich das löschen kann.

Löschen? - Rechte Maustaste, aus dem Menü "löschen" wählen, zur marginal größeren Sicherheit die shift-Taste drücken, endgültig löschen.

Lösen? - Ich schlage folgende Struktur vor:

<div>   <img>   <img>   <img>   <p> <div>

den img verpasst du vertical-align: bottom und den Text positionierst du absolut.

Matthias

[Felix Riesterer]

Lieber Matthias Apsel,

Ich schlage folgende Struktur vor:
<div>
  <img>
  <img>
  <img>
  <p>
<div>

da bin ich aber entschieden anderer Ansicht!

Liebe Grüße,

Felix Riesterer.

[Matthias Apsel]

Om nah hoo pez nyeetz, Felix Riesterer!

da bin ich aber entschieden !

Bin ich einverstanden.

Matthias