Ik kan de fout maar niet vinden...

Status
Niet open voor verdere reacties.
J

jorenman

Gebruiker
Lid geworden
27 jul 2013
Berichten
222
HTML: 
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Joren Wouters</title>
</head>
<body>
<div id="header">
<p>Bedrijfsnaam</p>
</div>
<div id="navmenu">
<div class="navmenu">

<ul>
<li><a href="#">Over ons</a>
<ul>
<li><a href="#">Wat doen we?</a></li>
<li><a href="#">Wat leveren we?</a></li>
</li></ul>

<li><a href="#">Het plan</a>
<ul>
<li><a href="#">Producten</a>
<li><a href="#">Paketten</a>
</li></ul>

<li><a href="#">Het idee</a></li>

<li><a href="#">Contact</a></li>

</ul>
</div>
</div>
<div id="body">
<div class="image">
<img src="Naamloos.png">
</div>
<div class="box">
<div class="top">
<p><b>Welkom</b></p>
</div>
<div class="midden">
</div>
</div>

<div class="box2">
<div class="top2">
<p><b>Het plan</b></p>
</div>
<div class="midden2">
</div>
</div>

<div class="box3">
<div class="top3">
<p><b>Wie ben ik?</b></p>
</div>
<div class="midden3">
</div>
</div>

<div class="box4">
<div class="top4">
<p><b>Wat doe ik?</b></p>
</div>
<div class="midden4">

</div>
</div>



</div>

<div id="footer">
<p class="footer">Designed by <i><a href="http://www.silverworx.nl">Silverworx</a></i></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;
}
#header {
margin: 0;
height: 100px;
width: 100%;
}
#header p {
margin-top: 25px;
text-align: center;
line-height: 50px;
font-family: Arial;
font-size: 35;
text-align: center;
}
#navmenu {
margin: 0;
height: 50px;
width: 100%;
background: #0066CC;
float: left;
}
.navmenu {
margin-top: 10px;
margin-left: 27%;
height: 30px;
width: 70%;
background: #0066CC;
padding: 0;
z-index: 100;
}
.navmenu ul {
margin: 0;
padding: 0;
line-height: 30px;
list-style: none;
}
.navmenu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background: #0066CC;
}
.navmenu ul li a {
text-align: center;
font-family: Arial;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #fff;
border: 1px solid #000;
}
.navmenu ul ul {
position: absolute;
visibility: hidden;
top: 32px;
}
.navmenu ul li:hover ul {
visibility: visible;
filter: alpha(opacity:70);
opacity: 0.9;
}
.navmenu ul li:hover ul li a:hover {
background: #CCC;
color: #000;
}
.navmenu a:hover {
color: #000;
}
#body {
margin: 0;
height: 400px;
width: 100%;
float: left;
}
.image {
position: absolute; top: 5px; left: 0px;
height: 423px;
width: 600px;
border: 1px solid #000;
box-shadow: 10px 10px 7px #CCC;
}

.box {
position: absolute; top: 0px; left: 700px;
height: 190px;
width: 225px;
border: 1px solid #000;
border-radius: 10px;
box-shadow: 10px 10px 7px #CCC;
}
.top {
height: 50px;
width: 225px;
border-top: 1px solid #000;
border-radius: 10px;
border-bottom: 1px solid #000;
background: #D0D0D0;
}
.top p {
position: absolute; top: 2px; left: 82px;
font-family: Arial;
font-size: 15;
}
.midden {
height: 140px;
width: 225px;
}

.box2 {
position: absolute; top: 230px; left: 700px;
height: 190px;
width: 225px;
border: 1px solid #000;
border-radius: 10px;
box-shadow: 10px 10px 7px #CCC;
}
.top2 {
height: 50px;
width: 225px;
border-top: 1px solid #000;
border-radius: 10px;
border-bottom: 1px solid #000;
background: #D0D0D0;
}
.top2 p {
position: absolute; top: 2px; left: 82px;
font-family: Arial;
font-size: 15;
}
.midden2 {
height: 140px;
width: 225px;
}

.box3 { 
position: absolute; top: 0px; left: 1050px;
height: 190px;
width: 225px;
border: 1px solid #000;
border-radius: 10px;
box-shadow: 10px 10px 7px #CCC;
}
.top3 {
height: 50px;
width: 225px;
border-top: 1px solid #000;
border-radius: 10px;
border-bottom: 1px solid #000;
background: #D0D0D0;
}
.top3 p {
position: absolute; top: 2px; left: 72px;
font-family: Arial;
font-size: 15;
}
.midden3 {
height: 140px;
width: 225px;
}

.box4 {
position: absolute; top: 230px; left: 1050px;
height: 190px;
width: 225px;
border: 1px solid #000;
border-radius: 10px;
box-shadow: 10px 10px 7px #CCC;
}
.top4 {
height: 50px;
width: 225px;
border-top: 1px solid #000;
border-radius: 10px;
border-bottom: 1px solid #000;
background: #D0D0D0;
}
.top4 p {
position: absolute; top: 2px; left: 72px;
font-family: Arial;
font-size: 15;
}
.midden4 {
height: 140px;
width: 225px;
}
#footer {
margin-top: 20px;
height: 100px;
width: 100%;
background:  #0066CC;
float: left;
}
.footer {
margin-top: 80px;
text-align: center;
font-family: Arial;
font-size: 16;
color: #fff;
}
.footer a, a:visited {
text-decoration: underline;
color: #fff;
}
.footer a:hover {
text-decoration: none;
}

Dit is een HTML en een CSS bestand.
Ik heb alleen een vraagje:
Waarom staat de #body helemaal bovenaan? Ik wil juist dat die onder de #navmenu komt, maar het lukt niet...
Waarschijnlijk zit er ergens in mijn code een fout, waar ik echt helemaal langs kijk.
Wie kan mij helpen?
 
Hoi. Ik probeer met jsfiddle wat uit te zoeken en je te helpen maar linkje is handiger ;)
Wat ik in ieder geval zo die is dat ik body een andere naam zou geven omdat er al een body is. Misschien helpt dat al wat.

update: even html/css bestand van gemaakt en getest. Naam maakt niet veel uit. Ik kijk even verder wat er aan de hand is.
 
Laatst bewerkt:
Typisch, bij mij komt die body div (die ik even page heb genoemd) onder het nav menu.

In ieder geval zou ik op die body div een margin: 0 auto; zetten en max-width: bijv. 960px als je hem in het midden wil hebben. Natuurlijk die float: left dan weghalen.
Maar misschien heb je er een heel ander idee voor :)

En handig; doe bijv. een outline: 1px solid red; bij die body div zodat je beter ziet wat er gebeurt, vind ik vaak handig.
 
Dit bedoel ik dan:
Code: 
<div id="page">
<p>test tekst</p>

Code: 
#page {
margin: 3em auto 0;
height: 400px;
width: 100%;
max-width: 1100px;
outline: 1px solid green;
}

Helpt dat bij jou ook zoals je dat wil?
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan