Element 200 pixels verplaatsen

Status
Niet open voor verdere reacties.
J

jorenman

Gebruiker
Lid geworden
27 jul 2013
Berichten
222
HTML: 
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Basis-frans.nl | Home</title>
</head>
<body>
<div id="content">
<div id="header">
<div id="inheader">
<div id="logo">
</div>
<div id="navmenu">
</div>
<div id="slogan">
</div>
</div><!-- end #inheader -->
</div><!-- end #header -->
<div id="body">
</div>




</div> <!-- end #content -->
</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;
}
#content {
margin: 10px auto;
width: 70%;
height: 1000px;
background: #999;
}
#header {
margin: 0;
background: #fff;
height: 225px;
width: 100%;
float: left;
}
#inheader {
margin-left: 2%;
margin-right: 2%;
margin-top: 20px;
margin-bottom: 20px;
height: 180px;
width: 95%;
background: #000;
float: left;
}
#logo {
margin-top: 35px;
background: #fff;
width: 15%;
height: 100px;
float: left;
}
#navmenu {
margin-left: 40%;
margin-top: 30px;
width: 50%;
height: 50px;
background: #fff;
}
#slogan {
margin-top: 30px;
margin-left: 30%;
width: 40%;
height: 50px;
background: #fff;
}
#body {
margin-top: 200px;
height: 700px;
width: 100%;
background: #000;
}

Dit is een HTML en een CSS bestand.
Ik wil dat mijn #body 200px van mijn #header af komt te staan, maar als ik margin-top: 200px; invul bij #Body dan gaat heel de #content 200px van de top, hoe zorg ik ervoor dat de #body 200px van mijn #header af gaat?

Ik heb float: left; bij #content al geprobeerd, maar dat zorgde ervoor dat heel de webpagina aan de linkerkant lag en niet meer in het midden.
 
Laatst bewerkt door een moderator:
Waarom maak je een div, die vervolgens "body" noemt?
Dat is vragen om moeilijkheden.

In de HTML structuur is het body-element <body></body> een verplicht onderdeel.
Als je daarnaast een <div> gaat maken en die dan de naam "body" meegeeft,
dan zal elke css-declaratie die je aan body meegeeft, betrekking hebben op het body-element
en niet op div#body.

Ik heb dit nog nooit eerder gezien
en daar is een goede reden voor.

Je hebt nu een div "content" op het hoogste nivo
met daarin de header.
Gebruikelijk is om de naam "content" te reserveren voor de div die een positie inneemt die bij jou nu "body" heet.
 
Sowieso zou ik ID's en HTML-elementen (body, ul, etc.) zoveel mogelijk vermijden, net als specifieke naamgevingen zoals .redLabel.

Die maken het aanpassen van de structuur van een pagina een stuk lastiger en wanneer je ineens besluit om de kleur van de elementen met de klasse .redLabel te wijzigen in blauw dan wekt dat alleen maar verwarring.
 
@Tha Devil

Je opmerking over het vermijden van ID en HTML-elementen begrijp ik niet goed.
Een webpagina zónder HTML-elementen lijkt me een beetje moeilijk, dus dat zal je niet bedoelen......
 
Vermijden in je CSS :)
 
<div id="body"> is legitieme code. Dit levert geen enkel probleem op.
Het klopt wel dat dit verwarring kan geven.

**edit
Je hebt een cross-browser probleempje vermoed ik.
 
Laatst bewerkt:
Ik heb niet uitgezocht waarom mijn versie van Chrome #inheader niet goed toonde, maar het is op te lossen met een border om #header en om #body.
Code: 
#content {
width: 70%;
height: 1000px;
margin: 10px auto;
background: #999;
}
#header {
width: 100%;
height: 220px;
background: #fff;
border: 1px solid #fff;
}
#inheader {
width: 95%;
height: 180px;
margin: 20px auto;
background: #000;
}
#logo {
float: left;
width: 15%;
height: 100px;
margin-top: 35px;
margin-left: 0%;
background: #fff;
}
#navmenu {
float: left;
width: 50%;
height: 50px;
margin-top: 30px;
margin-left: 25%;
background: #fff;
}
#slogan {
float: left;
width: 40%;
height: 50px;
margin-top: 30px;
margin-left: 15%;
background: #fff;
}
#body {
width: 100%;
height: 700px;
margin-top: 200px;
background: #000;
border: 1px solid #000;
}
Tip: Begin elke selector met float, width, height, margin, padding (in deze volgorde) dat leest een stuk prettiger.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan