✔ vertical-align: bottom; bei div?!

Status
Nicht offen für weitere Antworten.
A

absyrtos

Mitglied
Hallo,

ich habe ein kleines Problem. Ich möchte ganz gerne den Inhalt eines Divs so darstellen, dass er ganz unten ansetzt. Ich hab es mit vertical-align probiert, aber leider funktioniert es nicht. Hat jemand eine Lösung?

Code: 
.normal { 
  width: 184px;
  height: 184px;
  margin: 1px;
  padding: 5px 0 15px 0;
  border: dashed 1px #CCCCFF; 
  font-family: arial, helvetica, sans-serif;
  text-align: center;
  float: left;
}

Code: 
<div class="normal"><a href="index.php?site=new"><img src="images/new" alt="" /><br />Neues Bild</a><br /><i>28.02.2007</i></div>
 
Hi,

bette den Inhalt in ein weiteres DIV .content ein, und positioniere dieses am unteren Elementrand:

Code: 
.normal {
  width: 184px;
  height: 184px;
  margin: 1px;
  padding: 5px 0 15px 0;
  border: dashed 1px #CCCCFF;
  font-family: arial, helvetica, sans-serif;
  text-align: center;
  float: left;
  position:relative;
}

.content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
Code: 
<div class="normal">
     <div class="content">
          <a href="index.php?site=new"><img src="images/new" alt="" /><br />Neues Bild</a><br /><i>28.02.2007</i>
     </div>
</div>
 
Das problem ist, dass immer 4 Divs nebeneinander dargestelt werden und ein div immer ein kleineres Bild drin hat als die anderen drei.

Code: 
<div class="normal"><a href="index.php?site=new"><img src="images/new" alt="" /><br />Neues Bild</a><br /><i>28.02.2007</i></div>
<div class="normal"><a href="index.php?site=new"><img src="images/new" alt="" /><br />Neues Bild</a><br /><i>28.02.2007</i></div>
<div class="normal"><a href="index.php?site=new"><img src="images/new" alt="" /><br />Neues Bild</a><br /><i>28.02.2007</i></div>
<div class="normal"><a href="index.php?site=new"><img src="images/new" alt="" /><br />Neues Bild</a><br /><i>28.02.2007</i></div>
<div class="clear"></div>
 
Und wo ist das Problem?

Ich hab das Szenario mal basierend auf meinem Lösungsvorschlag nachgestellt und in jedem DIV .content eine Grafik eingesetzt, die in jedem der vier DIVs eine unterschiedliche Höhe besitzt, und dennoch wird der "Inhalt" immer am unteren Elementrand positioniert.

Der angehängte Schnappschuß ist im Firefox 2 entstanden und steht repräsentativ für alle Browser.
 

Anhänge

  • test_absyrtos.jpg
    test_absyrtos.jpg
    23 KB · Aufrufe: 88
Hi,

ich weiss momentan nicht, was da bei dir falsch läuft, denn meine Aussage
Der angehängte Schnappschuß ist im Firefox 2 entstanden und steht repräsentativ für alle Browser.
Zum Vergrößern anklicken....
gilt bei mir auch für den IE6.
 
Ich hab bei left:0; das ; vergessen. Ist mir aber nicht sofort aufgefallen, deshalb wurde es im IE6 auch so verschoben. Jetzt geht es aber wirklich in allen Browser. Vielen Dank nochmal :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück