Hulp met basing

**Leone H.** · 11-12-2009, 12:48

Ik ben op dit moment mijn eerste layout aan het basen.
Alles ging goed totdat ik na de header en het menu aan de content moest beginnen.
Ik maak een div aan in de html, geef hem eigenschappen in de css, waaronder een achtergrondkleur en een omlijning. maar hij is gewoon niet te zien als ik hem openen...

De code´s

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl"> 
        <head> 
                <title>Basing</title> 
                 
                <link rel="stylesheet" type="text/css" href="opmaak.css" /> 
        </head> 
         
        <body> 

                <div id="logo"> </div>  
		<div id="icons"> </div>
		
		<ul id="menu"> 
        		<li><a href="#">Home</a></li> 
       			<li><a href="#">Informatie</a></li> 
       			<li><a href="#">Nieuws</a></li> 
 			<li><a href="#">Programmering</a></li> 
      			<li><a href="#">Gastenboek</a></li> 
        		<li><a href="#">Links</a></li> 
			<li><a href="#">Contact</a></li> 	
		</ul> 	
		
		<div id="content"> </div>	
		
        </body> 
         
</html>

Code:

html 
    { 
        background-color: #191919; 
    } 

body 
    { 
        width: 827px; 
	margin: 30px auto; 
    } 

div#logo 
    { 
        background-image: url('images/Header_logo.jpg'); 
        background-repeat: repeat-x; 
        width: 566px; 
        height: 131px; 
 	float: left; 
    }
 
div#icons
    { 
        background-image: url('images/Header_icons.png'); 
        background-repeat: repeat-x; 
        width: 261px; 
        height: 131px; 
 	float: left; 
    }

ul#menu 
    { 
        margin: 0px;  
        list-style: none;
	border-left: 1px solid #ffffff; 
        border-right: 1px solid #ffffff;  
        height:  40px; 
        width: 785px;
	float: left; 
        background-color: #2b649d; 
        background-image: url('images/Menu_background.png'); 
    } 

ul#menu li 
    { 
        float: left; 
        height: 40px; 
    } 

ul#menu li a 
    { 
        display: block; 
        overflow: hidden; 
        height:    40px; 
	padding: 10px 30px 10px 13px;  
        font-family: Arial; 
        color: #ffffff; 
        font-size: 15px;
	font-weight: bold; 
        text-decoration: none;  
    } 

ul#menu li a:hover, ul#menu li.active a, ul#menu li.active a:hover 
    {
	padding: 10px 30px 10px 13px; 
	background-color: #23507c; 
	background-image: url('images/Menu_background_hover.png'); 
        color: #ffffff; 
        height: 20px; 
    } 

div#content 
    { 
	width: 827px;
	border-left: 1px solid #ffffff; 
        border-right: 1px solid #ffffff;
	background-color: #90bfed;   
    }

Wat veroorzaakt het probleem?

Bij voorbaat dank.

**Martin Wijnbergen** · 11-12-2009, 12:51

Ik denk dat je in je content gedeelte even de volgende regel moet toevoegen in je CSS:

Code:

 clear:"both";

Dit zorgt ervoor dat de float van de bovenstaande elementen wordt opgeven.
Aanvullend bericht:
en vergeet ook niet om het content gedeelte een hoogte te geven.

**Leone H.** · 11-12-2009, 13:00

Heel erg bedankt, heb gedaan wat je zei en hij doet het :)
Het spijt me voor zo'n simpele vraag, maar ik kon er zelf gewoon echt niet uitkomen en aangezien dit mijn eerste keer is, leek het me een goed idee om het even hier te vragen.
Dus bedankt nu kan ik weer verder/

Hulp met basing

Hulp met basing

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

Hulp met basing

Hulp met basing

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

Inloggen