[CSS] tekst alignen binnen een block

[getfirefoxnow]

Bij deze een CSS vraag.

Ik heb een table-cel van 80 bij 55 pixels.
Ik heb hierbinnen tekst staan.
Deze tekst moet aan de bottom uitgelijnd worden.
Deze table-cell moet een button voorstellen.
Daarom geef ik een css class mee: <a href="index.htm" class="link_menu">

De class link_menu ziet er in CSS als volgt uit:

code:

a.link_menu, a.link_menu:link, a.link_menu:visited {
    font-size: 11px;
    color: #333333;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    text-decoration: none;
    height: 55px;
    width: 80px;
    display: block;
}

a.link_menu:hover {
    font-size: 11px;
    color: #333333;
    text-decoration: none;  
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-weight: 100;
    height: 55px;
    width: 80px;
    background-color: #DDDDC6;
    display: block;
}

Om de table cell op een button te doen lijken heb ik de class "display: block" meegegeven.

Dit werkt mooi, maar nu alignt ie de tekst aan de top. Ik wil de tekst aan de bottom hebben.

Ik heb alle instellingen in CSS al geprobeerd om de tekst aan de bottom te krijgen:
- align bottom e.d. werkt niet, waarschijnlijk omdat ie het hele block alignt en niet de tekst die er in zit.
- als je padding/margin bottom op 40px zet verschuift ie niet de tekst maar het hele block naar beneden.

--->> Op de een of andere manier moet de tekst binnen het block op de bottom verschijnen, maar het lijkt muurvast te zitten.

[ Voor 3% gewijzigd door getfirefoxnow op 16-06-2005 21:18 ]

[Rowanov]

Line-height en vertical align?

[getfirefoxnow]

Het is nog niet optimaal, maar ik ben iets verder gekomen.

Dit is de CSS code:

code:

a.link_menu, a.link_menu:link, a.link_menu:visited {
    font-size: 11px;
    color: #333333;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    height: 45px;
    width: 80px;
    display: block;
    line-height: 45px;
    margin: 11px 0px -13px;
    border-bottom: 1px solid #858679;       
}

a.link_menu:hover {
    font-size: 11px;
    color: #333333;
    text-decoration: none;  
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-weight: 100;
    background-color: #DDDDC6;  
    height: 45px;
    width: 80px;
    display: block;
    line-height: 45px;
    margin: 11px 0px -13px;
    border-bottom: 1px solid #858679;   
}

[Rowanov]

Je tekst geen hoogte geven maar wel vertical-align gebruiken.

[getfirefoxnow]

Rowanov schreef op donderdag 16 juni 2005 @ 21:37:
Je tekst geen hoogte geven maar wel vertical-align gebruiken.

Vertical-align werkt niet binnen een block.

Zonder line-height: 45px; plaatst ie em helemaal niet onderaan.

Verder is het nog een heel gezeur om em zowel in firefox als IE werkend te krijgen.

[bolleh]

doe even:

Cascading Stylesheet:

height: 15px;
padding: 40px 0 0 0;

en dan even met die 2 waarden spelen tot je het gewenste resultaat hebt. padding wordt opgeteld bovenop de width/height dus zorg ervoor dat als je cell eerst 55px was dat je dan height+padding=oude height hebt

[getfirefoxnow]

bolleh schreef op vrijdag 17 juni 2005 @ 01:19:
doe even:

Cascading Stylesheet:

height: 15px;
padding: 40px 0 0 0;

en dan even met die 2 waarden spelen tot je het gewenste resultaat hebt. padding wordt opgeteld bovenop de width/height dus zorg ervoor dat als je cell eerst 55px was dat je dan height+padding=oude height hebt

Dit werkt nog beter dan de combinatie margin en line-height.

Om het in ff en ie beide perfect te krijgen is lastig. In IE bedekt het block de hele table cell nu, maar in ff ongever 90%. Om het in beide 100% te krijgen lukt me niet.

Met de volgende code is het gelukt om zowel in ie als ff het block 100% binnen de cell te krijgen (en de tekst gealignt op de bottom).

Cascading Stylesheet:

a.link_menu, a.link_menu:link, a.link_menu:visited {
    font-size: 11px;
    color: #333333;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    width: 80px;
    display: block;
    height: 21px;
    padding: 35px 0 0 0;
}

a.link_menu:hover {
    font-size: 11px;
    color: #333333;
    text-decoration: none;  
    font-family: Verdana,Arial,Helvetica,sans-serif;
    background-color: #DDDDC6;  
    width: 80px;
    display: block;
    height: 21px;
    padding: 35px 0 0 0;
}

[ Voor 37% gewijzigd door getfirefoxnow op 17-06-2005 17:48 ]