Beste SD'ers,
ik moet menu horizontaal menu maken met vaste hoogte, dit zou je normalerwijze simpel doen door de 'li' op display:inline in te steleln en 'li a' op display:block te zetten.
Maar deze 2 werken elkaar tegen, en zijn niet crossbrowser heb ik opgemerkt.
Ik wou het oplossen met de float functie te gebruiken maar is ook niet echt browservriendelijk.

Graag hulp,
Frederik VDBerge

li {
float:left;
display:inline;
height:20px; }

li a {
height:20px;
line-height:20px;
vertical-align:center; }

Dat zou het moeten doen :) (Vaste hoogte, tekst in het midden)

Hmmm... werkt niet hoor.. En voor vaste hoogte heb je toch altijd display:block; nodig?

Origineel gepost door Matthijn Dijkstra

li {
float:left;
display:inline;
height:20px; }

li a {
height:20px;
line-height:20px;
vertical-align:center; }

Dat zou het moeten doen :) (Vaste hoogte, tekst in het midden)

Code:

li {
    float: left;
    }

li a {
    display: block;
    line-height: 30px;
    width: 100px;
    }

De float zorgt ervoor dat het naast elkaar komt, dit zou ook kunnen met display: inline maar dan is het geen block meer maar inline (dit doe je meestal voor lijsten die je bijvoorbeeld zo wilt hebben: fruit: appel, peer, banaan).

Dus nu is het alsnog geen block-element, dus ga je de link (a) display: block geven, aangezien a geen block-element is en nu wordt het dus een block-element, en nu moet je dus de hoogte meegeven en met line-height wordt het ook meteen in het midden van je regel gezet

En natuurlijk een width maar een width alleen wanneer je het een vast breedte wilt meegeven! anders geef je het geen width maar padding om het goed leesbaar te maken.

Veel succes,
Bryan

Waarom zou float niet browservriendelijk zijn? Lijkt me nochtans een goede oplossing voor je probleem.

Hiermee kan je de volledig code genereren. Is wel een tijdje geleden dat ik het nog gebruikt heb, dus weet niet of het in de laatste versies van alle browsers goed werkt.

Maar kan je in ieder geval al eens vergelijken.

Zo had ik het ook eerst gedaan (zie beginpost)
maar in sommige IE's werkt het niet goed!

Origineel gepost door B Cheung

Code:

li {
    float: left;
    }

li a {
    display: block;
    line-height: 30px;
    width: 100px;
    }

De float zorgt ervoor dat het naast elkaar komt, dit zou ook kunnen met display: inline maar dan is het geen block meer maar inline (dit doe je meestal voor lijsten die je bijvoorbeeld zo wilt hebben: fruit: appel, peer, banaan).

Dus nu is het alsnog geen block-element, dus ga je de link (a) display: block geven, aangezien a geen block-element is en nu wordt het dus een block-element, en nu moet je dus de hoogte meegeven en met line-height wordt het ook meteen in het midden van je regel gezet

En natuurlijk een width maar een width alleen wanneer je het een vast breedte wilt meegeven! anders geef je het geen width maar padding om het goed leesbaar te maken.

Veel succes,
Bryan

Hier heb ik wel iets uit gehaald :
de 'li' op display:inline gezet en bij li a een display:block + float:left ;) nu werkt het wel in m'n IE

Origineel gepost door Ingvald Belmans

Hiermee kan je de volledig code genereren. Is wel een tijdje geleden dat ik het nog gebruikt heb, dus weet niet of het in de laatste versies van alle browsers goed werkt.

Maar kan je in ieder geval al eens vergelijken.

Bedankt, opgelost !