List => <ul><li>...

Door Alfred - op 13-02-2006 21:35 gewijzigd op 13-02-2006 21:36

1.884 views

Hoi

Een probleempje met een menuutje hier...

Ik heb de volgende code:

<div id="menu">
<ul>
<li><a href="#" class="menu-button">Home</a></li>
<li><a href="#" class="menu-button">Over mij</a></li>
<li><a href="#" class="menu-button">Foto's</a></li>
<li><a href="#" class="menu-button">Gastenboek</a></li>
<li><a href="#" class="menu-button">Contacteer</a></li>
</ul>
</div>

CSS:

#menu {
margin-top: 238px;
text-align: center;
}
li {
list-style: none;
margin: 2px;
display: inline;
width: 200px;
}
.menu-button {
padding: 3px;
border: 1px solid #999999;
background-color: #EEEEEE;
text-align: center;
color: #666666;
font-weight: bold;
text-decoration: none;
}
.menu-button:hover {
color: #000000;
font-weight: bold;
background-color: #CCCCCC;
text-decoration: none;
}

Alles werkt perfect, alleen zou ik graag hebben dat elk menu blokje 200px breed is. Enkel lukt dit niet goed... Tips? (:

Thanks (;

Winston Smith

13-02-2006 21:37

display: block;
width: 200px;

Alfred -

13-02-2006 21:40

Krijg ik ze op deze manier ook naast elkaar dan? (;
Net wat geknoeid, de breedte is dan aanpasbaar, maar ik krijg alles onder elkaar dan :/

Winston Smith

13-02-2006 21:42 gewijzigd op 13-02-2006 21:43

Je kan de li floaten met float: left;

edit:

li {
float: left;
display: block;
width: 200px;
}

Jan Koehoorn

13-02-2006 21:54

Met display block krijg je ze niet naast elkaar.

Alfred -

13-02-2006 21:54

Ik mis nog ergens een bal, want het lukt me niet.
Als ik jouw code toevoeg op de menu-button class, lukt dit ongeveer. Enkel doet IE dan moeilijk, door er een regel of 10 wit onder te plaatsen... :/

Winston Smith

13-02-2006 21:55

Jan Koehoorn schreef op 13.02.2006 21:54
Met display block krijg je ze niet naast elkaar.

Ook niet met float? :s

Jan Koehoorn

13-02-2006 22:09 gewijzigd op 13-02-2006 22:11

Ik heb even een werkend voorbeeld voor je gemaakt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">;
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>
ul.menu li {
list-style: none;
margin: 2px;
display: inline;
background: #ddd;
float: left;
width: 200px;
}
</style>
</head>

<body>
<ul class="menu">
<li>een</li>
<li>twee en drie</li>
<li>vier</li>
</ul>
</body>
</html>

edit: online voorbeeld

Kalle P

13-02-2006 22:09

Probeer dit eens

#menu ul{
width:200px;
}

Jan Koehoorn

13-02-2006 22:13

Mijn voorbeeld net getest in IE6, FF1.5 en Opera 8.5: werkt in al deze browsers.

Alfred -

13-02-2006 22:21

Je voorbeeld ziet er goed uit Jan, bedankt!
Ik ga het morgen nog eens allemaal rustig bekijken, en dan laat ik weten of het hier in orde geraakt (;

Reageren

Inloggen om te reageren