28220 sujets

CSS et mise en forme, CSS3

j'ai développé une css à partir du modèle http://www.alsacreations.com/articles/modeles/g_d_fixe.htm[/url], mais je rencontre un problème que je triture dans tous les sens mais que je n'arrive pas à résoudre
comme ma partie centrale est variable selon la longueur du contenu, je me trouve bien embêté quand celle-ci est plutot courte, le footer vient se surpositionner au dessus du coté droit et gauche ??

début du css

body {
margin: 0;
padding: 0;
border: 0;
background: #99cccc url(../i/fdbody.jpg) repeat-x left top;
}

#entete {
margin: 0;
padding: 0;
border: 0;
height: 110px;
width: 790px;
background: #cccccc url(../i/entete.jpg) no-repeat left top;
}

#conteneur {
position: absolute;
border : 0;
width: 790px;
left: 50%;
margin-left: -395px;
text-align: left;
}

#gauche {
position: absolute;
left:0;
width: 155px;
text-align: left;
}

#centre {
padding: 0px 15px 0px 15px;
margin-left: 165px;
margin-right: 175px;
color: #555;
background: transparent url(../i/fdpave.gif) repeat left top;
border: 1px solid #336666;
}

#droite {
position: absolute;
right:0;
width: 165px;
}

#pied {
height: 50px;
background: transparent url(../i/pied.jpg) no-repeat left top;
}

qui donne le résultat (cf photo) :
if someone can help me , thanks a lot ... upload/1230-test.jpg
Modifié par airbee (17 Mar 2005 - 17:30)
Modérateur
Bonjour airbee,

Pourrais-tu utiliser les balises CODE pour afficher le code de ton message, comme indiqué dans les Aide/Règles du forum ?

Merci.
Modifié par Merkel (17 Mar 2005 - 17:36)
Sorry

body {
	margin: 0;
	padding: 0;
	border: 0;
	background: #99cccc url(../i/fdbody.jpg) repeat-x left top;
	}
	
#entete {
	margin: 0;
	padding: 0;
	border: 0;
	height: 110px;
	width: 790px;
	background: #cccccc url(../i/entete.jpg) no-repeat left top;
	}
	
#conteneur {
	position: absolute;
	border : 0;
	width: 790px;
	left: 50%;
	margin-left: -395px;
	text-align: left;
	}
	
#gauche {
	position: absolute;
	left:0;
	width: 155px;
	text-align: left;
	}	
	
#centre {
	padding: 0px 15px 0px 15px;
	margin-left: 165px;
	margin-right: 175px;
	color: #555;
	background: transparent url(../i/fdpave.gif) repeat left top;
	border: 1px solid #336666;
	}

#droite {
	position: absolute;
	right:0;
	width: 165px;
	}
	
#pied {
	height: 50px;
	background: transparent url(../i/pied.jpg) no-repeat left top;
	}