Hey Allemaal,

Ik ben bezig met een horizontaal menu, waarbij ik volgens mij display:block nodig heb. Dit is het idee:

Ik heb in een div de teksten(links) staan, waarbij ik er een soort blok omheen wil, met een achtergrond kleur en border left en right. En als je erover heen gaat dat dat gehele blok van kleur veranderd en een link is.

Hoe doe ik dit? Ik heb al op het internet gezocht, ook bij w3schools.org, maar niet kunnen vinden hoe ik dit voorelkaar krijg.

Alvast bedankt!

http://css.maxdesign.com.au/listamatic/horizontal02.htm
listamatic, duidelijke uitleg over css list menus.

Origineel gepost door Ivo van Zon

Hoeft niet eens display:block bij hoor, je kan gewoon background instellen met padding waardoor je vanzelf een mooi block krijgt..

Maar ik wil dat als je op het lbok klikt dat je dan ook naar de desbetreffende link gaat en hovered!

Origineel gepost door Edwin P.

http://css.maxdesign.com.au/listamatic/horizontal02.htm
listamatic, duidelijke uitleg over css list menus.

Heel erg bedankt, nog 1 vraagje, zal wel makkelijk zijn en zal het wel over me hoofd zien, maar hoe krijg ik het zo dat de tekst in het midden staat, kheb namelijk hogere buttons

padding-top/bottom ? van #menu li a {....

wat Ivo van Zon zegt zou ik niet doen, dat geeft telkens andere resultaten in verschillende browsers.

display: block maakt een 'blokje' van je link en als je geen breedte opgeeft zal deze zo breed worden als mogelijk is. een aantal links onder elkaar kun je dus zoals hierboven beschreven werd het beste in een list zetten.

Als je dan je links verticaal gecentreerd wilt hebben doe je :

Code:

 li a {
display: block;
width: 150px;
height: 25px;
line-height: 25px;
vertical-align: middle;
}

Die line-height en vertical-align doen het hem :) Die vertical-align doet het ook alleen maar als je een hoogte én line-height opgeeft.

http://css.maxdesign.com.au/listamatic/horizontal02.htm

klopt niet heel veel van :S

een inline object kan geen padding top/bottom bevatten

geef een <b> maar eens een padding top 100px ... doet ie niks mee. tenminste niet overal.

Hier je heb je 2 opties voor een horizontaal menu:

je kunt met alleen A href's in een div werken (optie 1) en met <ul> / <li> werken ( optie 2)

plak dit in je html en zie het verschil ... ;)

in je CSS

/* optie 1 */
.navigatieDiv a {
display:block;
padding:3px 10px;
float:left;
color:#FFF;
text-decoration:none;
white-spacing:nowrap;
background-color:#F00;
border-right:1px solid #FFF;
}
.navigatieDiv a:hover {
color:#000;
background-color:#0F0;
}


/* optie 2 */
.navigatieUL,
.navigatieUL li {
margin:0;
padding:0;
list-style:none;
}
.navigatieUL li {
float:left;
}
.navigatieUL a {
display:block;
padding:3px 10px;
float:left;
color:#FFF;
text-decoration:none;
white-space:nowrap;
background-color:#F00;
border-right:1px solid #FFF;
}
.navigatieUL a:hover {
color:#000;
background-color:#0F0;
}

in je body

<!-- optie 1 -->
<div class="navigatieDiv">
<a href="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>
<a href="#">link 4</a>
</div>

<p>of</p>

<!-- optie 2 -->
<ul class="navigatieUL">
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>

Wel een nadeel met floaten is dat het element waar het inzit niet weet hoe hoog hij moet zijn ( zijn tenslotte zwevende elementen geworden... )

Als hij een vaste hoogte moet hebben dan een heigt meegeven aan het element waar hij inzit. De div of UL in dit geval.

Als je wil dat de hoogte schaalbaar blijft dan bijvoorbeeld een width:100%; en een overflow:hidden; meegeven ...

heel dom maar dan wil hij het netjes omsluiten ... Ik heb het ook niet verzonnen :)

Ga er even mee stoeien en suc6 met je menu, ik lees wel of het gelukt is.