[Résolu] Problème de mise en page du footer (repeat-x)

Question

Kisa

20 May 2009 à 13:05

Bonjour,
Je suis en train de faire un petit portfolio et j'ai un problème au niveau de mes divs.
Mon site est conçu ainsi:

<div id="corpus" class="corps">
Avec des div pour le header dedans
</div>

<div id="contenu" class="contenuc">
Avec mon contenu
</div>
<div id="footer" class="footerc">
pour mon image de footer
</div>

Le problème c'est que je n'arrive pas à ce que mon footer soit "collé" à la fin de mon contenu, il se place automatiquement juste après le header.
Je ne veux pas l'inclure dans le contenu car celui-ci a une largeur définie et mon footer est une image que je répète en x... :x

Pour que ça marche je suis obligée de mettre une position relative, mais ça ne fait pas très joli étant donné que le footer se place toujours au même endroit, que le contenu n'aie que deux lignes ou qu'il en est 100...
Est-ce que quelqu'un aurait une piste à me donner s'il vous plaît :x
Merci d'avance !
Modifié par Kisa (20 May 2009 - 16:57)

Macpom

20 May 2009 à 13:59

Bonjour,
pourquoi mettre ton image dans une div s'il n'y aqu'une image à répéter ?

Svenol

20 May 2009 à 14:02

Hello Kisa!

Et si tu nous mettais un aperçu de ton CSS pour voir?
Ca motiverait p'têtre les gens à s'pencher sur le problème Smiley murf

...

Macpom : Hum d'emblée j'dirais qu'elle doit tenter l'coup avec une background-image... du coup faut bien un conteneur auquel l'attribuer...
Tu m'diras : "Oui mais pourquoi du coup ne pas l'attribuer au conteneur 'contenu'?"
Ce à quoi je répondrai : "C'est pas faux..."
Modifié par Svenol (20 May 2009 - 14:06)

Kisa

20 May 2009 à 14:17

J'ai pas tout compris :x Sinon je devrai mettre mon image où ? C'est sûrement évident mais je ne vois pas trop...
Mais voilà un extrait de mon CSS avec le footer et tout :


#footer{
	position: relative;
	top: 900px;
	height:65px;
	background-image:url(images/bg_footer.jpg);
}

#corpus {
	position:relative;
    margin-left: auto;
    margin-right: auto;
    width: 1024px;
}

#header1 var, #header2 var{ /* cache le lien texte */
visibility: hidden;
}

#header1 a, #header2 a{
text-decoration: none;
display: block;
height: 144px;
}

#header1{
	width:1024px;
	height:144px;
	background-image: url("mages/Design_01.jpg");
}

#header2{
	width:1024px;
	height:43px;
	background-image: url("images/Design_02.jpg");
}

#header3{
	width:1024px;
	height:11px;
	background-image: url("images/Design_03.jpg");
}

#presentation{

	width:910px;
	height:186px;
}

.bloc_noir{
	padding: 10px;
	color: #ffffff;
}

.bloc_jaune{
	padding-left: 30px;
	padding-top: 10px;
}

#presentation1{
	float: left;
	width:612px;
	height:186px;
	background-image: url("images/presentation.jpg");
}

#presentation2{
	float: right;
	width: 282px;
	height:186px;
	background: #dfce80;
}

#navigation{
	position:absolute;
	top: 50px;
	left: 600px;
	width: 282px;
	height:136px;
	background: #dfce80;
}

Modifié par Kisa (20 May 2009 - 14:46)

masseuro

20 May 2009 à 14:45

aah !!
Peux tu utiliser les balises codes en éditant tes messages ?
Vite avec qu'un modo intervienne ! Smiley smile

Svenol

20 May 2009 à 14:46

Bon... ba j'ai repris les parties utiles de ce que tu nous as donné et j'ai tout agrégé dans un seul fichier et chez moi ça fonctionne (IE & FireFox en tout cas...)

Le code ça me donne ça :


<html>
<head>
	<style type="text/css">
		#footer{
			position: relative;
			height:65px;
			background-image:url(images/bg_footer.jpg);
			border:1px solid green;
		}

		#corpus {
			position:relative;
			border:1px solid black;
		}
		#contenu {
			border:1px solid red;	
		}
	</style>
</head>

<body>
	<div id="corpus" class="corps">
		HEADER
	</div>

	<div id="contenu" class="contenuc">
		CONTENU
	</div> 

	<div id="footer" class="footerc">
		FOOTER
	</div>
</body>
</html>

Alors à moins que tu ne nous aies pas tout dis... je vois pas ou qu'ça merdoie...

