Er zit een fout in mijn code, maar waar?

Status
Niet open voor verdere reacties.
J

jorenman

Gebruiker
Lid geworden
27 jul 2013
Berichten
222
HTML: 
<html>
<head>
<title>Silverworx Nederland | Home</title>
<link rel="stylesheet" type="text/css" href="kleinemobiel.css">

</head>
<body>
<div id="logo">
<div class="logo">
     <a href="http://www.silverworx.nl"><img src="silverworxhome.png" height="50px" width="100%"></a>
</div>
</div>
<div id="navmenu">
     <ul>
	     <li class="webdesign"><a href="#" onclick="document.getElementById('webdesign2').style.visibility='visible'">Webdesign</a></li>
		 <div id="webdesign2">
		     Webdesign2
		 </div>	 
	     <li class="webhosting"><a href="#">Webhosting</a></li>
		 <li class="overons"><a href="#">Over ons</a></li>
		 <li class="contact"><a href="#">Contact</a></li>
	</ul>
		 
</div>

<div id="body">
</div>
</body>
</html>
Code: 
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;
background: #999;
}
p {
margin: 0; 
}

#logo {
margin: 0;
width: 100%;
height: 12%;
background: #fff;
float: left;
}
.logo {
margin: 3.5% auto;
width: 32%;
height: 8%;
}
#navmenu {
margin: 0;
padding: 0;
background: #999;
width: 100%;
height: 91.6%;
float: left;
}
#navmenu ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 30;
}
#navmenu ul li a {
text-transform: uppercase;
letter-spacing: 2px;
font-family: Verdana;
display: block;
text-decoration: none;
color: #fff;
}
.webdesign {
margin: 0;
padding-bottom: 10%;
padding-top: 10%;
display: block;
text-align: center;
}
#webdesign2 {
margin: 0;
padding-bottom: 10%;
padding-top: 10%;
display: block;
text-align: center;
background: #fff;
visibility: hidden;
}
.webhosting {
margin: 0;
padding-top: 10%;
padding-bottom: 10%;
display: block;
text-align: center;
border-top: 1px solid #000;
}
.overons {
margin: 0;
padding-top: 10%;
padding-bottom: 10%;
display: block;
text-align: center;
border-top: 1px solid #000;
}
.contact {
margin: 0;
padding-top: 10%;
padding-bottom: 10%;
display: block;
text-align: center;
border-top: 1px solid #000;
}
Dit is een HTML en een CSS bestand.
In het HTML bestand heb ik door middel van de 'onclick' functie ervoor gezorgd dat #webdesign2 pas tevoorschijn komt als je op #webdesign klikt, alleen #webdesign2 staat er al, alleen dan niet met de juiste achtergrondkleur en als je er dan op klikt krijgt ie wel de gegeven achtergrondkleur.
Weet iemand hoe ik ervoor zorg dat #webdesign2 er niet staat, dat ie er pas komt als je op #webdesign klikt?

Mod-edit: Gelieve in het vervolg zelf de tags om je code heen te zetten
 
Laatst bewerkt door een moderator:
Weet iemand hoe ik ervoor zorg dat #webdesign2 er niet staat, dat ie er pas komt als je op #webdesign klikt?
Klik om te vergroten...
Code: 
/* hierboven je reset */
body {
width: 100%;
height: 100%;
background: #999;
}

#logo {
width: 100%;
height: 12%;
background: #fff;
}

.logo {
margin: 3.5% auto;
width: 32%;
height: 8%;
}

#navmenu {
background: #999;
width: 100%;
height: 91.6%;
}

#navmenu ul, #navmenu li {
margin: 0;
padding: 0;
list-style: none;
}

#navmenu li {
padding-top: 10%;
padding-bottom: 10%;
display: block;
text-align: center;
border-top: 1px solid #000;
}

#navmenu a {
display: block;
font-family: verdana, sans-serif;
font-size: 30px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
}

#navmenu #webdesign2 {
width: 100%;
background: #fff;
visibility: hidden;
}
 
Laatst bewerkt:
Dankjewel voor je reactie!
Helaas lost dit het probleem niet echt op, want als je nu bij #webdesign2 er heel veel tekst in doet wordt #webdesign ook automatisch groter...
 
De html / css aangepast en een toggle function erbij gezet.
Code: 
Toggle onder <link> invoegen:
<script>
function toggleElement(id) {
  if(document.getElementById(id).style.display == 'none') {
    document.getElementById(id).style.display = '';
  } else {
    document.getElementById(id).style.display = 'none';
  }
}
</script>

In html tussen #navmenu veranderen
<ul class="menu">
<li class="webdesign">
<a href="javascript:toggleElement('webdesign2')">Webdesign</a>
<div id="webdesign2" style="display:none">
Hier staat een hele grote tekst...
</div>
</li>
Hier komen de volgende <li>...</li> knoppen
</ul>

De css (na de reset):
body {
  width: 100%;
  height: 100%;
  background: #999;
}
a { cursor: pointer; }
a:link, a:visited { text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
a:active, a:focus { outline: 0; outline-style: none; outline-width: 0; }

#navmenu {
  width: 100%;
  background: #999;
}
ul.menu, ul.menu li, ul.menu a, ul.menu div {
  margin: 0;
  padding: 0;
  border: 0;
}
ul.menu, ul.menu li {
  list-style: none;
}
ul.menu {
  border-top: 1px solid #000;
}
ul.menu li {
  float: none;
  width: 100%;
  line-height: 1;
  vertical-align: middle;
  border-bottom: 1px solid #000;
}
ul.menu li, ul.menu a {
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  color: #fff;
}
ul.menu a {
  display: block;
  width: 100%;
  padding-top: 10%;
  padding-bottom: 10%;
}
ul.menu a, ul.menu a:hover {
  text-decoration: none;
}
ul.menu div {
  display: block;
  padding: 5%;
  background: #fff;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  color: #000;
}
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan