PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
t

horisontaal menu text

Door thymen akker op 25-02-2009 16:55
1.213 views
goedendag,

ik ben al een tijdje met mijn site bezig en stuit nou weer op iets raars ik heb al op internet gekeken met

"margin:top;"

en zo maar ik kom er gewoon niet uit
ik ben bezig met een menu..
ik wil de links horizontaal dat is niet zo moeilijk
geen spaties maar een padding er tussen van 20px;
moet ik nog even bekijken
had is dus gedaan menu stond horizontaal maar niet in het midden van boven naar beneden!! :(
dus mijn vraag is hoe krijg ik dat nou goed ?
voor ie FF & safari
groetjes thymen
bedankt!


<a href="#" >Status Profiel</a>
<a href="#">Doneren</a>
<a href="#">Casino</a>
<a href="#">reizen</a>
<a href="#">Ledenlijst</a>
<a href="#">Statistieken</a>
<a href="#">Contact</a>
<a href="#">Uitloggen</a>

ik ben de rest kwijt ( mijn fout)
H
Han eev
25-02-2009 17:00
Om iets horizontaal uitgelijnd te krijgen is ook erg lastig.
Wat je meestal doet is het zelf uitlijnen met margin-top.
Maar jij gebruikt er inline elements voor, dat gaat niet werken ;) (a = inline)


<ul>
<li><a href="#">test</a></li>
</ul>

ul {
margin-top: 10px;
}
ul li {
 float: left;
list-style: none;
}

Zoiets :)
t
thymen akker
25-02-2009 17:01
ok bedankt voor je snelle reactie ik ga even kijken ;)

dus inplaats van <a href""
moet het <u href""?
H
Han eev
25-02-2009 17:04
Nee, kijk goed naar mijn korte voorbeeldje, linkjes van een menu kan je zien als een lijst (ul = lijst, li = lijst item). En met die margin-top ga je het positioneren.
t
thymen akker
25-02-2009 17:05
ja ok maar moet ik dat dan met een div doen?
ik snap je voorbeeldje wel maar ik weet niet hoe je het moet toepassen
gr thymen
H
Han eev
25-02-2009 17:11
Je hebt meestal iets van deze opbouw


<div id="menu">
<ul>
<li><a href="#">BOE</a></li>
<li><a href="#">BOE</a></li>
<li><a href="#">BOE</a></li>
<li><a href="#">BOE</a></li>
(enz...)
</ul>
</div>


Nu kan je het heel makkelijk stylen


#menu {
height: 40px;
}
#menu ul {
margin-top: 10px;
}
#menu ul li {
 float: left;
list-style: none;
}


enz... ;)
Got it?
Eddy E
25-02-2009 18:14
Waarom die <ul><li>?

Je kan je <a> ook gewoon een display: block; float: left; opgeven.

Iets wat jij wilt:


<div class="menu">
<a href="#" >Status Profiel</a>
<a href="#">Doneren</a>
...
<a href="#">Contact</a>
<a href="#">Uitloggen</a>
</div>

div.menu a
 {
 display: block;
 height: 40px;
 padding: 5px; // overal minimaal
 padding-top: 15px; // afhankelijk van lettergrootte
 padding-left: 20px;
 float: left;
 }


Meer heb je dan niet nodig.
Eventueel kan je met text-indent ook nog heel wat bereiken.
Het is maar net wat je er nog meer in wilt.
Die <UL> en <LI> is totaal niet nodig.
Let wel dat ik nu alleen links in een div met de class 'menu' aanspreek. Dat kan je natuurlijk zelf wijzigen.
K
Kay Kay
25-02-2009 18:46
Eddy: NEE!!!
Het ziet er dan wel goed uit, maar dat moet je niet hebben! Het gaat er om dat het ook leesbaar is als er geen stylesheet is. Dus NIET doen wat Eddy zegt. slecht zeer slecht
@Ts: Kijk eens hier
O
Onbekend Onbekend
25-02-2009 21:00
Als de stylesheet niet wordt geladen bij mij druk ik een keer F5, daarvoor hoeft het niet van mij in een lijst te staan.. Maar het is wel daarvoor bedoelt.
K
Kay Kay
25-02-2009 22:30
Tommy schreef op 25.02.2009 21:00
Als de stylesheet niet wordt geladen bij mij druk ik een keer F5, daarvoor hoeft het niet van mij in een lijst te staan.. Maar het is wel daarvoor bedoelt.

Maar het gaat dan ook om browsers die geen css ondersteunen, zoals hele oude mobile browsers.

Reageren

Inloggen om te reageren