Div opmaakprobleem
Geplaatst: 22 jan 2014, 21:27
Beste,
Vroeger postte ik dit soort vragen op het zita forum, maar deze blijkt weg te zijn sinds na vorige zomer, dus ik probeer het hier even
Ik zit met een probleempje waar ik niet helemaal uitraak bij een nieuw websiteproject.
Ik heb de structuur van die bepaalde site af, maar er is 1 ding dat maar niet wil lukken.
De structuur met kleuren vind je op http://www.jave.be/opslag/testsite/ ,dat maakt het wat makkelijker om te volgen.
Het groene en witte vlak (met tekst) zullen in de site uiteindelijk beide wit zijn zodat dit één geheel lijkt.
Daar ligt echter het probleem. Dit zijn 2 divs naast elkaar via een float: left. Deze zitten een een container om ze dus samen te houden. Ik had gehoopt door die container een witte achtergrond te geven dat het geheel dus wit zou zijn, maar helaas komt de roze achtergrond tevoorschijn.
Mijn vraag is dus of iemand een oplossing weet om die achtergrond van die container wit te krijgen.
Alvast bedankt voor de hulp.
CSS
De html
Vroeger postte ik dit soort vragen op het zita forum, maar deze blijkt weg te zijn sinds na vorige zomer, dus ik probeer het hier even
Ik zit met een probleempje waar ik niet helemaal uitraak bij een nieuw websiteproject.
Ik heb de structuur van die bepaalde site af, maar er is 1 ding dat maar niet wil lukken.
De structuur met kleuren vind je op http://www.jave.be/opslag/testsite/ ,dat maakt het wat makkelijker om te volgen.
Het groene en witte vlak (met tekst) zullen in de site uiteindelijk beide wit zijn zodat dit één geheel lijkt.
Daar ligt echter het probleem. Dit zijn 2 divs naast elkaar via een float: left. Deze zitten een een container om ze dus samen te houden. Ik had gehoopt door die container een witte achtergrond te geven dat het geheel dus wit zou zijn, maar helaas komt de roze achtergrond tevoorschijn.
Mijn vraag is dus of iemand een oplossing weet om die achtergrond van die container wit te krijgen.
Alvast bedankt voor de hulp.
CSS
Code: Selecteer alles
/* CSS Bestand */
/* Opmaak sitebasis */
body {
background-color:#f5e7d7;
}
.div_centreer_site {
width: 100%;
}
.div_header {
width: 1150px;
height: 90px;
background-color:#F00;
}
.div_menu_top {
width: 1120px;
height: 30px;
background-color:#000;
text-align: left;
font-weight:bold;
vertical-align: middle;
line-height: 30px; /* Zelfde hoogte als div om tekts te centreren in midden div */
color:#FFF;
padding-left:30px; /* Aftrekken van de breedte van de div */
font-size:15px;
}
a.menu_top:link
{
color:#ffffff;
text-decoration:none;
}
a.menu_top:visited
{
color:#ffffff;
}
a.menu_top:hover
{
color:#ffffff;
text-decoration:underline;
}
a.menu_top:active
{
color:#ffffff;
}
.div_witruimte {
width: 1150px;
height:20px;
background-color:#CC0;
}
.div_inhoud_container {
width: 1150px;
background-color:#FFF;
}
.div_submenu {
width: 320px;
background-color:#0C0;
float:left;
}
.div_inhoud {
width: 810px;
background-color:#FFF;
float:left;
text-align:left;
padding-right:20px; /* Aftrekken van de breedte van de div */
}
.div_footer {
width: 1150px;
height: 20px;
background-color:#000;
clear:both; /* Nodig om deze div onder de floatende divs te krijgen!!! */
}
/* Algemene opmaak */
body
{
font-size:10pt;
font-family:sans-serif;
color:#000000;
margin-top: 0px
}
p{
text-align:left;
}
.foto_rechts
{
float: right;
margin-top:0px;
margin-bottom:10px;
margin-right:0px;
margin-left:20px;
padding:0px;
}
p.submenu_titel{
color:#FFF;
font-weight:bold;
vertical-align:middle;
}
h6 a:link
{
color:#835e26;
text-decoration:none;
}
h6 a:visited
{
color:#835e26;
}
h6 a:hover
{
color:#af7a39;
text-decoration:underline;
}
h6 a::active
{
color:#835e26;
}
h6{
color:#835e26;
font-size:13px;
margin-top:5px;
}
h1{
color:#835e26;
font-size:18px;
margin-bottom:1px;
}
hr{
width:90%;
margin-top:0px;
text-align:left;
margin:0;
}
Code: Selecteer alles
<!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>
<title>WERKVERSIE</title> <meta name="description" content="geen" /> <meta name="keywords" content="geen" /> <meta name="Language" content="Nederlands" /> <meta name="Robots" content="All" /> <meta name = "author" content = "Pieter Dejaeger" /> <meta name="Copyright" content="" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="katarina.css" rel="stylesheet" type="text/css" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="div_centreer_site" align="center">
<div class="div_header"></div><div class="div_menu_top"> <a class="menu_top" href="www.google.be" target="new">Test</a> Test Test Test Test Test Test Test </div><div class="div_witruimte"></div><div class="div_inhoud_container">
<div class="div_submenu"> <br /><br /><br /><br /><br /><br />
</div>
<div class="div_inhoud"><h6><a href="#">Kennismaking » Test 1</a></h6><h1>Titel altijd zelde kleur, hoogte en stijl</h1><hr />
<p><img class="foto_rechts" src="rh.jpg" width="425" height="283" alt="rr" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempus tellus lectus, sed suscipit dolor elementum eu. Fusce vitae quam congue, eleifend tortor nec, bibendum magna. Aenean euismod justo nibh, nec consectetur quam porta non. Aenean aliquam faucibus elit. Maecenas in leo ac mauris blandit pulvinar. Aliquam erat volutpat. Sed vitae gravida magna, vel cursus risus. Proin non mattis erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum justo eget viverra ornare. Maecenas dapibus varius metus, sed volutpat nunc ornare non. Nam feugiat nunc id erat luctus, nec tempus neque tincidunt. Donec cursus molestie tempor. Nunc pellentesque tellus vel tortor tristique laoreet. Praesent nec nisi erat. Curabitur eu massa quis massa sagittis tristique. Fusce a accumsan eros, ut facilisis massa. Nulla auctor mauris augue, et volutpat sapien consequat in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum justo eget viverra ornare. Maecenas dapibus varius metus, sed volutpat nunc ornare non. Nam feugiat nunc id erat luctus, nec tempus neque tincidunt. Donec cursus molestie tempor. Nunc pellentesque tellus vel tortor tristique laoreet. Praesent nec nisi erat. Curabitur eu massa quis massa sagittis tristique. Fusce a accumsan eros, ut facilisis massa. Nulla auctor mauris augue, et volutpat sapien consequat in.</p>
</div>
</div>
<div class="div_footer"></div>
</div>
</body></html>