[Html/css] Image wil niet onderaan een DIV

[mocean]

Ik ben eindelijk bezig mijn HTML4.01 pagina naar XHTML1.1 om te bouwen.

Nu loop ik tegen een probleempje aan: Ik wil een image onderin een DIV aligned hebben. Op verschillende plaatjes heeft die image een andere hoogte, zo kan ik in die DIV van 210 hoog ook plaatjes zetten met kleinere hoogtes.

Ik heb geprobeerd de image omlaag te zetten met devolgende CSS en HTML:

code:

    <div class="L2">
       [img]"images/1.jpg"[/img]
    </div>

code:

img.titleimage{
  vertical-align: bottom;
}

div.L2{
  float: left;
  width: 140px;
  height: 210px;
  border-right: solid #FF6633 1px;
  background: #CC9933;  
  }

Gewenste effect: www.mocean.nl
Foutieve effect: www.mocean.nl/xhtml

Het gaat dus om het linker plaatje onder het menu. Iemand enig idee hoe het plaatje omlaag te krijgen? Ik heb ook al het plaatje in een apart divje gezet en die een vertical align gegeven, maar dat werkt ook niet.

[ Voor 10% gewijzigd door mocean op 12-10-2004 22:47 ]

[Woudloper]

waarom doe je het niet op de volgende manier?

Cascading Stylesheet:

div.L2 {
  float: left;
  width: 140px;
  height: 210px;
  border-right: solid #FF6633 1px;
  background: #CC9933 url(images/1.jpg) no-repeat left bottom;
}

Hiermee gebruik je het image als achtergrond voor je div en align je het linksonder.

[X-Lars]

Mocht het dynamisch moeten, dan kan het volgens mij ook zo:

Cascading Stylesheet:

img.titleimage {
  position:absolute;
  bottom:0;
}

div.L2 {
  position:relative;
}

Anders is Woudlopers oplossing wel zo makkelijk natuurlijk

[mocean]

X-Lars schreef op 12 oktober 2004 @ 23:06:
Mocht het dynamisch moeten, dan kan het volgens mij ook zo:

Cascading Stylesheet:

img.titleimage {
  position:absolute;
  bottom:0;
}

div.L2 {
  position:relative;
}

Anders is Woudlopers' oplossing wel zo makkelijk natuurlijk

Die /1 in de IMG tag is dynamisch ja Ik ga ff testen...

... het werkt prima! Ik moet nog erg wennen aan oplossingen in CSS, maar bijna is mijn eerste projectje rond, eigen site in XHTML1.1!
(alleen is het nog een mess in firefox)

[ Voor 20% gewijzigd door mocean op 12-10-2004 23:21 ]

[T-MOB]

Mocht je je afvragen waarom "vertical-align" niet werkt. Dat is omdat vertical align regelt hoe een <img> wordt uitgelijnd ten opzichte van huidige regel... Om je een id te geven: testcase