Maak je menu met <UL> en <LI>. Dan kan je het ook gelijk onder elkaar zetten.
Je bedoelt de menu items?
Zojuist gedaan, zonder succes?
Alle <p> zijn nu weg, nog steeds niks veranderd. (geupload)
Geen eens elk menu een class met float: left;
.menu1 {float:left;}
.menu2 {float:left;}
dus in de <ul>
<ul class="menu1"></ul>
Dat moet werken!
En nu niet 2 losse <UL> van maken maar gewoon een lijst met 1 ul
Kan ook, het is maar net wat je leuk vind. Toch zijn 2 ul's makkelijker als het echt 2 verschillende menu's zijn. Ivm opmaak etc.
@chef
ik heb mijn class al gebruikt voor mijn rollovers,nog andere mogelijk heden?
@Raymond
Werkt niet?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>div's</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
* {
color:#767676;
margin: 0px;
padding: 0px;
}
h2 {
font: 0.7em verdana;
margin-top: 5px;
}
body {
background: #b1b1b1;
}
#header {
text-align: center;
height: 203px;
min-width: 700px;
background: #385aa6 url('header2.png') no-repeat 50% 0;
}
#container {
width: 100%;
margin-left: auto;
margin-right: auto;
background: url('background.png');
width: 800px;
}
#sidebar {
background: #eca806;
float: left;
padding-top:9px;
padding-left:5px;
width: 200px;
}
#content {
background: #eca806;
margin: 0px 10px 0px 218px;
padding: 9px;
}
#left {
float: left;
width: 190px;
}
#border {
margin: 9px 9px 9px 9px;
background: #eca806;
text-align:center;
min-width: 700px;
}
.rollover a {
margin: 0px 2px;
display:block;
width: 190px;
padding:0px 0px 0px 7px;
text-decoration: none;
background-color: #ecd406;
float: left;
}
.rollover a:hover {
background-color: #825d04;
}
ul li{
display: inline;
list-style-type: none;
}
</style>
<!--[if IE]>
<style>
#header h1 { width: 700px; }
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="left">
<div id="sidebar" class="rollover">
<ul>
<li><a href="#"><b>Hoofdmenu:</b></a></li>
<li><a href="index.php?page=pagina1">Pagina1</a></li>
<li><a href="index.php?page=pagina2">Pagina2</a></li>
<li><a href="index.php?page=pagina1">Pagina3</a></li>
<li><a href="index.php?page=pagina2">Pagina4</a></li>
<li><a href="index.php?page=pagina1">Pagina5</a></li>
</ul>
</div>
<div id="sidebar" class="rollover">
<ul>
<li><a href="#"><b>Hoofdmenu2:</b></a></li>
<li><a href="index.php?page=pagina1">Pagina6</a></li>
<li><a href="index.php?page=pagina2">Pagina7</a></li>
<li><a href="index.php?page=pagina1">Pagina8</a></li>
<li><a href="index.php?page=pagina2">Pagina9</a></li>
<li><a href="index.php?page=pagina1">Pagina10</a></li>
</ul>
</div>
</div>
<div id="content">
<h2>Home</h2><p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sem est, tristique quis, pharetra ut, posuere sed, nibh. Ut nec leo. Ut tempus massa et velit. Nulla semper. Fusce vel mauris. Maecenas blandit, enim eu rhoncus vestibulum, nunc risus laoreet purus, sed varius ipsum orci rhoncus nulla. In hac habitasse platea dictumst. Pellentesque hendrerit massa at ante. Aenean lectus risus, blandit quis, aliquet ut, fermentum aliquam, massa. Cras vitae tortor eu leo mattis accumsan. Sed tellus enim, suscipit non, scelerisque tincidunt, condimentum sed, nunc. Pellentesque ac erat ac urna mattis ultricies. Nam eu metus sit amet dui facilisis pharetra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent sed tellus. Morbi elementum dignissim pede.<p>
<p>Sed vitae leo. Etiam bibendum. Curabitur pellentesque, risus a tristique cursus, neque dolor tincidunt purus, eu auctor lacus ipsum in nibh. Aliquam venenatis. Ut accumsan. Maecenas euismod hendrerit lacus. Aenean gravida iaculis justo. Quisque mi enim, rutrum quis, gravida non, gravida a, turpis. Vivamus sollicitudin, diam nec varius congue, lorem magna aliquet nisl, vel sagittis lacus quam eget ante. Nulla ac massa ac nisl nonummy mattis. Ut aliquet pede. Nullam quis risus. Integer mollis laoreet nibh. Aliquam ante ante, pulvinar quis, tempus ut, lacinia a, est. Donec nulla sapien, dignissim sed, cursus in, venenatis nec, eros. Mauris magna nisl, placerat at, aliquet ac, eleifend et, metus.
</div>
<div id="border">
<a href="http://www.nibosoft.nl" target="_new">© Nibosoft - productions</a>
</div>
</div>
</body>
</html>
verander al je "padding:" codes eens in "margin:" codes
en ooit gehoord van "position: absolute;" ??
doe dat eens en kijk wat er dan gebeurd!