PS: J'ai même essayer de mettre le div "corpus" entre les balises head au cas ou tu te sois plantée Smiley sweatdrop

... mais le pire c'est que même ça ça fonctionne Smiley biggol

alors bon...
Modifié par Svenol (20 May 2009 - 14:50)

Kisa

20 May 2009 à 15:07

XD J'avoue que je comprends pas, effectivement ça marche impec dans ton exemple...
Peut-être parce que j'ai d'autres div à l'intérieur du corpus ?
Mais même là, elles sont juste dans le corpus et pas dans le footer...
Je vais encore re-vérifier...
Merci en tout cas de toutes les réponses Smiley smile

Kisa

20 May 2009 à 15:30

Bon ça ne marche vraiment pas, je vous mets mon code entier, peut-être que cette fois... ? :x En fait comme toujours le footer se colle à mon header T_T

Code HTML entre les bodys


<div id="corpus" class="corps">
	<div id="header1" class="header1"><a href="" class="accueil"><var>Accueil</var></a></div>
	<div id="header2" class="header2"><a href="" class="accueil"><var>Accueil</var></a></div>
	<div id="header3" class="header3">
		<div id="menu" class="menuc">
			<ul id="navlist" class="navlist">
				<li><a href="about.html" id="current">about me</a></li>
				<li><a href="portfolio.html">portfolio</a></li>
				<li><a href="contact.html">contact</a></li>
			</ul>
		</div>
	</div>
</div>
	<div id="contenu" class="contenuc">
	<br /><br />
	<div id="presentation">
		<div id="presentation1"><div class="bloc_noir"><font size=30px><font color=#dfce80>O&Ugrave;</font> VOUS<br /><font color=#dfce80>TROUVEZ</font>-VOUS ?</font><br /><br />Vous êtes actuellement sur le portfolio/div></div>
		<div id="presentation2"><div class="bloc_jaune"><br />
			N&eacute;e le 03.11.1987 &agrave; Nice.<br />
			31 avenue Renoir<br />
			06800 Cagnes sur mer<br />
			
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="CV.pdf" target="_blank"><img src="images/ddl_petit.jpg" border="0" title="T&eacute;l&eacute;charger mon CV" /></a>
			</div>
		</div>
	</div>
	<br /><br />
	<h1 id="titre1">Latest work</h1>
	Retrouvez ci-dessous les dernières r&eacute;alisations que j’ai pu effectuer. Pour en voir davantage, rendez-vous dans la section portfolio.<br /><br />
	

	</div>
	


	<div id="footer" class="footerc">
	<div id="credits" class="creditsc">&copy; me 2009 Valid XHTML & CSS</div>
	</div>

Et tout le code CSS :


body{
	background-image: url("images/bg_header.jpg");
	background-repeat: repeat-x;
	background-color: #FFFFFF;
	margin: 0;
	padding: 0;
	font:Tahoma;
	font-size: 12px;
	color: #3b3725;
}

table{
	font:Tahoma;
	font-size: 12px;
	color: #3b3725;
	padding-left: 40px;
}

#moi{
	position:absolute;
	left: 450px;
	top: 70px;
}

#ddl{
	position:absolute;
	left: 650px;
	top: 70px;
}


#corpus {
	position:relative;
    margin-left: auto;
    margin-right: auto;
    width: 1024px;
}
a.accueil{
}

#header1 var, #header2 var{ /* cache le lien texte */
visibility: hidden;
}

#header1 a, #header2 a{
text-decoration: none;
display: block;
height: 144px;
}

#header1{
	width:1024px;
	height:144px;
	background-image: url("images/Design_01.jpg");
}

#header2{
	width:1024px;
	height:43px;
	background-image: url("images/Design_02.jpg");
}

#header3{
	width:1024px;
	height:11px;
	background-image: url("images/Design_03.jpg");
}

#presentation{

	width:910px;
	height:186px;
}

.bloc_noir{
	padding: 10px;
	color: #ffffff;
}

.bloc_jaune{
	padding-left: 30px;
	padding-top: 10px;
}

#presentation1{
	float: left;
	width:612px;
	height:186px;
	background-image: url("/images/presentation.jpg");
}

#presentation2{
	float: right;
	width: 282px;
	height:186px;
	background: #dfce80;
}

#navigation{
	position:absolute;
	top: 50px;
	left: 600px;
	width: 282px;
	height:136px;
	background: #dfce80;
}

.navigation2{
	text-align: left;
	/*border-left: 10px solid #3b3725;*/
	color: #cb5849;
	font-size: 28px;
	font-family: tahoma;
	font-weight: normal;
	margin-bottom:2px;
	margin-top:3px;
}

