Elemente in einem div-Container vertikal ausrichten?

[miccom]

Tag,

weiß jemand warum meine Elemente im boxcontent nicht vertikal nach unten ausgerichtet werden?

CSS:

Code: Alles auswählen

/* smilie-album */
.raised {background: transparent; width:25%; margin:0 auto; float:left;}
.raised p {margin:0px; font-family:'Lucida Grande',Verdana,Arial,Sans-Serif; font-size:10px; font-size-adjust:none; font-style:normal; font-variant:normal; font-weight:normal; line-height:normal;}

.raised .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden;}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
.raised .b2 {background:#D6F6BD; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised .b3 {background:#D6F6BD; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised .b4 {background:#D6F6BD; border-left:1px solid #fff; border-right:1px solid #aaa;}
.raised .b4b {background:#D6F6BD; border-left:1px solid #eee; border-right:1px solid #999;}
.raised .b3b {background:#D6F6BD; border-left:1px solid #ddd; border-right:1px solid #999;}
.raised .b2b {background:#D6F6BD; border-left:1px solid #aaa; border-right:1px solid #999;}

.raised .b1 {margin:0 5px; background:#fff;}
.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
.raised .b3, .raised .b3b {margin:0 2px;}
.raised .b4, .raised .b4b {height:2px; margin:0 1px;}
.raised .b1b {margin:0 5px; background:#999;}
.raised .boxcontent { text-align:center; vertical-align: middle;  display:block; background:#D6F6BD; border-left:1px solid #fff; border-right:1px solid #999; min-height: 100px; height:100px; }

HTML:

Code: Alles auswählen

<div class="raised">
<div class="top"><div class="b1"></div><div class="b2"></div><div class="b3"></div><div class="b4"></div></div>
<div class="boxcontent" style {>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
<div class="bottom"><div class="b4b"></div><div class="b3b"></div><div class="b2b"></div><div class="b1b"></div></div>
</div>

<div class="raised">
<div class="top"><div class="b1"></div><div class="b2"></div><div class="b3"></div><div class="b4"></div></div>
<div class="boxcontent">
<img src="http://www.greensmilies.com/smile/guildwars/gw_assassine000.gif" alt="Assassine" title="Assassine" />
<p>Assassine</p>
</div>
<div class="bottom"><div class="b4b"></div><div class="b3b"></div><div class="b2b"></div><div class="b1b"></div></div>
</div>

<div class="raised">
<div class="top"><div class="b1"></div><div class="b2"></div><div class="b3"></div><div class="b4"></div></div>
<div class="boxcontent">
<img src="http://www.greensmilies.com/smile/guildwars/gw_mage000.gif" alt="Elementarmagier" title="Elementarmagier" />
<p>Elementarmagier</p>
</div>
<div class="bottom"><div class="b4b"></div><div class="b3b"></div><div class="b2b"></div><div class="b1b"></div></div>
</div>

<div class="raised">
<div class="top"><div class="b1"></div><div class="b2"></div><div class="b3"></div><div class="b4"></div></div>
<div class="boxcontent">
<img src="http://www.greensmilies.com/smile/guildwars/gw_mesmer000.gif" alt="Mesmer" title="Mesmer" />
<p>Mesmer</p>
</div>
<div class="bottom"><div class="b4b"></div><div class="b3b"></div><div class="b2b"></div><div class="b1b"></div></div>
</div>

[S2B]

Suchen?

http://www.phpbb.de/viewtopic.php?p=804717#804717

[miccom]

Ich will aber nicht den Container selbst, sondern den Inhalt vertikal nach unten verschieben. Ich sehe mich das ganze schon wieder mit Tabellen machen.

[S2B]

Dafür gilt genau das gleiche:

Horizontale Zentrierung kannst du mit margin: auto lösen, vertikale hingegen funktioniert in CSS bis jetzt fast gar nicht (bei Text mit line-height und vertical-align, innerhalb von Tabellenzellen (<td> und <th>) mit vertical-align oder eben mit absoluter Positionierung).

Traurig, aber wahr... Vielleicht hilft dir das noch weiter: http://xhtmlforum.de/40267-faq-haeufig- ... eufig.html (5. Punkt)

Aber mal zu deiner Box: Ich weiß zwar nicht, wie die Box nachher aussehen soll, aber ich denke, man könnte einiges an Markup weglassen und das ins CSS verfrachten. Gerade leere div's kann man oft komplett mit CSS machen.

[miccom]

Das kann doch nicht sein, dass es wirklich nicht geht - tausende Eigenschaften aber nichts um etwas vertikal auszurichten.

Hier, damit du siehst was ich vorhabe:
http://www.greensmilies.com/smilie-albu ... s-smilies/

Folgendes hätte ich gerne:
- runde Ecken
- einzelne Boxen sollten in der Größe anpassbar sein
- eine Liste wäre mir lieber als eine Tabelle weil ich dann leichter was dazwischen quetschen kann
- alle Elemente in der Box, sollten unten stehen.

Alles bis aufs letztere und der zu große Abstand unter der großen Box gehen ja schon mal.

/e mit margin-top kann ich das Grafik-Element vertikal verschieben, nur da meine Grafiken alle unterschiedlich hoch sind, müsste ich das für jede Box individuell lösen...

/edit

Habe es nun mehr oder weniger hinbekommen, alle Texte und Images sollten am unteren Rand der Box stehen, 3 Testboxen mit doppelte Höhe und/oder Breite sind auch zu sehen:
http://www.greensmilies.com/smilie-albu ... s-smilies/

Ich hoffe es sieht auch überall so aus, habe bisher nur ie6 und ff2 getestet...

[miccom]

http://www.greensmilies.com/smilie-albu ... s-smilies/

Andere CSS Frage: kann mir jemand sagen warum die Boxen im obigen Link, welche je eine Breite von 25% haben, beim Firefox zu 4. nebeneinander beim Internet Explorer aber nur zu 3. nebeneinander ausgegeben werden?

4 x 25% ist ja 100%... beim IE klappt es übrigens wenn ich statt 25% -> 24% angebe!

[S2B]

Unterschiedliches Box-Modell...

Beim IE wird z.B. padding und border zur Breite dazugezählt, sprich die Seite wird bei border-width: 1px z.B. 100% + 2px breit und der Browser bricht um. Normal hilft da sowas weiter:

Code: Alles auswählen

<div style="width: 25%">
  <div style="padding: 2px; border: 1px #000 solid">
    [...]
  </div>
</div>

In vielen Situationen lässt sich sowas aber auch vermeiden, kommt ganz auf den Zusammenhang an...

[miccom]

Ich bekomme das bei meinen Boxen nicht hin Ich verwende ja so eine nette Box mit runden Ecken, ohne Bilder für die Ecken und sobald ich mit padding versuche dies auszugleichen, zerlegt es mir die Boxen.

/edit

Habs anders gemacht! Ich habe für meine 4 Boxen je Reihe ja 450 Pixel in der Breite zur Verfügung. Habe daher den Boxen statt 25% einfach 112px in der Breite verpasst und siehe da, im IE6 und 7 passts. Die 2 Pixel Rest, reichen scheinbar aus.