Naast elkaar, onder elkaar

Door Manaus op 04-09-2006 20:30

374 views

Waarom zet hij niet alles naast elkaar? ipv onder elkaar


<head>
<style>
#navcontainer { width: 800px; }

#navcontainer ul
{
margin-left: 0;
padding-right: 20px;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a
{
display: inline;
padding: 3px;
width: 100px;
background-color: #036;
border-bottom: 1px solid #eee;
}

#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #369;
width: 150px;
color: #fff;
}

</style>
</head>

<div id="navcontainer">
<ul id="navlist">
<li><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

ArendJan

04-09-2006 20:37

Misschien moet je met float werken? Zomaar een ideetje.... *kuch*

Ponzi

04-09-2006 20:39

Moet het display: inline;-attribuut niet in de UL staan ipv in de A ? dus zoiets als: # navcontainer ul a ?

[edit]@ ArendJan: Wat is dat nu voor onzin? Hij doet het gelijk het hoort via CSS ! Lijsten zijn perfect horizontaal te maken...[/edit]

ArendJan

04-09-2006 20:44

@Ponzi : als je twee vlakken naast elkaar wilt positioneren moet je echt met float werken, of ik ben gek, dat kan ook... :P

Ponzi

04-09-2006 20:45

[offtopic]
Hij positioneert geen 2 vlakken naast elkaar, hij wilt een horizontale lijst... Dit bestaat, dan moet je niet moeilijk gaan doen !
[/offtopic]

Jan Koehoorn

04-09-2006 22:23

Een lijst met de <li>'s naast elkaar:


ul {
    list-style-type: none;
}

li {
    display: inline;
}

Reageren

Inloggen om te reageren