.navigation2 a, .navigation a:hover{
	text-align: left;
	color: #cb5849;
	font-size: 28px;
	font-family: tahoma;
	font-weight: normal;
	margin-bottom:2px;
	margin-top:3px;
}

/*****************************
             MENU
*****************************/

#menu{
	position: absolute;
	right: 65px;
	top: 143px;

}

#navlist{
	margin: 0px;
	padding: 0px;

}

#navlist li
{
	display: inline;
	float: left;
	margin: 0px;
	padding-left: 10px;
	list-style: none;

}

#navlist li a:link, #navlist li a:visited
{
	font: 35px Tahoma, "Times New Roman", Times, serif;
	color: #3b3725;
	text-decoration: none;
	display: block;
	padding: 0px 0px 0px 3px;
	margin: 0px;
	overflow: hidden;
	text-align: center;
	text-transform: lowercase;

}

#navlist li a#current
{
text-transform: lowercase;
}

#navlist li a:hover#current
{
text-decoration: none;
border-bottom: 13px solid #dfce80;

}

#navlist li a:hover, #navlist li a:active
{
text-decoration: none;
border-bottom: 13px solid #dfce80;
}

/*****************************
             INPUT
*****************************/

input, textarea{
	background: #dfcd7f;
	border: 1px solid #312e1f;
}

input:hover, textarea:hover {
	background: #3b3725;
}

#footer{
	position: relative;
	height:65px;
	background-image:url(images/bg_footer.jpg);
}

#change{
position:absolute;
top: 500px;
right: 600px;
width: 165px;
}

#change li{
	color: #cb5849;
	font: 12px/14px Verdana, "Times New Roman", Times, serif;
	display: block;
	margin: 0px;
	padding: 0px;
	float: left;
	/*line-height: 11px;*/
	list-style: none;
	padding-top: 5px;
}

.clic {
  font: 12px/14px Verdana, "Times New Roman", Times, serif;
  color: #000000;
  text-decoration:none;
  cursor:crosshair;
}

.clic:hover {
  font: 12px/14px Verdana, "Times New Roman", Times, serif;
  color: #afa285;
  border-bottom:solid 1px #dfd4c2;
  text-decoration:none;
}

.css_change{
	font-family: century gothic; 
	border-bottom: 2px solid #dfd4c2;
	text-align: left;
	color: #afa285; 
	letter-spacing: 1px;
	font-weight:bold;
	background-color: transparent;
	padding-top:5px;
	text-decoration: none;
	text-transform: uppercase;
}

b{
color: #cb5849;
}


#arounie_title{
	color: #000000; 
	font-family: verdana; 
	font-size: 14px;
	padding-bottom: 10px;
	text-transform: uppercase;
	font-weight: bold;
}

#presentation2  a{
	font-family: tahoma; 
	font-size: 14px;
	text-align: left;
    text-decoration:none;
   /* border-bottom:solid 1px #ffffff;*/
} 

#presentation2 a:hover{
	color: #000000; 
    text-decoration:none;
    border-bottom:solid 1px #000000;
	cursor: crosshair;
} 

#bottom{
	color: #cb5849;
	font-family: georgia; 
	text-align: right;
    font-weight:bold;
    text-decoration:none;
    font-size: 8pt;
    padding: 3px;
	padding-left: 5px;
	padding-top: 5px;
	margin-bottom: 0px;
	margin-left:40px;
	text-transform: lowercase;
	letter-spacing: 1px;
	position:relative;
	top:460px;
	
}

#bottom a{
	color: #cb5849;
	font-family: georgia; 
	text-decoration:none;
}

#bottom a:hover{
	color: #000000;
	font-family: georgia; 
    text-decoration:none;
    border-bottom:solid 1px #cb5849;
}
#parties{
	color: #cb5849; 
	font-family: georgia; 
	text-align: center;
    line-height: 12px;
    text-decoration:none;
	padding-top: 10px;
	padding-bottom: 10px;
}

#parties a{
color: #000000;
text-decoration: none;
}

#parties a:hover{
color: #ffffff;
text-decoration: none;
font-weight: bold;
}

h1{
	text-align: left;
	/*border-left: 10px solid #3b3725;*/
	background:url(images/h1.jpg) left bottom no-repeat;
	color: #dfce80;
	font-size: 53px;
	font-family: tahoma;
	font-weight: normal;
	/*letter-spacing: 3px;*/
	text-transform: lowercase;
	margin-bottom:2px;
	margin-top:3px;
	padding-left: 50px;

}

