Div opmaakprobleem

**MabadosS** · 22 January 2014, 22:16

Beste,

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:

/* 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;
}

De html

HTML-code:

<!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>&nbsp;&nbsp;&nbsp;&nbsp;Test&nbsp;&nbsp;&nbsp;&nbsp;Test&nbsp;&nbsp;&nbsp;&nbsp;Test&nbsp;&nbsp;&nbsp;&nbsp;Test&nbsp;&nbsp;&nbsp;&nbsp;Test&nbsp;&nbsp;&nbsp;&nbsp;Test&nbsp;&nbsp;&nbsp;&nbsp;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 &#187 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>

**compuchrisje** · 22 January 2014, 23:17

Hier ga ik straks eens naar kijken, het lijkt me nogal rommelachtig, maar dat is altijd zo als je naar de code van iemand anders kijkt.

**compuchrisje** · 23 January 2014, 00:55

Hou je CSS-bestand apart van je html, dat is overzichtelijker.
Je site centreren kan je het beste door alles in één hoofdcontainer te stoppen en dààr de centreereigenschap aan te geven. Alles wat je binnen die container zet, blijft dan ook binnen de lijntjes en de site-achtergrond blijft waar ze moet zijn: op de achtergrond.

Je had je twee inhoudsdiv's de float: left eigenschap gegeven, voldoende is om die eerste die opdracht te geven en degene die rechts moet blijven staan een marge te geven gelijk of een pixeltje meer dan die eerste kolom (submenu?).
De witruimte erboven heb ik vervangen door een padding van 20 aan de hele inhoudscontainer. Daarin heb ik dus die linker en rechter kolom in geplant.

De CSS:

Code:

@charset "utf-8";
body {
	background-color: #f5e7d7;
}
#hoofdcontainer {
	width: 1150px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFF;
}

#hoofdcontainer #header {
	background-color: #F00;
	height: 90px;
}

#hoofdcontainer #menu #menu {
	width: 1150px;
	text-align: left;
	vertical-align: middle;
	height: 30px;
	background-color: #000;
	line-height: 30px;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
#hoofdcontainer #menu #menu li {
	float: left;
	text-align: center;
	color: #FFF;
	list-style-type: none;
	width: 100px;
}

#hoofdcontainer #menu #menu li a {
	background-color: #000;
	font-weight: bold;
	color: #FFF;
	font-size: 15px;
	text-decoration: none;
}
#hoofdcontainer #menu #menu li a:hover {
	color: #FFF;
	text-decoration: underline;
}

#hoofdcontainer #inhoudcontainer {
	padding-top: 20px;
}

#hoofdcontainer #inhoudcontainer #submenu {
	background-color: #099;
	float: left;
	width: 320px;
}


#hoofdcontainer #inhoudcontainer #inhoud {
	width: 810px;
	padding-right: 20px;
	margin-left: 321px;
}


#hoofdcontainer #voettekst {
	background-color: #000;
	clear: both;
	height: 20px;
}

De HTML:

HTML-code:

<!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>Home</title>
<link href="maba.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="hoofdcontainer">
  <div id="header">header</div>
  <div id="menu">
    <ul id ="menu">
      <li><a href="#">link 1</a></li>
      <li><a href="#">link 2</a></li>
      <li><a href="#">link 3</a></li>
      <li><a href="#">link 4</a></li>
      <li><a href="#">link 5</a></li>
      <li><a href="#">link 6</a></li>
      <li><a href="#">link 7</a></li>
      <li><a href="#">link 8</a></li>
    </ul>
  </div>
  <div id="inhoudcontainer">
    <div id="submenu">
      <ul>
        <li>submenu 1</li>
        <li>submenu 2</li>
        <li>submenu 3</li>
        <li>submenu 4</li>
      </ul>
    </div>
    <div id="inhoud">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. 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. 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.</div>
  </div>
  <div id="voettekst">Voettekst</div>
</div>
</body>
</html>

**MabadosS** · 23 January 2014, 17:27

Danku Compuchrisje.

Uw code ziet er inderdaad wat netter uit. Ik stoor me meestal niet aan de rommelige code aangezien ik normaal de enige ben die ernaar moet kijken ;-)

Ik zie dat u ID gebruikt in plaats van class. Heeft dit enig voordeel? Ik ben altijd gewoon geweest van class te gebruiken, maar misschien is dat wel verouderd.

Alvast heel erg bedankt voor het bekijken en herwerken van de code. Ik zal die van u toepassen op de site in wording!

**compuchrisje** · 23 January 2014, 22:06

Ik zie nu pas dat ik de div voor het menu dezelfde naam heb gegeven als de ul (lijst). Beter is om die naam aan te passen in beide documenten.
Niet alle onderdelen hebben een class nodig hoor, enkel dat wat uitspringt uit de gewone opmaak.
In de CSS zou eigenlijk alles moeten staan dat voor je hele website éénvormig moet zijn, dat vormt dan meteen een soort template. Ik sla dan ook altijd die basis apart op, voor als ik iets anders wil uitproberen zonder de origineeltjes kwijt te raken.
Als je de CSS rangschikt volgens onderdeel van buiten naar binnen, dan is de boel overzichtelijker. Maar da's natuurlijk eigen opinie.

**Spoorzoeker** · 26 January 2014, 00:46

Waar jij last van hebt, dat heet
Valse kolommen in CSS (faux columns)

Kijk hier voor de uitleg:
http://pepijnkoning.nl/valse-kolomme...-faux-columns/ (kan zijn dat deze het niet doet)
http://www.code-sucks.com/css%20layo...x-css-layouts/