Problème repeat-y

Question

md0912

4 Jun 2009 à 11:52

Bonjour,

Voila je dois réaliser un site web en long et je rencontre des problèmes pour les height:auto;.
En effet, mon site est composé d'un header, d'un footer, de deux bordures (droite et gauche) et d'un conteneur.

J'ai remarqué que lorsque je met un contenu long mes bordures ne se répètent pas en hauteur.
Je vous montre mon code si vous pouviez m'aider ca serait simpa. C'est un site pour un stage !


<body>
	<div id="haut">
  		<div id="photo" align="center"></div>
      	<div id="logo" align="center"></div>
        <jdoc:include type="modules" name="top"/>
	</div>
        
        
		
			<div id="gauche">
				<jdoc:include type="modules" name="left"/>
			</div>
			
			<div id="droit" ></div>
            	<div id="rajout" align="right">
				
                			<div id="calendrier" align="right">
                					<jdoc:include type="modules" name="right"/>
							</div>
							
					</div>	
			
            
			<div id="centre" align="center">
				<jdoc:include type="modules" name="user1"/>
				<jdoc:include type="modules" name="user2"/>
							
				<jdoc:include type="component" />
			</div>	
            
                <div id="footer">
                <jdoc:include type="modules" name="bottom"/>
                </div>	
            
          	
			
	</body>
</html>


@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}

body{
background:url(../img/fond.jpg) repeat;
height:100%;
}

html{
height:100%;	
}

#haut{
background:url(../img/banniere_tache.png) repeat-x;
width:100%;
height:275px;
border:solid 1px red;
text-align:center;
z-index:10;
position:relative;

}

#droit{
margin-top:-22px;
z-index:1;
background:url(../img/bordure_droit.png);
background-repeat:repeat-y;
width:189px; 
height:1100px;
float:right;
position:relative;
text-align:right;
}


#gauche{
margin-top:-22px;
z-index:1;
display:block;
background:url(../img/bordure_gauche.png) repeat-y;
width:205px; 
height:1100px;
float:left;
text-align:left;
}

#photo{
background:url(../img/t_mixage.jpg) no-repeat;
width:955px;
height:184px;
margin-right:auto;
margin-left:auto;
display:block;
text-align:center;

}

#logo{
background:url(../img/logo.png) no-repeat;
width:359px;
height:146px;
margin-top:-170px;
margin-right:auto;
margin-left:auto;
display:block;
text-align:center;

}

#rajout{
background:url(../img/fond_calendrier3.png) no-repeat;

width:259px;
height:249px;
position:relative;
float:right;
z-index:9;
margin-right:-189px;
margin-top:-90px;
}

#calendrier{

width:200px;
height:200px;
position:relative;
float:right;
z-index:40;
margin-top:80px;
margin-right:10px;
}

#jevents_body{
width:300px;	
	
}

#centre #jevents_header .contentpaneopen{
width:300px;	
}

#centre{

text-align:center;
width:938px;
margin-left:235px;
margin-top:20px;
height:auto;
}

.ev_navigation{
display:none;	
}

#jevents_body{
margin-top:-110px;	
}

.cal_td_daysnames{
margin-left:50px;	
}

fieldset{
margin-left:-20px;	
}



ul.menu li{
float:left;
display:inline;
padding : 0 1em;
width:auto;

}




div#haut a{
text-decoration:none;	
}

div#haut a span{
visibility:hidden;

}

ul.menu{
margin-top:40px;
margin-left:150px;

}


div#haut .item5 a{
background-image:url(../img/bouton_accueil.png);
height:37px;
}

ul.menu li.item5 a{
display:block;
background-repeat:no-repeat;
width:70px;
}

div#haut .item5 a:hover{
background-image:url(../img/bouton_accueil_hover.png);
height:37px;
}




div#haut .item3 a{
background-image:url(../img/bouton_presentation.png);
height:37px;
}

ul.menu li.item3 a{
display:block;
background-repeat:no-repeat;
width:117px;
}

div#haut .item3 a:hover{
background-image:url(../img/bouton_presentation_hover.png);
height:37px;

}

div#haut .item4 a{
background-image:url(../img/bouton_programmation.png);
height:37px;
}

ul.menu li.item4 a{
display:block;
background-repeat:no-repeat;
width:141px;
}

div#haut .item4 a:hover{
background-image:url(../img/bouton_programmation_hover.png);
height:37px;
}


div#haut .item6 a{
background-image:url(../img/bouton_ateliers.png);
height:37px;
}

ul.menu li.item6 a{
display:block;
background-repeat:no-repeat;
width:76px;
}

div#haut .item6 a:hover{
background-image:url(../img/bouton_ateliers_hover.png);
height:37px;
}

div#haut .item7 a{
background-image:url(../img/bouton_bons_moments.png);
height:37px;
}

ul.menu li.item7 a{
display:block;
background-repeat:no-repeat;
width:163px;
}

div#haut .item7 a:hover{
background-image:url(../img/bouton_bons_moments_hover.png);
height:37px;
}

div#haut .item8 a{
background-image:url(../img/bouton_liens.png);
height:37px;
}

ul.menu li.item8 a{
display:block;
background-repeat:no-repeat;
width:53px;
}

div#haut .item8 a:hover{
background-image:url(../img/bouton_liens_hover.png);
height:37px;
}

div#haut .item9 a{
background-image:url(../img/bouton_partenariats.png);
height:37px;
}

ul.menu li.item9 a{
display:block;
background-repeat:no-repeat;
width:128px;
}

div#haut .item9 a:hover{
background-image:url(../img/bouton_partenariats_hover.png);
height:37px;
}

div#haut .item10 a{
background-image:url(../img/bouton_contacts.png);
height:37px;
}

ul.menu li.item10 a{
display:block;
background-repeat:no-repeat;
width:91px;
}

div#haut .item10 a:hover{
background-image:url(../img/bouton_contacts_hover.png);
height:37px;
}

#marqueecontainer{
position:absolute;
z-index:40;
margin-left:-16px;
margin-top:40px;
}

#vmarquee{
margin-left:30px;
}

#footer{
background-image:url(../img/footer.png);
background-repeat:repeat-x;
position:relative;
z-index:50;
width:100%;
height:67px;
clear:both;
bottom:10px;
}

Sujet clos

CSS et mise en forme, CSS3

Problème repeat-y