h2{
	text-align: left;
	/*border-left: 10px solid #3b3725;*/
	color: #cb5849;
	font-size: 28px;
	font-family: tahoma;
	font-weight: normal;
	margin-bottom:2px;
	margin-top:3px;
}

h3{
	color: #cb5849; 
	font-family: georgia; 
	text-align: left;
    font-weight:bold;
    text-decoration:none;
	font-size: 12px;
	padding-left: 10px;
	/*border-bottom: 1px solid #OOOOOO;*/
}

#pic{
  /* position:relative;
   margin-left: auto;
   margin-right: auto;*/
  
   width: 250px;
}

.picc{
   width: 250px;
}

.contenuc{
   position:absolute;
   left: 30px;
   width:910px;
   font: 12px Tahoma, "Times New Roman", Times, serif;
	color: #3b3725;
   padding: 10px 10px 10px 10px;
 /* 	overflow: auto;*/
}

.contenuc a{
  font: 12px/14px Tahoma, "Times New Roman", Times, serif;
  color: #cb5849;
  font-style: italic;
  text-decoration: none;
}

.contenuc a:hover{
  font: 12px/14px Tahoma, "Times New Roman", Times, serif;
  color: #ffffff;
 background-color:#cb5849;
  text-decoration: none;
  }

.creditsc{
  font: 12px/14px Tahoma, "Times New Roman", Times, serif;
  
  padding: 35px 30px 10px 10px;
  float: right;
  
}

.creditsc a{
  font: 12px/14px Tahoma, "Times New Roman", Times, serif;
  color: #ffffff;
  padding:0 5px;
  text-decoration:none;

}

.creditsc a:hover{
  font: 12px/14px Tahoma, "Times New Roman", Times, serif;
  color: #cb5849;
  padding:0 5px;
  border-bottom:solid 1px #ffffff;
  text-decoration:none;

}

.soustitre{
border-right: 30px solid #cb5849;
text-align: right;
color: #3b3725;
font-size: 16px;
line-height:13px;
font-family: century gothic;
letter-spacing: 2px;
font-weight:normal;
text-transform: uppercase;
padding: 5px 30px 2px 2px;
margin-top: 3px;
margin-bottom: 3px;	
}

.para{
border: 3px solid #dfcd7f;
text-align: left;
color: #dfcd7f;
font-size: 12px;
font-family: tahoma;
font-weight: normal;
line-height: 13px;
letter-spacing: 0px;
padding: 0 4px 4px 4px;
cursor: default; 
padding: 10px;
background-color: #3b3725;
}

.para:hover{
background-color: #605c4b;
}

.para li{
list-style-type: square;
}

.para a{
  font: 12px/14px Tahoma, "Times New Roman", Times, serif;
  color: #cb5849;
  text-decoration:none;
 }
  
.para a:hover{
  font: 12px/14px Tahoma, "Times New Roman", Times, serif;
  color: #CCCCCC;
  border-bottom:solid 1px #CCCCCC;
  text-decoration:none;
}
/*
.para:hover{
background-color: #bcbcbc;
}
*/

Svenol

20 May 2009 à 16:03

Oulélé c'est bien touffu pour c'que ça fait ton CSS Smiley sweatdrop

!

Bon.. l'erreur est la :


.contenuc{
   position:absolute;
   left: 30px;
   width:910px;
   font: 12px Tahoma, "Times New Roman", Times, serif;
	color: #3b3725;
   padding: 10px 10px 10px 10px;
 /* 	overflow: auto;*/
}

faut remplacer le "position:absolute" par un "position:relative" et ça fera tout comme t'as demandé Smiley smile

Au passage j'ai noté qu'y manquait un < dans une de tes balises fermantes (ou fermentes Smiley confus

?) ... enfin dans un </div> koi ! (entre autres...)

Voila voila...

Kisa

20 May 2009 à 16:57

lol touffu ? XD J'ai d'autres pages qui utilisent les styles indiqués Smiley smile

En tout cas merci merci merci beaucoup !
Ca marche ! Vraiment merci. J'avais demandé de l'aide à un prof, et il a dit qu'il allait consulter son bouquin de CSS donc...
Vraiment super ! Merci encore Svenol !

Svenol

20 May 2009 à 17:28

T'as demandé à qui ? A ton prof d'histoire ou de bio Smiley biggol

?

De rien quand-même, c'était pas grand chose Smiley cligne

!

Kisa

20 May 2009 à 18:05

Ben à mon prof de HTML/CSS qui n'en a pas fait depuis belle lurette ! Il va être à la retraite cette année XD
Merci encore en tout cas Smiley smile

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Problème de mise en page du footer (repeat-x)