[CSS] Vertical-align

[Eswip]

Ik heb het volgende probleem.. Ik geef mijn body een id, en aangezien ik mijn site aan de bovenkant wil laten beginnen geef ik hem een vertical-align: top; mee:

code:

#body {
 text-align: center;
 vertical-align: top;
}

Nu wil ik echter in een andere div, de text in het midden of onderkant.. dus vertical-align: middle of top. Dit werkt echter niet. Ik heb hiervoor al gezocht op google.. het enige wat ze daar zeggen is dat je met line-height moet werken. Echter levert dat in IE nogal wat problemen op voor mij.

Klopt het dat dit echt de enige manier is? Of is er nog een nettere/beter manier? Die wc3 valid is en in IE en FF beide goed staat.

[crisp]

Dat is hoe vertical-align werkt in het table-formatting model, maar niet voor gewone boxes; daar is vertical-align de alignment binnen gegenereerde line-boxes. De hoogte van een line-box wordt o.a. bepaald door line-height:

HTML:

<div style="line-height:50px;border:1px solid red">
  <span style="line-height:15px;vertical-align:top">top</span>
  <span style="line-height:15px;vertical-align:baseline">baseline</span>
  <span style="line-height:15px;vertical-align:bottom">bottom</span>
</div>

top baseline bottom

specificatie

[Eswip]

Ik heb nu dit, maar werkt nog steeds niet...

html:

code:

<div id="top">
    <ul>
        <li class="logo">&nbsp;</li>
        <li class="tab_off"><a href="#">Home</a></li>
        <li class="tab_on"><a href="#">Over ons</a></li>
        <li class="tab_off"><a href="#">Portfolio</a></li>
        <li class="tab_off"><a href="#">Services</a></li>
        <li class="tab_off"><a href="#">Contact</a></li>
    </ul>
</div>

css:

code:

#top {
 background-color: #fff;
 width: 100%;
 height: 91px;
}

#top ul {
 height: 100%;
 margin: 0px;
 padding: 0px;
 list-style-type: none;
}

#top li {
 background-position: bottom;
 display: inline;
 float: left;
 height: 100%;
 margin: 0px;
 padding: 0px;
 text-align: center;
 color: #fff;
 text-transform: lowercase;
 line-height: 91px;
}

#top a {
 font-size: 12px;
 font-family: tahoma, verdana, sans-serif;
 font-weight: bold;
 color: #fff;
 text-decoration: none;
 vertical-align: bottom;
}

.logo {
 width: 225px;
 background: #fff url('../gfx/logo.jpg') no-repeat;
}

.tab_on {
 width: 115px;
 background: #fff url('../gfx/tab_on.jpg') no-repeat;
 line-height: 12px;
}

.tab_off {
 width: 115px;
 background: #fff url('../gfx/tab_off.jpg') no-repeat;
 line-height: 12px;
}

[crisp]

Je anchors overerven de line-height van je li's

[ Voor 35% gewijzigd door crisp op 21-04-2006 00:37 ]

[Eswip]

crisp schreef op vrijdag 21 april 2006 @ 00:37:
Je anchors overerven de line-height van je li's

Dus?? Ik volg je niet helemaal..

Ook als ik mijn #top a een line-height van 12px geef, klopt het nog niet.. ze staan nu steeds in het midden.. ze moeten dus nog verder zakken..

[ Voor 29% gewijzigd door Eswip op 21-04-2006 00:42 ]

[crisp]

Eswip schreef op vrijdag 21 april 2006 @ 00:41:
[...]


Dus?? Ik volg je niet helemaal..

Ook als ik mijn #top a een line-height van 12px geef, klopt het nog niet.. ze staan nu steeds in het midden.. ze moeten dus nog verder zakken..

IE zeker?

[Peter]

crisp schreef op vrijdag 21 april 2006 @ 00:50:
[...]

IE zeker?

Een beetje loze opmerking, het doel van de TS is om het goed te krijgen, niet alleen in firefox, maar ook in Internet Explorer.

[crisp]

.Peter schreef op vrijdag 21 april 2006 @ 08:49:
[...]


Een beetje loze opmerking, het doel van de TS is om het goed te krijgen, niet alleen in firefox, maar ook in Internet Explorer.

Zo loos is dat niet; ik leg uit aan de hand van de specificaties hoe het zou moeten werken en dat werkte bij mij in Firefox ook precies zoals verwacht. Ik had echter gisteren even niet de mogelijkheid om het in IE6 te testen, dus was het gewoon een vraag.
Nu ik het wel in IE6 bekijk zie ik inderdaad dat die er een potje van maakt; weer minpunten voor het bedrijf in Redmond.
Een grote fontsize opgeven op de li's biedt wel wat verbetering, maar een fontsize gelijk aan de lineheight geeft niet het beoogde effect dus je blijft een beetje modderen...

Edit: voor een crossbrowser oplossing zou ik line-height vergeten en de li's gewoon een padding-top geven

[ Voor 7% gewijzigd door crisp op 21-04-2006 08:59 ]

[Eswip]

Er is hier dus geen nette oplossing voor begrijp ik?

Echter is het op dit moment in zowel IE als in FF fucked up, hij zit ongeveer in het midden van de li, terwijl hij onderaan moet.

[crisp]

Eswip schreef op vrijdag 21 april 2006 @ 09:00:
Er is hier dus geen nette oplossing voor begrijp ik?

jawel, zie mijn edit hierboven; gewoon een padding-top op je li zetten