[CSS] Vertical-align in DIV

[Verwijderd]

*knip*

Ik wil mijn logo.gif en de twee taalkeuzes onderaan de DIV, maar het lukt me maar niet. Ik kan dit wel realiseren via line-height, maar is dit wel een correcte keuze? Vertical-align: bottom werkt jammer genoeg niet, omdat dit enkel voor inline-elementen geldt.
Wat is dan de beste oplossing?

Bedankt iedereen!

[ Voor 82% gewijzigd door MueR op 16-07-2010 15:49 . Reden: lappen code weg ]

[Bosmonster]

container relative positioneren en je elementen absoluut positioneren met bottom.

[Verwijderd]

Bosmonster schreef op vrijdag 16 juli 2010 @ 15:44:
container relative positioneren en je elementen absoluut positioneren met bottom.

Heb alles met floats gedaan, heb nu niet echt zin om alles te veranderen .

[bakakaizoku]

Verwijderd schreef op vrijdag 16 juli 2010 @ 15:47:
[...]


Heb alles met floats gedaan, heb nu niet echt zin om alles te veranderen .

Dan houdt het al gauw op.. Wbt je logo.gif, die zou je nog eventueel als background-image kunnen instellen en background-position: bottom en background-repeat: no-repeat kunnen meegeven, maar dan moet je alsnog die taalkeuzes daar neer zetten via absoluut gealignde elementen.

[Bosmonster]

Verwijderd schreef op vrijdag 16 juli 2010 @ 15:47:
[...]

Heb alles met floats gedaan, heb nu niet echt zin om alles te veranderen .

Hoef je niks voor te veranderen. Floats is iets heel anders.

[MueR]

Sorry, 160 regels code dumpen en vragen 'hoe krijg ik dit nu zo' doen we hier niet aan. Probeer het eens met enkel relevante code, of bijvoorbeeld een online testcase.

[NoFearWizz]

Verwijderd schreef op vrijdag 16 juli 2010 @ 15:43:
[mbr]*knip*[/]

Ik wil mijn logo.gif en de twee taalkeuzes onderaan de DIV, maar het lukt me maar niet. Ik kan dit wel realiseren via line-height, maar is dit wel een correcte keuze? Vertical-align: bottom werkt jammer genoeg niet, omdat dit enkel voor inline-elementen geldt.
Wat is dan de beste oplossing?

Bedankt iedereen!

Als je je container div nu een position:relative geeft (naast je float) en dan op je items die je wilt uitlijnen position:absolute met een bottom: 0; dan staat h et waar je wilt hebben.
en blijf je je floats behouden.Mocht het problemen geven zet je binnen de containing div een nieuwe div die je position:relative geeft en dan daar de rest in met je items die je wilt uitlijnen en geeft je die weer position: aboslute en bottom: 0;

Cascading Stylesheet:

<style>
    .container { float: left; width: 500px; height: 500px; position: relative; }
    .logo { position: absolute; bottom: 0; width: 100px; right: 5px; }
    .links { position: absolute; bottom: 0; width: 120px; right: 160px; }
</style>

HTML:

<div class="container">
    <div class="logo">Logo</div>
    <div class="links">links</div>
</div>

Dit werkt bij mijn in FF en IE 8

[ Voor 19% gewijzigd door NoFearWizz op 16-07-2010 16:02 ]