[css] verticaal alignen

[Verwijderd]

Ik ben bezig met een site helemaal op te bouwen in DIV's en CSS. Het gaat allemaal goed tot op 1 klein detail na. Ik heb al gezocht op GOT en op google, en er worden allemaal oplossingen gegeven waarmee ik juist niet wil werken (tables, javascript etc.). Het probleem is als volgt, ik heb de volgende code:

code:

<div id="kolomLinks">
    <div class="header">Politie NHN</div>
    <div class="menuDark">Nieuws &amp; Actualiteit</div>
</div>

met als stylesheet:

code:

div.header {
    width: inherit;
    height: 23px;
    padding-left: 9px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #000000;
    vertical-align: bottom;
}

ik wil dus dat de text onderaan de div komt te staan. Met bovenstaande code bereik ik dat dus niet. Ook wanneer ik de text tussen een <span> of nog een <div> zet en hieraan een class verbind die vertical-align: bottom heeft, werkt het nog niet. Zo moeilijk kan het toch niet zijn om simpel een tekst verticaal te alignen

[ Voor 15% gewijzigd door Verwijderd op 13-02-2003 10:11 ]

[Dries Arnolds]

werkt het in geen enkele browser? Of alleen niet in IE?

[Verwijderd]

IE en Mozilla

[ Voor 17% gewijzigd door Verwijderd op 13-02-2003 10:56 ]

[Willem]

Speel eens met margin/padding-bottom en margin/padding-top

[Verwijderd]

Ja dat heb ik nu ook als oplossing, maar ik vind het niet de meest nette oplossing. HEt is toch raar dat je niet "normaal" text verticaal kan alignen

[Willem]

Sja, waarom niet?
Margin en Padding zijn prima elementen om daarvoor te gebruiken

_{Maar ben met je eens daarentegen dat het soms wel raar is, dat als je zegt dat als er vertikaal uitgelijnd moet worden, dat niet gebeurt...}

[Verwijderd]

bouw je toch even een 1-cellige table in? hoewel <table height=val> niet onder alle browsers werkt geloof ik.

[Willem]

Ehm, nee als je lees wat mr. Pietens aan het doen was met CSS en DIVjes dan zijn tables niet aan de orde.

[1st_Ro]

Probeer 's die vertical-align aan de kolomLinks div te hangen ? Dan moet ie de geneste DIVs onder uitlijnen lijkt me ...

[ Voor 7% gewijzigd door 1st_Ro op 13-02-2003 11:34 ]

[Verwijderd]

maar dat wil ik niet, ik wil dat de text in de header div, ge-aligned word aan die hoogte v/d div; dus 23px. Ik heb ook al geprobeer om de text in de header, in nog een div of span te zetten, dus dat hij een block of inline element moet alignen, maar ook dit werkt niet.

[Verwijderd]

vertical-align werkt alleen voor inline elementen.
http://www.dto.tudelft.nl...s/line.htm#vertical-align

Misschien valt dit te proberen:

HTML:

<div id="kolomLinks">
<div class="alle">
    <div class="header">Politie NHN</div>
    <div class="menuDark">Nieuws &amp; Actualiteit</div>
</div>
</div>

.KolomLinks {
position:relative;
}
div.alle{
position:absolute;
bottom:0px;
}

Als iemand trouwens weet wat het css-equivalent is van <td valign="middle">?

[ Voor 16% gewijzigd door Verwijderd op 13-02-2003 11:55 . Reden: Moeite met typen ;) ]

[Civil]

Ik weet niet of je hieraan wat hebt maar je kan in je stylesheet zetten
Ik heb het zelf nooit gebruikt maar wel eens gelezen, en net nog even opgezocht

code:

div.header {
    width: inherit;
    height: 23px;
    padding-left: 9px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #000000;
    vertical-align: bottom;
        display: table-cell;    //wat ervoor zorgt dat hij zich als een tablecell gedraagt
}

[Verwijderd]

Civil, je oplossing werkt alleen in Mozilla. IE pakt hem niet, ik heb het nu met padding opgelost.

[Willem]

Martijn22:
Als iemand trouwens weet wat het css-equivalent is van <td valign="middle">?

vertical-align:middle;

[Civil]

Ik test het idd net en zie dat het idd niet werkt in IE (het blijft een kutbrowser )

[Verwijderd]

Civil schreef op 13 February 2003 @ 12:48:
Ik test het idd net en zie dat het idd niet werkt in IE (het blijft een kutbrowser )

agree on that

[Dries Arnolds]

fleem

maar wel eensch

[Verwijderd]

Oeps, slecht gelezen. Zoiets zou moeten werken:

HTML:

    <div class="header"><div id="test">Politie NHN</div></div>

en stijl:
div.header {
    width: inherit;
    position:relative;
    height: 230px;
    padding-left: 9px;
    background-color: green;
    border-bottom: 1px solid #000000;
    vertical-align: bottom;
        
}
#test{
position:absolute;
bottom:0px;
}

en willem169, je hebt gelijk. Het moet dan wel kennelijk display:table-cell zijn en vertical-align:middle;

edit:
en ja IE kent geen display:table-cell; dus daar werkt het niet in

[ Voor 15% gewijzigd door Verwijderd op 13-02-2003 13:50 ]