HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>10</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#navmenu1hover").hide();
$("#navmenu2hover").hide();
})
$(document).ready(function(){
$("#listitemhover").hover(function(){
$("#navmenu1hover").fadeIn(1000);
});
});
$(document).ready(function(){
$("#listitem2hover").hover(function(){
$("#navmenu2hover").fadeIn(1000);
});
});
</script>
</head>
<body>
<div id="header">
<div id="logo">
</div>
<div id="navmenu">
<ul id="navmenu1">
<li><a href="#">List Item</a></li>
<li id="listitemhover"><a href="#">List Item</a>
<ul id="navmenu1hover">
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
</ul>
</li>
<li><a href="#">List Item</a></li>
<li id="listitem2hover"><a href="#">List Item</a>
<ul id="navmenu2hover">
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
</ul>
</li>
<li><a href="#">List Item</a></li>
</div>
</div>
<div id="line">
<p class="line1">Home</p>
<br>
<p class="line2">Hier een slogan of een kleine omschrijving van uw website/ uw bedrijf</p>
</div>
<div id="body">
</div>
<div id="footer">
</div>
</body>
</html>
HTML:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
margin: 0;
}
p {
margin: 0;
}
#header {
margin: 0;
float: left
width: 100%;
height: 150px;
border: 1px solid #000;
}
#logo {
margin-top: 25px;
margin-left: 3%;
height: 90px;
width: 20%;
border: 1px solid #000;
float: left;
}
#navmenu {
margin-top: 50px;
margin-left: 50%;
border: 1px solid #000;
height: 70px;
width: 40%;
padding: 0;
}
#navmenu1 {
margin: 0;
padding: 0;
list-style: none;
}
#navmenu1 li {
margin: 0;
padding: 10px;
float: left;
text-align: center;
}
#navmenu1 li a {
color: #0088cc;
display: block;
text-decoration: none;
border: 1px solid #000;
}
#navmenu1hover, #navmenu2hover {
margin-top: 10px;
padding: 0;
list-style: none;
}
#navmenu1hover li , #navmenu2hover li {
margin: 0;
width: 100%;
padding: 10px;
float: none;
text-align: center;
}
#navmenu1hover li a , #navmenu2hover li a {
color: #0088cc;
display: block;
text-decoration: none;
border: 1px solid #000;
}
#line {
width: 100%;
background: #076293;
opacity: 0.8;
height: 150px;
float: left;
}
.line1 {
margin-top: 10px;
margin-left: 10%;
font-family: Verdana;
font-size: 50;
color: #fff;
}
.line2 {
margin-left: 15%;
font-family: Verdana;
font-size: 20;
color: #fff;
}Dit is een HTML (met Javascript erin) en een CSS bestand.
Ik ben net begonnen met het leren van Javascript en ik krijg er al een handigheidje in.
Maar ik heb toch een paar vraagjes, die ik maar niet kan oplossen:
Hoe zorg ik ervoor dat #line blijft staan als de #navmenu1hover en #navmenu2hover 'ingefadet' worden?
Bij de list-items van #navmenu1, #navmenu1hover en #navmenu2hover verandert de padding niet als ik dat aangeef, hoe los ik dit op?
Tevens staan de list-items van #navmenu1hover en #navmenu2hover een beetje links van #navmenu1, hoe los ik dat op?
Ook staan de list-items van #navmenu1hover en #navmenu2hover erg ver uit elkaar, margin: 0; in CSS helpt niet, hoe los ik dit op?
Ik weet dat het erg veel vragen zijn, maar ik ben er al een dag mee bezig en ik krijg ze maar niet opgelost.
Ik zou het heel erg fijn vinden als iemand mij zou helpen.
Alvast bedankt!
