Beste SD'ers,

ik heb een div van 200px hoog, met daarin een afbeelding. De afbeelding verschilt in verschillende divs van grootte, maar ze moeten wel onderaan de div komen ipv bovenaan..

Weet iemand hoe ik dit makkelijk kan doen? Zal waarschijnlijk niet heel moeilijk zijn, maar vind niet meteen iets..

Thanks!

Code:

background:url('images/footer.jpg') no-repeat 0% 100%;

Werkt dat niet?

Origineel gepost door gast730

Code:

background:url('images/footer.jpg') no-repeat 0% 100%;

Werkt dat niet?

Het is geen achtergrond afbeelding, het is een afbeelding in een div..

Als je een url geeft, is het wat makkelijker helpen.

Bijlage 1 is zoals het nu is, de afbeelding word in de div automatisch bovenaan geplaatst. Bijlage 2 is hoe het zou moeten zijn, de afbeeldingen worden onderaan de div gezet..

Probeer dit eens in de css van de image:

vertical-align: bottom;

Zou moeten werken!

#divje img{
vertical-align:text-bottom;
}
#divje {
width: 200px;
height: auto;
}

<div id="divje"><img src="plaatje.jpg" alt="plaatje"/></div>

Zoiets?

Wat heeft height: auto; voor zin? Jij wilt dat hij onderaan komt, maar als je height: auto; hebt, dan wordt hij net zo hoog als het plaatje

Beiden bedankt voor de hulp, maar had ik al geprobeert en werkt jammer genoeg niet.
Misschien niet belangrijk maar onder de img staat nog een klein divje met klein lijntje text erin..

Code:

<div style="position:relative; width: 200px; height: 200px;"><img src="/images/bla.jpg" style="position: absolute; bottom: 0; left: 0;" /></div>

Is dit wat je zoekt?

Origineel gepost door S Yilmaz

Code:

<div style="position:relative; width: 200px; height: 200px;"><img src="/images/bla.jpg" style="position: absolute; bottom: 0; left: 0;" /></div>

Is dit wat je zoekt?

Alvast bedankt, maar dit zal niet de oplossing zijn. Zeker niet met positions werken, aangezien er meedere divs komen met een float..

Origineel gepost door Frederik Vdb

Alvast bedankt, maar dit zal niet de oplossing zijn. Zeker niet met positions werken, aangezien er meedere divs komen met een float..

Dan misschien dit?

Code:

<div style="display: table-cell; vertical-align: bottom; text-align: left; height: 200px; width: 200px;"><img src="/images/bla.jpg" tyle="vertical-align: bottom; text-align: left;" /></div>

Origineel gepost door S Yilmaz

Dan misschien dit?

Code:

<div style="display: table-cell; vertical-align: bottom; text-align: left; height: 200px; width: 200px;"><img src="/images/bla.jpg" tyle="vertical-align: bottom; text-align: left;" /></div>

Ook dit verandert niets..
Weet echt niemand de oplossing?

Origineel gepost door Frederik Vdb

Ook dit verandert niets..
Weet echt niemand de oplossing?

A.u.b; http://dev.5dstudio.nl/testcases/div.html

Origineel gepost door Frederik Vdb

Ook dit verandert niets..
Weet echt niemand de oplossing?

Wat veranderd er niet dan?
Hier kan ik weinig mee