graag snelle reactie ik heb namelijk een beetje haast
Deze codes heb ik nu opgesteld. De bedoeling is om ervoor te zorgen dat ik de opmaak van het menu bovenaan (het drop out menu) anders moet kunnen maken als het menu aan de linkerkant. Maar nu is het zo dat als ik iets met #menu a verander ook meteen de zooi van het menu boven verander... terwijl dat toch hoort te staan bij #dropdown a ?
De dropdown code heb ik van http://www.sceneone.nl/tips_tricks/drop_down_menu.php (ik heb wel wat weggehaald) maar als ik dat laat staan wordt het een rotzooi;tje .. klopt er niets meer van
weet dus iemand hoe ik de opmaak van beide menuutjes kan splitsen?
HTML:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/html11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script language="JavaScript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" ie_does_hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<head>
<title>Rijksmuseum Amsterdam - Museum van Kunst en Geschiedenis</title>
<link href="rijksmuseum.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"><h1>Rijksmuseum Amsterdam</h1></div>
<div id="menu">
<ul id="dropdown">
<li><a href="#">Nieuws</a>
<ul>
<li><a href="#">Al het nieuws van 2009</a></li>
<li><a href="#">Nieuwsbrieven</a></li>
<li><a href="#">Nieuwsarchief</a></li>
</ul>
</li>
<li><a href="zalenrijksmuseum.html">Zalen</a>
</li>
<li><a href="#">Tentoonstellingen</a>
<ul>
<li><a href="#">Overzicht</a></li>
<li><a href="#">Rijksmuseum Philipsvleugel</a></li>
<li><a href="#">Rijksmuseum Schiphol Amsterdam</a></li>
<li><a href="#">Rijksmuseum Maastricht</a></li>
</ul>
</li>
<li><a href="#">Webwinkel</a>
<ul>
<li><a href="#">Aanbiedingen</a></li>
<li><a href="#">Nieuw</a></li>
<li><a href="#">Boeken</a></li>
<li><a href="#">Schrijfwaren</a></li>
<li><a href="#">Reproducties</a></li>
<li><a href="#">Souvenirs</a></li>
</ul>
</li>
<li><a href="#">Agenda</a>
<ul>
<li><a href="#">Overzicht</a></li>
<li><a href="#">Volgende Maand</a></li>
<li><a href="#">Tot aan December</a></li>
</ul>
</li>
</ul>
</div>
<div id="container">
<div id="sub-section">
<br />
<br />
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="http://www.rijksmuseum.nl/">Rijksmuseum</a></li>
<li><a href="#">Organisatie</a></li>
<li><a href="#">Tourgroepen</a></li>
<li><a href="#">Giften</a></li>
<li><a href="#">Onderwijs</a></li>
</ul>
</div>
<div id="content"><h1>content</h1><br />
hier de inhoud van de site, je verhaaltje<br />
<br />
<br />
<br />
Alle informatie komt hier te staan !
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>
<div id="footer">footer<br />
</div>
</body>
</html>
HTML:
body {
width:80%;
margin:0 auto;
text-align:center;
background:url(img/background.gif);
border:1px solid #FFFFFF;
font-family: verdana, "comic sans ms", arial, hevetica, sans-serif;
font-size:14px;
background-color: #FFFFBB;}
#header,#menu,#content,#sub-section,#footer {
overflow:hidden;
display:inline-block;
border:solid 1px #black;
padding:10px;
}
#header,#menu,#footer {width:97%}
#content,#sub-section {float:left}
#content {width:77%;
text-align: left;
margin: 1px;}
#sub-section {
width:18%;
text-align: left;
}
#content {clear:right}
#footer {
clear:left;
border: 1px solid #FFFFFF}
#container{
width:97%;;
display:block;
}
#dropdown, #dropdown ul {
padding: 3px 0 0 0;
margin: 0;
list-style: none;
}
#dropdown li {
float: left;
width: 180px;
}
#dropdown ul {
position: absolute;
width: 200px;
left: -1000px;
}
#dropdown li:hover ul, #dropdown li.ie_does_hover ul {
left: auto;
background-position: 0 0;
}
#menu {
list-style-type: none;
margin: 0;
padding: 0;
}
#menu a{
color: #000000;
background-color: #FFFF99;
font-family: verdana, "comic sans ms", arial, hevetica, sans-serif;
width: 200px;
text-decoration: none;
padding: 5px;
margin: 5px;
display: block;
}
#menu hover {
background-color: #FFFFFFF;
}
/* IE probleem \*/
* html ul li, * html ul ul li{
border-bottom: 3px solid #FFF;
}
* html ul ul li{
border-top: 0;
}
/* Einde IE probleem */Deze codes heb ik nu opgesteld. De bedoeling is om ervoor te zorgen dat ik de opmaak van het menu bovenaan (het drop out menu) anders moet kunnen maken als het menu aan de linkerkant. Maar nu is het zo dat als ik iets met #menu a verander ook meteen de zooi van het menu boven verander... terwijl dat toch hoort te staan bij #dropdown a ?
De dropdown code heb ik van http://www.sceneone.nl/tips_tricks/drop_down_menu.php (ik heb wel wat weggehaald) maar als ik dat laat staan wordt het een rotzooi;tje .. klopt er niets meer van
weet dus iemand hoe ik de opmaak van beide menuutjes kan splitsen?
Laatst bewerkt:
