HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>8</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#overonsuitwerking").hide();
});
$('#overons').click(function(){
$('overonsuitwerking').slideToggle();
});
</script>
</head>
<body>
<div id="header1">
Naam Bedrijf
</div>
<div id="windows8">
<div class="windows8">
<ul>
<a href="#" id="overons"><li class="overons">
<div id="number">01</div>
<div id="title">
<p class="title">Over ons</p>
<br>
<p class="boxcontent">Hier kunt uw informatie over uw bedrijf neerzetten</p>
</div>
</li></a>
<li class="twitter">
<div id="twitter">
<img src="twitter2.png" width="100px" height="100px">
</div>
<div id="twittercontent">
<p>Twitter</p>
<br>
Contacteer met ons via twitter door op het plaatje te klikken!
</div>
</li>
<li class="services">
<div id="number">02</div>
<div id="title">
<p class="title">Services</p>
<br>
<p class="boxcontent">Hier kunt u bijvoorbeeld uw services neerzetten</p>
</div>
</li>
<li class="images">
<div id="image1">
<img src="bloemen.jpg" height="126px" width="100%">
</div>
<div id="image2">
<img src="water.jpg" height="126px" width="100%">
</div>
</li>
<li class="products">
<div id="number">03</div>
<div id="title">
<p class="title">Producten</p>
<br>
<p class="boxcontent">Hier kunt u uw product neerzetten</p>
</div>
</li>
<li class="images2">
<div id="image3">
<img src="bird.jpg" width="100%" height="126px">
</div>
<div id="image4">
<img src="suikerdonuts.jpg" width="100%" height="126px">
</div>
</li>
<li class="contact1">
<div id="number">04</div>
<div id="title">
<p class="title">Contact</p>
<br>
<p class="boxcontent">Hier kunt u bijvoorbeeld uw services neerzetten</p>
</div>
</li>
<li class="contact2">
<p class="title2">Quick Contact</p>
<form method="post" action="contact.php" id="form">
<textarea name="message" placeholder="Message" id="message"></textarea>
<input name="name" placeholder="Name" id="name">
<input name="email" type="email" id="email" placeholder="Email">
<input id="submit" name="submit" type="submit" value="Send">
</form>
</li>
</ul>
</div>
</div>
<div id="overonsuitwerking">
Hier komt informatie te staan die over de website gaat.
</div>
<div id="footer">
<p class="footer">Designed by <i><a href="http://www.silverworx.nl">Silverworx</a></p>
</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;
}
body {
background: radial-gradient(#484848, #000);
}
#header1 {
margin: 30px auto;
font-family: Verdana;
font-size: 40px;
height: 70px;
width: 20%;
text-align: center;
color: #fff;
}
#windows8 {
margin: 0px auto;
height: 550px;
width: 80%;
padding: 0;
color: #fff;
}
.windows8 {
height: 500px;
width: 85%;
padding: 5px;
margin: 5px auto;
}
#windows8 ul {
margin: 0;
padding: 0;
}
#windows8 li {
height: 125px;
width: 50%;
float: left;
background: #fff;
list-style: none;
}
#windows8 ul li a {
list-style: none;
text-decoration: none;
color: #000;
padding: 0;
}
#windows8 .overons {
background: #8364A2;
}
#windows8 .overons #number {
font-size: 100px;
font-family: Verdana;
color: #404040 ;
margin-left: 3%;
float: left;
}
#windows8 .overons #title {
margin-left: 20%;
margin-top: 10px;
height: 105px;
}
.title {
color: #fff;
font-size: 22px;
font-family: Verdana;
}
.boxcontent {
color: #fff;
font-size: 13px;
font-family: Verdana;
}
#windows8 .twitter {
background: #663399;
}
#windows8 .twitter #twitter {
margin-top: 15px;
margin-left: 5%;
height: 100px;
width: 25%;
}
#windows8 .twitter #twittercontent {
margin-left: 40%;
margin-top: -100px;
height: 100px;
width: 40%;
font-family: Verdana;
font-size: 13px;
}
#twittercontent p {
font-family: Verdana;
font-size: 20px;
color: #fff;
}
#windows8 .services {
background: #99CC33;
}
#windows8 .services #number {
font-size: 100px;
font-family: Verdana;
color: #404040 ;
margin-left: 3%;
}
#windows8 .services #title {
margin-left: 31%;
margin-top: -110px;
height: 105px;
}
.title {
color: #fff;
font-size: 22px;
font-family: Verdana;
}
.boxcontent {
color: #fff;
font-size: 13px;
font-family: Verdana;
}
#windows8 .images #image1 {
margin: 0;
height: 126px;
width: 50%;
}
#windows8 .images #image2 {
margin-left: 50%;
margin-top: -126px;
height: 122px;
width: 50%;
}
#windows8 .products {
background: #CC3333;
}
#windows8 .products #number {
font-size: 100px;
font-family: Verdana;
color: #404040 ;
margin-left: 3%;
}
#windows8 .products #title {
margin-left: 31%;
margin-top: -110px;
height: 105px;
}
.title {
color: #fff;
font-size: 22px;
font-family: Verdana;
}
.boxcontent {
color: #fff;
font-size: 13px;
font-family: Verdana;
}
#windows8 .images2 #image3 {
margin: 0px;
height: 126px;
width: 50%;
}
#windows8 .images2 #image4 {
margin-left: 50%;
margin-top: -126px;
height: 122px;
width: 50%;
}
#windows8 .contact1 {
background: #707070;
}
#windows8 .contact1 #number {
font-size: 100px;
font-family: Verdana;
color: #404040 ;
margin-left: 3%;
}
#windows8 .contact1 #title {
margin-left: 31%;
margin-top: -110px;
height: 105px;
}
.title {
color: #fff;
font-size: 22px;
font-family: Verdana;
}
.boxcontent {
color: #fff;
font-size: 13px;
font-family: Verdana;
}
#windows8 .contact2 {
background: #505050;
}
#windows8 .contact2 #title {
margin-left: 2%;
margin-top: 5px;
height: 110px;
}
.title2 {
margin: 5px;
font-size: 20px;
font-family: Verdana;
color: #fff;
}
#form {
height: 100px;
width: 100%;
}
#message {
margin-top: 5px;
margin-left: 1%;
height: 70px;
width: 50%;
float: left;
background: #686868;
color: #000;
border: 1px solid #000;
outline: none;
}
#name {
margin-top: 5px;
margin-left: 3%;
height: 15px;
width: 40%;
outline: none;
background: #686868;
color: #000;
border: 1px solid #000;
}
#email {
margin-top: 5px;
margin-left: 3%;
height: 15px;
width: 40%;
outline: none;
background: #686868;
color: #000;
border: 1px solid #000;
}
#submit {
margin-left: 23.5%;
margin-top: 5px;
height: 25px;
width: 20%;
color: #fff;
background: #686868;
text-shadow: 1px 1px 1px #999;
opacity: 0.8;
outline: none;
font-family: Arial;
font-size: 15px;
border: 1px solid #000;
}
#submit:hover {
opacity: .5;
}
#overonsuitwerking {
margin: 0;
height: 250px;
width: 100%;
font-family: Verdana;
font-size: 15px;
color: #fff;
background: #fff;
}
#footer {
text-align: center;
margin: 0;
height: 150px;
font-family: Verdana;
font-size: 15px;
color: #fff;
border-top: 1px solid #000;
}
#footer a {
color: #fff;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
#footer .footer {
margin-top: 100px;
}Dit is een HTML (met Javascript erin) en een CSS bestand.
Ik ben 16 jaar en ik ben Javascript en jQuery heel hard aan het leren.
Met dit script wil ik bereiken als je op #overons klikt dat dan #overonsuitwerking tevoorschijn (naar beneden slidet) komt, maar dat werkt niet op een of andere manier, kan iemand mij helpen?
