nicht angemeldet
DIV-Tabelle mit zentrierten Elementen
Hallo,
ich möchte eine "DIV-Tabelle" bauen, bei der die DIVs innerhalb der "Zeilen" horizontal zentriert sind. Ich habe bereits die Tabelle und den Umbruch hin bekommen. D.h. meine Tabelle funktioniert so, dass wenn eine DIV-Zelle nicht mehr in eine Reihe passt, wird umgebrochen und eine neue Zeile angefangen.
Beispiel:
DIV1 | DIV2 | DIV3
DIV4 | DIV5
Es soll aber so aussehen (untere Zeile nochmals zentrieren):
DIV1 | DIV2 | DIV3
DIV4 | DIV5
Aber die DIVS werden linkjsbündig angeordnet, beim Versuch die DIVs innerhalb der Zeile nochmal zu zentrieren komme ich nicht weiter. Und es geht auch nur im Firfox, der IE zeigt die Tabelle zerstückelt an.
Code:
<html>
<head>
<title> DIV Tabelle</title>
<style type="text/css">
div.draggable {
cursor:move;
padding:4px;
background-color: #BBCCDD;
}
</style>
</head>
<body>
<div style="text-align: left; display: table; width:450px; height:450px; overflow:hidden; border:6px; solid #FF0066;">
<div style="text-align: left; float: left; #position: absolute;#top: 50%;#left: 50%;display: table-cell; vertical-align: middle;">
<div id = "divele" class='draggable' style='float: left; vertical-align:text-top;'>divele<br /><img src="dummy.gif" /></div>
<div align="center"><div class='draggable' style='float: left; vertical-align:text-top;'>Name Vorname<br /><img src="dummy.gif" /></div>
<div class='draggable' style='float: left; vertical-align:text-top;'>Name Vorname<br /><img src="dummy.gif" /></div>
<div class='draggable' style='float: left; vertical-align:text-top;'>Name Vorname<br /><img src="dummy.gif" /></div>
<div class='draggable' style='float: left; vertical-align:text-top;'>Name Vorname<br /><img src="dummy.gif" /></div></center>
</div>
</div>
</body>
</html>
-
Nachtrag:
Sollte ich dazu sagen: Ich habe einen speziellen Verwendungszweck. Die Elemente der Tabelle werden mit AJAX gefüllt und in einem Drag&Drop Spiel dynamisch verändert. Mein bisheriges Layout mit Tabelle funktioniert einwandfrei im FF, aber aufgrund gleich mehrerer Probleme mit IE und Scriptaculous (verschluckte Events, falsche Positionsangaben etc.) wäre es wesentlich einfacher, wenn ich das wie oben beschrieben mit DIVs machen könte. Ich hab bisher eine Table im DOM zusammengekleistert und manipuliert. -
Lieber Ben,
DIV1 | DIV2 | DIV3
DIV4 | DIV5das klingt nach inline-block. Du definierst ein äußeres Element, in welchem sich Kindelemente befinden, die inline dargestellt werden. Da Du aber diese Kindelemente als Blöcke darstellen möchtest, brauchst Du eben inline-block. Und das äußere Element kann diese Kindelemente dann in sich zentriert anordnen, wenn Du es auf text-align:center stellst.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Liebe Grüße,
Felix Riesterer.
Vielen Dank. Der Tipp mit dem Inline-Block war genau richtig. Das fertige DIV-Tabellen-Konstrukt, dass das gewünschte Verhalten hat, sieht nun so aus und funktioniert auch mit dem IE:
Grüße,
Ben<html>
<head>
<title> DIV Tabelle</title>
<style type="text/css">
div.draggable {
cursor:move;
padding:2px;
background-color: #BBCCDD;
}
.test {
display: inline-block;
border: 1px solid #000;
margin: 4 5px;
text-align: center;
}</style>
<!--[if lt IE 8]><style>
.iewibl {
display: inline;
}
</style><![endif]-->
<!--[if lt IE 5.5000]><style>
.test {
height: 0;
}
</style><![endif]-->
</head>
<body><div style="display: table; width:700px; height:350px; overflow:hidden; border:1px; solid #FF0066;">
<div style="background-color: #0f0; vertical-align: middle; text-align: center;">
<div id="divele" class='test iewibl draggable'>Name Vorname<br /><img src="dummy.gif" /></div>
<div class='test iewibl draggable'>Name Vorname<br /><img src="dummy.gif" /></div>
<div class='test iewibl draggable'>Name Vorname<br /><img src="dummy.gif" /></div>
<div class='test iewibl draggable'>Name Vorname<br /><img src="dummy.gif" /></div>
<div class='test iewibl draggable'>Name Vorname<br /><img src="dummy.gif" /></div>
<div class='test iewibl draggable'>Name Vorname<br /><img src="dummy.gif" /></div>
<div class='test iewibl draggable'>Name Vorname<br /><img src="dummy.gif" /></div>
<div class='test iewibl draggable'>Name Vorname<br /><img src="dummy.gif" /></div>
<div class='test iewibl draggable'>Name Vorname<br /><img src="dummy.gif" /></div>
</div>
</div></body>
</html>-
Lieber Ben,
Vielen Dank. Der Tipp mit dem Inline-Block war genau richtig.
das freut mich. :-)
Das fertige DIV-Tabellen-Konstrukt
... ist unter semantischen Gesichtspunkten nicht sinnvoll. Es hätten auch einfache Textabsätze getan.
<div style="display: table; width:700px; height:350px; overflow:hidden; border:1px; solid #FF0066;">
Warum bekommt das Teil keine ID, sondern einen inline-Style?
<div style="background-color: #0f0; vertical-align: middle; text-align: center;">
Warum bekommt das Teil keine ID? Wozu musst Du dieses Teil noch in ein anderes packen? Warum lönnte man das vorherige <div> nicht entfernen und seine CSS-Regeln an das <body>-Element vergeben?
<div id="divele" class='test iewibl draggable'>Name Vorname<br /><img src="dummy.gif" /></div>
Hier stünde besser ein <p>-Element, als ein <div>. Die Benennung mit den verschiedenen Klassennamen bleibt davon ja unberührt... nur die Dokumentstruktur hat mehr Sinn!
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
-
-