28172 sujets

CSS et mise en forme, CSS3

[Résolu] Erreur de mise en page CSS

Bonjour à tous,

Voici ma page de styles :


/* CSS Document */

/* Site Général */
body
{
   width: 754px;
   margin: auto;
   margin-top: 15px;
   margin-bottom: 15px;
   background-color:#333333;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:11px;
  
}


/* L'en-tête */
#header
{
   width: 754px;
   height: 115px;
   background-image: url("../css/images/header.jpg");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}

/* Contenu du site */
#content
{
	background-color: white;
	height: auto;
}

#content_header
{
	height: 14px;
	background-image: url("../css/images/content_haut.jpg");
}

#header_banner
{
	margin: 0;
	padding-left: 17px;
	height: 196px;
	width: 736px;
	background-image: url("../css/images/header_banner.jpg");
	background-repeat: no-repeat;
	background-position: center;
}

#services
{
	margin: 0;
	padding: 10px 5px 10px 10px;
	width: 100%;
	height: 147px;
}


#service_1
{
	width: 236px;
	height: 137px;
	padding: 0 8px 0 0;
	background-image: url("../css/images/services_bg.gif");
	background-repeat: no-repeat;
	background-position: center;
	float: left;
}

#box1
{
	padding: 10px 5px 10px 15px;
	width: 478px;
	float: left;
}

#box1_top
{
	height: 21px;
	background-image: url("../css/images/box_haut2.jpg");
	background-repeat: no-repeat;
	background-position: top;
}

#box1_content
{
	background-image: url("../css/images/box_fond.jpg");
	background-repeat: repeat-y;
	height: auto;
	padding: 5px 15px 5px 15px;
	
}

#box1_footer
{
	height: 21px;
	background-image: url("../css/images/box_bas.jpg");
	background-repeat: no-repeat;
	background-position: bottom;
}

#box2
{
	padding: 10px 0 0 5px;
	width: 236px;
	height:auto;
	float: left;
}

#box2_top
{
	height: 21px;
	background-image: url("../css/images/box2_haut.jpg");
	background-repeat: no-repeat;
	background-position: top;
}

#box2_content
{
	background-image: url("../css/images/box2_fond.jpg");
	background-repeat: repeat-y;
	background-position:center;
	padding: 5px 15px 5px 15px;
}

#box2_footer
{
	height: 21px;
	background-image: url("../css/images/box2_bas.jpg");
	background-repeat: no-repeat;
	background-position: bottom;
}

#footer
{
	height: 14px;
	background-image: url("../css/images/footer.jpg");
}

/* Le menu */
ul#menu
{
	margin: 0;
	padding-top: 72px;
	padding-right: 20px;
	text-align: right;
	list-style-type: none;
}

#menu li
{
	display: inline;
	margin: 0 5px;
}

#menu a
{
	color: black;
	font-weight: bold;
	text-decoration: none;
	background-color:inherit;
}

#menu a:hover, #menu a:focus
{
	color: #C70202;
}


Voici ma page index :




<!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="fr" lang="fr">
	<head>
		<title>Welcome to Website</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<style type="text/css">
			<!--
			@import url(css/stylesheet.css);
			-->
		</style>
	</head>
	<body>
    	<div id="header">
        	<ul id="menu">
            	<li><a href="page.html" title="Nom">Menu</a> | </li>
                <li><a href="page.html" title="Nom">Menu</a> | </li>
                <li><a href="page.html" title="Nom">Menu</a> | </li>
                <li><a href="page.html" title="Nom">Menu</a> | </li>
                <li><a href="page.html" title="Nom">Menu</a></li>
            </ul>
        </div>
        <div id="content">
        	
            <div id="content_header">
            </div>
           
            <div id="header_banner">
            </div>
            
            <div id="services">
            	<div id="service_1">
                </div>
                <div id="service_1">
                </div>
                <div id="service_1">
                </div>
            </div>
            
            <div id="box1">
				
                <div id="box1_top">
				</div>
                
                <div id="box1_content">
                
                </div>
                
                <div id="box1_footer">
                </div>
                
			</div>
            
            <div id="box2">
				
                <div id="box2_top">
				</div>
                
                <div id="box2_content">
                
                </div>
                
                <div id="box2_footer">
                </div>
                
			</div>
         
                   
       </div>
       
        <div id="footer">
        </div>
	</body>
</html>


Le probleme est que mes deux derniers div, se placent horsdu div content, je ne comprend pas pourquoi, alors qu les deux précedent header_banner et services se sont placés correctement.

Pourriez-vous me dire quel peut être le probleme ? Et me dire eventuellement quelles autres petites erreurs j'aurais pu commettre ?

Merci davance !
Modifié par 20cents (18 Jun 2009 - 18:24)
Oui oui, il proposait 3 types de solutions.

Notemment celle avec un <hr> avec un clear comme attribut. Mais j'ai préféré opter pour un overflow tout simple. Et valide CSS 2.1 Smiley lol

Encore merci
Sujet clos
Aller à