Categorieën
kan div niet goed positioneren
daanclasener op 05 februari 2012 #
Hey leden van OMT,
ik ben bezig met een site (alweer), maar nu stuit ik op een probleem..
ik wil graag dit krijgen, ik heb even de css codes in de div's gezet.:
maar op het moment zit ik met dit:
het probleem is dus dat ik het div "tekstvak" niet normaal onder de "header_container" krijg, tenzij ik met position: absolute; ga werken als in het voorbeeld, maar dan rekt het div "content" niet mee..
ik hoop dat jullie begrijpen wat ik bedoel, hier is mijn html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Daan Clasener | HOME</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head></p><p><body>
<div id="container" align="center">
<div id="content" align="center"></p><p> <div id="header_container">
<img src="afbeeldingen/test_header.jpg" id="header_img" width="225" height="180" />
<img src="afbeeldingen/banner.jpg" id="banner_img" width="400" height="160" /></p><p> </div> <!-- header container --></p><p> <div id="tekstvak"></div></p><p> </div> <!-- content -->
</div> <!-- container -->
</body>
</html></p><p>
en mijn css:
@charset "utf-8";
/* CSS Document */</p><p>/*classes + head*/</p><p>body{
background-image: url(../afbeeldingen/BG%20noise.jpg);
}</p><p>/*content*/</p><p>#container{
}</p><p>#content{
background-color: #fff;
width: 800px;
margin-top: -10px;
min-height: 300px;
}</p><p>#header_container{
height: 195px;
width: 800px;
float: left;
}</p><p>#tekstvak{
width: 750px;
min-height: 400px;
background-color: #000;
position: absolute;
margin-top: 230px;
margin-left: 25px;
}
/*inside content*/</p><p>#header_img{
float: left;
margin-top: 5px;
margin-left: 20px;
}</p><p>#banner_img{
float: right;
margin-top: 15px;
margin-right: 45px;
-webkit-box-shadow: 5px 5px 0px 5px #666;
}
alvast bedankt 
Gr. Daan
MichMich op 05 februari 2012 #
Zet even in #content, onder #textvak een divje:
<div style="clear:both"></div>
nickybbb op 05 februari 2012 #
Hij komt niet onder header container omdat je de div van de tekstvlak nog net binnen de div van header container staat.
<div id="tekstvak"></div></p><p> </div>
moet zijn
</div><div id="tekstvak"></div></p><p>
Als ik het zo even uit mijn hoofd zie.
daanclasener op 05 februari 2012 #
@MichMich heb het geprobeert, maar tenzij ik het verkeerd doe, werkt het niet.
@nickybbb nee, want die laatste div in jouw qoute is om #content af te sluiten
EDIT: ik vind het een beetje jammer dat de "Code"-optie van OMT die <p></p> er tussen zet, en het niet gewoon zo laat als dat het is..
nickybbb op 05 februari 2012 #
Zo zou je het ook kunnen doen (niet alle css is afgekort en netjes)
http://pastebin.com/2mbXjY18
daanclasener op 06 februari 2012 #
@MichMich hey bedankt, het werkt! kon alleen geen margin-top/bottom meer doen, dus dat heb ik opgelost door een div aan de onderkant te plaatsen en die een height te geven.
@nickybbb jij ook bedankt
ik begin het steeds beter te begrijpen door jullie thanks!
Gr. Daan
Advertentie
Je kunt alleen reageren met een gratis OMT account.
Log in of registreer.
Inloggen
Over dit topic
Gestart op 05 februari 2012 door daanclasener
Laatste reactie door daanclasener