zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Elemente nebeneinander, auf selber Höhe

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.08.2009, 19:01
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.01.2006
Beiträge: 71
Solander befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.08.2009, 08:54
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.01.2006
Beiträge: 71
Solander befindet sich auf einem aufstrebenden Ast
Standard

Hat wirklich niemand eine Idee wie man da herangehen könnte?
Muss sonst irgendwie auf Tabellen ausweichen *angst*
__________________
www.anotherstyle.de
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.08.2009, 09:52
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Dein konkretes Beispiel würde ich folgendermaßen umsetzen: Das ganze als ul auszeichnen, dann hast Du schonmal ein semantisch korrektes Markup. Dann (notgedrungen) ein div um die ul, das display: table; bekommt. Die ul bekommt table-row und li table-cell. Per vertical-align: bottom; wird alles unten ausgerichtet.

Der IE < 8 kann das leider nicht, aber das ist kein großes Problem - er bekommt eine inline-block-Darstellung (die FX < 3 leider nur mit invalidem CSS kann), indem li display: inline; sowie zoom: 1; bekommt. Der Einheitlichkeit zuliebe kannst Du noch white-space: nowrap; verwenden, denn die erstgenannte Variante hat ja ebenfalls keine Umbrüche. Willst Du allerdings welche haben, muss doch eine inline-block-Darstellung her (d.h. statt der erstgenannten table-Lösung).
__________________
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.)
Mit Zitat antworten
  #4 (permalink)  
Alt 14.08.2009, 10:05
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

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?
Mit Zitat antworten
  #5 (permalink)  
Alt 14.08.2009, 10:06
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.)
Mit Zitat antworten
  #6 (permalink)  
Alt 14.08.2009, 10:08
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

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>
Mit Zitat antworten
  #7 (permalink)  
Alt 14.08.2009, 10:21
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Pflicht ruft - Ich komm später nochmals auf diesen Thread zurück.
Mit Zitat antworten
  #8 (permalink)  
Alt 14.08.2009, 11:46
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von EvT Beitrag anzeigen
Pflicht ruft
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.)
Mit Zitat antworten
  #9 (permalink)  
Alt 14.08.2009, 12:17
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.01.2006
Beiträge: 71
Solander befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 14.08.2009, 12:20
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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 12:25 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Elemente nebeneinander Arisko (X)HTML 8 08.04.2010 20:45
Bilder und Elemente nebeneinander herr-stromberg CSS 5 17.08.2007 09:30
versch. Elemente nebeneinander Uwe_B CSS 3 03.03.2007 19:04
3 Divs/Box nebeneinander mit gleicher Höhe emil CSS 5 29.06.2005 09:37
gleiche Höhe für nebeneinander liegende Container Johnny75 CSS 3 27.11.2004 15:17


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:27 Uhr.