jonajona25
Gebruiker
- Lid geworden
- 15 okt 2009
- Berichten
- 41
Hallo hier gaat de sirene... het is 12 uur eerste maandag van de maand.. ja sorry het is so maar kom er dus niet uit...
hmm Ik heb een css menu leren maken, wat dingen aangepast .. eerste deed ie het nog netjes nu na een paar layers te hebben verplaatst niet meer. hmm.. Ik heb het ook door een css validator wat uiteraard niet helpt omdat ie dat natuurlijk meteen goedkeurd. wie kan me helpen dat css menu vlot te trekken, juiste cijfers in te voeren waarschijnlijk... en kan dat ook nog eens laten werken in IE...
script html en css zijn bijgevoegd... De scripts zijn hieronder bijgevoegd...
Thx
Jonathan
HTML:
CSS script
hmm Ik heb een css menu leren maken, wat dingen aangepast .. eerste deed ie het nog netjes nu na een paar layers te hebben verplaatst niet meer. hmm.. Ik heb het ook door een css validator wat uiteraard niet helpt omdat ie dat natuurlijk meteen goedkeurd. wie kan me helpen dat css menu vlot te trekken, juiste cijfers in te voeren waarschijnlijk... en kan dat ook nog eens laten werken in IE...
script html en css zijn bijgevoegd... De scripts zijn hieronder bijgevoegd...
Thx
Jonathan
HTML:
HTML:
<html>
<head>
<title>Untitled Document</title>
<!-- TradeDoubler site verification 1750359 -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="main_css.css" type="text/css" rel="stylesheet">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<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>
<body>
<div id="imageholder" class="imageholder"><img src="images/body-image2.gif"></div>
<div id="Layer5">Zoekmachine</div>
<div id="Layer3"></div>
<div id="Layer2" class="Layer2">
<ul id="nav">
<li><a href="#">Waar naartoe?</a>
<ul>
<li><a href="#">Europa</a></li>
<li><a href="#">Noord-Amerika</a></li>
<li><a href="#">Latijns-Amerika</a></li>
<li><a href="#">Africa</a></li>
<li><a href="#">Azië</a></li>
<li><a href="#">Pacific</a></li>
</ul>
</li>
<li><a href="#">Over ons</a>
<ul>
<li><a href="#">Over</a></li>
<li><a href="#">Verder</a></li>
<li><a href="#">Disclaimer</a></li>
</ul>
</li>
</ul>
</div>
<div id="Layer4" style="Layer4" class="Layer4">Advertenties Trade doubler</div>
<div id="Container" style="Container">
<p>Waar wil je naar toe?</p>
<p><img src="images/googlemaps.jpg" width="580" height="290"></p>
</div>
<div id="Layer6">n</div>
</body>
</html>
Code:
/* CSS Document */
body{
background-color: #FFFFFF;
font-family: verdana, helvetica, sans-serif;
font-size:10pt;
}
div.imageholder{
position:absolute;
top:0px;
left:0px;
width: 1007px;
height: 174px;
}
#Layer2{
position:absolute;
left:200px;
top:230px;
width:800px;
height:50px;
}
#Layer3{
background-image:url(images/agd-layer3.gif);
position:absolute;
top:310px;
left:1px;
width:150px;
height:640px;
}
#Layer4{
position:absolute;
left:843px;
top:320px;
width:160px;
height:600px;
background-color:blue;
}
style.Layer4{
font-family:arial;
font-size:6pt;
}
#Layer5{
position:absolute;
left:1px;
top:235px;
}
#Layer6{
position:absolute;
top:930px;
left:200px;
width:600px;
height:auto;
}
#Container{
position:absolute;
top:280px;
left:200px;
width:600px;
height:0px;
text-decoration:none;
font-family:arial;
font-size:19pt;
}
#nav, #nav ul {
padding: 3px 0 0;
margin: 0;
list-style: none;
}
#nav li {
float: left;
width: auto;
}
#nav ul {
position: absolute;
width: auto;
left: -1500px;
}
#nav li:hover ul, #nav li.ie_does_hover ul {
left: auto;
background-position: 0 0;
}
#nav a {
display: block;
margin: 10px 4px 10px 4px;
width:13.35em;
text-decoration: none;
font-family: 'lithos Pro Regular', Arial, Helvetica, sans-serif;
font-size: 1em;
text-align:center;
}
ul a{
font-weight: bold;
color: blue;
cursor: default;
}
ul ul a:link, ul ul a:visited{
font-weight: normal;
color:yellow;
cursor: pointer;
}
ul ul a:hover, ul ul a:active{
font-weight: normal;
color:red;
cursor: pointer;
}
ul li{
background-image: url(images/button.gif);
border-left: 3px;
}
ul ul li{
background-image: url(images/button.gif);
border-top: 3px;
border-left: 0;
}
/* IE only hack \*/
* html ul li, * html ul ul li{
border-bottom: 10px solid #FFF;
}
* html ul ul li{
border-top: 0;
}
/* Einde IE only hack */
Laatst bewerkt door een moderator:
