28173 sujets

CSS et mise en forme, CSS3

Problème d'enclipsement de div

Bonsoir tout le monde;

Je rencontre actuellement un problème, ma div corps (id "corps") ne se colorie pas entièrement en rouge, le bas reste en jaune (background de ma div principale "page"), je n'arrive pas a le comprendre car la div "corps" est bien envelopée dans la div "page".

Le resultat ici.

Le code HTML


<html>
<head>
<!-- bla bla -->
</head>

<body>

<div id="site">
	<div id="onglet">
    	<ul>
	  	<li id="current"><a href="index.php">Accueil</a></li>
      		<li><a href="#">Actualites</a></li>
     		<li ><a href="#">Education</a></li>
      		<li><a href="#">Contact</a></li>
    	</ul><!-- fin div onglet-->
    </div>
    
	<div id="page">
    
    	<div id="header">
        	<div id="connexion" >
            <a href="#">S'inscrire</a>
             <input class="pseudo" type="text" size="10"  onfocus="if(this.value == 'Pseudo') this.value='';" 
                   										  onblur="if(this.value== '') this.value= 'Pseudo';" value="Pseudo" />
            <input class="pass "type="password" size="10" onfocus="if(this.value == 'Password') this.value='';" 
                   										  onblur="if(this.value== '') this.value= 'Password';" value="Password" />
            </div><!-- fin div connexion-->
        </div><!-- fin div header-->
        
        <div id="menu">
            <a class="liens_menu" href="#" >Contact</a>
            <a class="liens_menu" href="#" >Education</a>
            <a class="liens_menu" href="#" >Programmation</a>
            <a class="liens_menu" href="#" >Liens</a>
            <div id="search">
            	<input  class="rechercher" type="text" size="10" onfocus="if(this.value == 'Rechercher') this.value='';" 
                												onblur="if(this.value== '') this.value= 'Rechercher';" value="Rechercher" />
             </div><!-- fin div search-->
        </div><!-- fin div menu-->
        
        <div class="corps">
        corps
        	<div class="edito">
            	<div class="titre_edito"></div>
                <div class="contenu_edito"></div>
                <div class="bas_edito"></div>
        	</div><!-- fin div edito-->
        </div><!-- fin div corps-->
        
        <div id="pied_de_page"></div>
        
    </div><!-- fin div page-->
</div><!-- fin div site-->

</body>
</html>


Et le CSS

body{
margin:0px;
background-color:#669900;
/*background-image:url(images/rough.jpg);*/
background-attachment:fixed;
}

#site{
width:750px;
margin:auto; /*centrage*/
}

/*-----------------------------------Onglets------------------------------------------*/
#onglet{
font-size:14;
line-height:normal;
height:37px;;
}

#onglet ul {
margin:0;
padding:5px 0px 0;
list-style:none;
}

#onglet li{
float:left;
background:url("images/menu/png/left.png") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}

#onglet a{
font-size:15px;
vertical-align:middle;
float:left;
display:block;
background:url("images/menu/png/right.png") no-repeat right top;
padding:10px 20px 7px 10px;
text-decoration:none;
font-weight:bold;
color:black;
}

#onglet a{
float:none;
}

#onglet a:hover{
color:white;
}
#onglet #current{
background-image:url("images/menu/png/left_on.png");
padding-left:9px;
}
#onglet #current a {
background-image:url("images/menu/png/right_on.png");
color:white;
padding-bottom:7px;
}
/*-----------------------------------Page-------------------------------------------------------------*/

#page{
border:black solid 1px;
background-color:#FFFF00;
}
/*-----------------------------------Header-----------------------------------------------------------*/
#header{
background-image:url(images/banniere.jpg);
height:150px;
position:relative;
border-bottom:1px white solid;
}

#connexion{
position:absolute;
right:1px;
top:1px;
}

#connexion .pseudo, .pass{
background-color:#333333;
color:white;
border:black solid 1px;
}

#connexion a{
font-size:14px;
text-decoration:none;
color:grey;
}

#connexion a:hover{
font-size:14px;
text-decoration:underline;
color:white;
}

/*-----------------------------------Menu--------------------------------------------------------------*/
#menu{
background-image:url(images/fond_menu.jpg);
height:27px;
position:relative;
border-bottom:white 1px solid;
}

#menu a{
padding-left:3px;
padding-right:3px;
text-decoration:none;
color:#333333;
font-size:18px;
display:block;
float:left;
vertical-align:middle;
border-right:white solid 1px;
text-align:center;
vertical-align:middle;
padding: 2px 10px 0px 10px;
height:25px;
}

#menu a:hover{
background-image:url(images/fond_menu_over.jpg);
color:white;
}

#search{
position:absolute;
right:3px;
top:0px;
}

.rechercher{
font-size:13px;
vertical-align:middle;
border:black solid 1px;
margin-top:3px;
}
/*-----------------------------------Corps--------------------------------------------------------------*/

.corps{
background-color:red;
}

/*-----------edito-----------*/
.edito{
margin-top:50px;
margin-bottom:50px;
height:100px;
background-color:white;
}

.titre_edito{
}

.contenu_edito{
}

.bas_edito{
}



/*-----------------------------------Pied_de_page-------------------------------------------------------*/
#pied_de_page{
}



Merci d'avance pour vos contributions Smiley cligne
Sujet clos
Aller à