[HTML/CSS] Positionering tekst binnen div

[Plague]

Goededag,

Ik zit al een uur te kloten met paddings e.d. binnen een div.

De situatie is zo: ik heb een menu, opgebouwt uit divs onder elkaar, welke een link bevatten.

Deze link bevat een mouse-over effect, maar dat doet er op zich niet echt toe.

Nu is het probleem het volgende:
Ik wil dat de tekst in de div een "top-padding" van 3 pixels heeft. Maw: hij moet 3 pixels vanaf de "baseline" beginnen.

Dit werkt prima in FF en IE7, maar IE6 wil er niet aan. Die gooit die 3 pixels als "lege ruimte" onder die divs.

Een plaatje zegt meer dan 1000 woorden, dus bij deze:


Nu kan je dit oplossen door die padding weg te halen, maar dan staat de tekst niet meer verticaal in het midden van de div.

Daarnaast: hoe geef je een pagina 50 pixels top-marge in IE en FF? In FF werkt "margin-top" prima op het html en body element, maar IE vind dat niet leuk. Hoe is dat op ge lossen?

Alvast bedankt voor de evt. oplossingen!

edit:

Wat code erbij:

Cascading Stylesheet:

.menu_item {
    display: block;
    background-color: #FFFFFF;
    position:relative;
    height: 22px;
    width: 220px;
    margin: 0px;
}

div.menu_item:hover {
    display: block;
    background-color: #FFFFFF;
    position:relative;
    height: 22px;
    width: 220px;
}
a.menu_text:link, a.menu_text:visited {
    display: block;
    color: #474679;
    background-image: url(../images/menu_bg.png);
    background-repeat: no-repeat;
    background-position: left top;
    font-family: Verdana;
    font-weight: bold;
    font-size: 9pt;
    text-align: left;
    margin: 0px 0px 0px 0px;
    padding: 3px 0px 0px 10px;
    text-decoration: none;
    height: 22px !important;
    width: 100%;
}

HTML:

<div class="menu_container">
        <div class="menu_1">
            &nbsp;</div>
        <div class="menu_item">
            <a href="iets.html" class="menu_text">&bull; Melding van overlijden</a></div>
        <div class="menu_item">
            <a href="iets.html" class="menu_text">&bull; Veelgestelde vragen</a></div>
        <div class="menu_item">
            <a href="iets.html" class="menu_text">&bull; Kinderen</a></div>
        <div class="menu_item">
            <a href="iets.html" class="menu_text">&bull; Nazorg</a></div>
        <div class="menu_item">
            <a href="iets.html" class="menu_text">&bull; Contact</a></div>
</div>

[ Voor 39% gewijzigd door Plague op 25-10-2006 17:35 ]

[moozzuzz]

Lijkt je de <ul><li>-constructie niets? Meestal lukt me dat dan wel.

JavaScript:

#menu ul   { margin: 0; padding: 0; z-index: 108; list-style: none; border: none; }
#menu li   { margin: 0; padding: 0; z-index: 108; margin-bottom: 5px; line-height: 200%;}
#menu li a { margin: 0; padding: 0; z-index: 106; left:0; display: block; width: 100%; background-Color: #ddddbb; text-indent: 10px; text-decoration: none; color: #405047; font-weight: bold; background-image: url('pix/bgmenuitem.jpg');}
#menu li a:hover   { color: #f78000; background-color: #eeeecc; background-image: url('pix/bgmenuitemhover.jpg'); }
#menu li a:active  { color: #ff8000; }

Voorbeeldje (uit RL geplukt) zou zonder de margin-bottom aaneengeplakte menu-items moeten hebben. Let niet op de overbodige hoop andere elementen ;^)

[ Voor 4% gewijzigd door moozzuzz op 25-10-2006 17:54 ]

[Plague]

Persoonlijk heb ik een grafhekel aan die constructie. Je gebruikt 'm namelijk voor iets dat helemaal niet zo bedoelt is. Daarnaast vind ik het een erg onoverzichtelijke manier van een menu opbouwen.

[BasieP]

Plague schreef op woensdag 25 oktober 2006 @ 17:56:
Persoonlijk heb ik een grafhekel aan die constructie. Je gebruikt 'm namelijk voor iets dat helemaal niet zo bedoelt is. Daarnaast vind ik het een erg onoverzichtelijke manier van een menu opbouwen.

hoezo niet?
een ul is een unsorted list. Volgens mij heb jij een unsorted list van links, maar dat blijft een unsorted list hoor

[Plague]

BasieP schreef op woensdag 25 oktober 2006 @ 18:10:
[...]

hoezo niet?
een ul is een unsorted list. Volgens mij heb jij een unsorted list van links, maar dat blijft een unsorted list hoor

Echter heb je niet de flexibiliteit die je met div's hebt, waardoor ik het maar een rare oplossing vind voor een probleem die er helemaal niet zou moeten zijn.

[Savantas]

Hoezo heb je niet de flexibiliteit met ul li's? Dan zou ik een bijspijkercursus CSS gaan volgen. Wat maakt het uit om in je css ul#menu_1 li te hebben staan ipv div.menu_item?
En een li komt met gratis bullet!
Niet denigrerend bedoeld, maar je klinkt nu als iemand die gewoon elke td door een divje vervangt...

Overigens is een display: block overbodig bij een div, tenzij je in je css iets onzinnigs als div: display: inline hebt staan.
Verder nog:
margin: 0px 0px 0px 0px; mag gewoon margin: 0; worden, (bij 0 is geen eenheid nodig, dus padding: 3px 0 0 10px; is ook goed.)
Dan nog als ik het zo bekijk heb je een div.menu_item gevolgd door een a.menu_text, kan ook compacter... En voor unieke zaken gebruik je id ipv class

[ Voor 72% gewijzigd door Savantas op 26-10-2006 10:18 ]

[Verwijderd]

Plague schreef op donderdag 26 oktober 2006 @ 09:55:
[...]

Echter heb je niet de flexibiliteit die je met div's hebt, waardoor ik het maar een rare oplossing vind voor een probleem die er helemaal niet zou moeten zijn.

Wat kan je niet met li's wat je wel met div's kan dan?

Anyways, heb je al geprobeerd om je <div> een padding-top van 3px te geven en die van je <a> weg te halen?

Verder zit ik op m'n werk, dus geen tijd om dit diep uit te zoeken atm

[Zoefff]

Plague schreef op donderdag 26 oktober 2006 @ 09:55:
[...]

Echter heb je niet de flexibiliteit die je met div's hebt, waardoor ik het maar een rare oplossing vind voor een probleem die er helemaal niet zou moeten zijn.

Ten eerste is er wel degelijk een probleem, namelijk dat een zoekmachine of braille-interpreter geen idee heeft dát het een menu is, terwijl het met een unordered list al meteen duidelijk is dat het een opsomming van 'iets' is. Ten tweede heb je met een li als blokelement exact, maar dan ook exact dezelfde flexibiliteit als met een div

Maargoed, wat betreft je probleem, zet in de html-code alles eens achter elkaar, dus zonder enters en spaties tussen de divs en anchors. IE ziet dat namelijk als een nieuwe textnode, en wil er dan nog wel eens een stuk witruimte tussengooien.

[Plague]

Het is inmiddels opgelost.

Door de padding op 3 pixels te zetten, en de hoogte van die link (22px) te veranderen in 19px. Nu wordt het in alle browsers correct weergegeven.