TheCeet
Legacy Member
Hallo iedereen.
Ik probeer een nieuw soort menu te centeren maar het lukt mij niet...
Dus het menu moet zich automatisch kunnen aanpassen aan verschillende soorten schermen. Maw dat het automatisch centert.
Kan iemand mij hier aub mee helpen?
alvast bedankt!
en de css code
Ik probeer een nieuw soort menu te centeren maar het lukt mij niet...
Dus het menu moet zich automatisch kunnen aanpassen aan verschillende soorten schermen. Maw dat het automatisch centert.
Kan iemand mij hier aub mee helpen?
alvast bedankt!
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TimeDiscoVery</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="over.html">Over</a></li>
<li><a href="evenement">Evenement</a>
<ul>
<li><a href="zaal1">Zaal 1</a></li>
<li><a href="zaal1">Zaal 2</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
<li><a href="tickets.html">tickets</a></li>
</ul>
</div>
</body>
</html>en de css code
PHP:
* {
margin:0;
padding:0;
}
#menu{
margin: auto;
position: relative;
background:url(../images/menuBackground.gif) repeat-x left top;
padding-bottom:30px;
}
#menu ul{
margin: 0 auto;
position: relative;
}
#menu li{
position: relative;
float: left;
list-style: none;
}
#menu li a{
width:100px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
background-color: black;
color: white;
}
#menu li a:hover{
background-color: green;
}
#menu ul ul{
position: absolute;
top: 30px;
visibility: hidden;
}
#menu ul li:hover ul{
visibility:visible;
}