|
|||
Elemente nebeneinander, auf selber Höhe
Hi,
ich hätte gerne folgenden Aufbau: 7 (verschieden hohe) Bilder nebeneinander mit jeweiligem Titel unter dem Bild, dabei sollen die Titel auf der selben Höhe sein. Ich habe es jetzt über floatende divs gelöst, allerdings werden die Bilder dann an der oberen Kante ausgerichtet und nicht an der unteren. Link zu der Seite: HukePuk | Kollektion Wäre super wenn jemand einen Lösungsansatz hätte! Danke schon mal.
__________________
www.anotherstyle.de |
Sponsored Links |
|
|||
Hat wirklich niemand eine Idee wie man da herangehen könnte?
Muss sonst irgendwie auf Tabellen ausweichen *angst*
__________________
www.anotherstyle.de |
Sponsored Links |
|
|||
Heiko, ich hatte gerade ein inline-block-Beispiel geschrieben und kurz vorm Absenden dein Posting gesehen = Abbruch
Da ich an deiner Meinung interessiert bin, würde ich es trotzdem gern posten. Wäre schön, wenn du mal drüberschauen würdest. Okay? |
|
||||
Klar, auf jeden Fall posten
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
Danke Dir
Code:
<!doctype html> <html lang="de-DE"> <head> <meta charset="utf-8"> <title>Listing</title> <link href="dummy.css" rel="stylesheet" type="text/css" /> <style type="text/css" media="screen, projection"> * { margin: 0; padding: 0; font-family: optima, sans-serif; } html, body { height: 100%; } body { } ul#container { width: 80%; min-height: 100%; margin: 0 auto; border-width: 0 1px; border-style: solid; border-color: #d2d2d2; } ul#container li { width: 150px; display: -moz-inline-box; /* FF lt 3 */ -moz-box-orient: vertical; /* FF lt 3 */ display: inline-block; margin: .5em .5em 0 0; border-width: 0 1px 1px 0; border-style: solid; border-color: #d2d2d2; vertical-align: bottom; background: #e8e8e8; } li a { text-decoration: none; display:block; } p {background: #5e5e5e; } .a {height:160px;} .b {height:120px;} .c {height:150px;} .d {height:50px;} .e {height:75px;} </style> <!--[if IE]> <style type="text/css" media="screen"> body { font-family: 'lucida sans unicode', sans-serif; } ul#container { height:100%; } ul#container li { display: inline; zoom:1; } a img{ border: 0 none; vertical-align:bottom; } </style> <![endif]--> </head> <body> <ul id="container"> <li><a href=""><p>Link</p></a></li><!-- --><li><a href=""><img class="a" src="bild1.jpg" alt="" /></a><p>Legende</p></li><!-- --><li><a href=""><img class="b" src="bild1.jpg" alt="" /></a><p>Unterschrift</p></li><!-- --><li><a href=""><img class="c" src="bild1.jpg" alt="" /></a><p>Unterschrift</p></li><!-- --><li><a href=""><img class="d" src="bild1.jpg" alt="" /></a><p>Unterschrift</p></li><!-- --><li><a href=""><img class="b" src="bild1.jpg" alt="" /></a><p>Unterschrift</p></li><!-- --><li><a href=""><img class="c" src="bild1.jpg" alt="" /></a><p>Unterschrift</p></li><!-- --><li><a href=""><img class="d" src="bild1.jpg" alt="" /></a><p>Unterschrift</p></li><!-- --><li><a href=""><img class="e" src="bild1.jpg" alt="" /></a><p>Unterschrift</p></li> </ul> </body> </html> |
|
||||
Tat sie bei mir auch, daher komme ich erst jetzt zum Antworten: Sieht gut aus (und in HTML 5 )! Entspricht im Prinzip auch dem, was ich nach dem Absenden meines Posts selber zu tippen begann (denn die Variante mit möglichen Zeilenumbrüchen ist natürlich auch interessant). Habe Deinen Code natürlich nur in NN 7 und FX 2 getestet (da alles andere in diesem Fall ja eh ein Selbstgänger ist ), und da funktioniert alles wie es soll.
Aber hast Du beim Testen die Notwendigkeit einer width-Deklaration gesehen, oder ist sie ohne speziellen Grund drin? Ich denke dabei an "Stabilisierungsmaßnahmen" wie diese, die natürlich noch wesentlich weiter geht, aber eben auch zeigt, wie heikel inline-block in FX < 3 letztlich ist (zumindest wenn der Inhalt des betreffenden Elementes einen gewissen Grad der "Einfachheit" übersteigt).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
Yea ziemlich coole Sache!
Vielen Dank euch beiden. Im IE6 habe ich jetzt allerdings noch das Problem, dass es zu breit ist und in zwei Zeilen angezeigt wird (trotz, width:100; der li). Wie könnte ich das lösen?
__________________
www.anotherstyle.de |
Sponsored Links |
|
||||
100px ist zuwenig für einige der Bilder (übrigens kleinskaliert, nicht schön!), da dehnt der IE < 7 aus. Bei der table-Lösung brauchst Du aber eh unter keinen Umständen eine Breite (d.h. kann, muss aber nicht ).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) Geändert von heiko_rs (14.08.2009 um 13:25 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Elemente nebeneinander | Arisko | (X)HTML | 8 | 08.04.2010 21:45 |
Bilder und Elemente nebeneinander | herr-stromberg | CSS | 5 | 17.08.2007 10:30 |
versch. Elemente nebeneinander | Uwe_B | CSS | 3 | 03.03.2007 20:04 |
3 Divs/Box nebeneinander mit gleicher Höhe | emil | CSS | 5 | 29.06.2005 10:37 |
gleiche Höhe für nebeneinander liegende Container | Johnny75 | CSS | 3 | 27.11.2004 16:17 |