28172 sujets

CSS et mise en forme, CSS3

Probleme de footer après le header

Bonjour,

Je fais appel à vous car je n'arrive pas à me dépatouiller d'un pb de css. En fait, j'ai réalisé un design mais j'ai ma partie footer qui est juste après le header alors qu'il devrait être après le coprs. J'ai tout essayé mais je n'y arrive vraiement pas.

Voici mon code html :

<!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>Mon titre</title>
		<link rel="StyleSheet" type="text/css" href="style.css" />
	</head>
	<body>
		<div id="wrapper">
			<div id="headerwrapper">
				<div id="logo">
					<a href="#">Lien</a>
				</div>
				<ul>
					<li><a href="#">Accueil</a></li>
    					<li><a href="#">Accueil2</a></li>
				</ul>
			</div>
			<div id="contentwrapper">
				<div id="leftcenter">
					<div id="left">
						<h2>titre2</h2>
						<ul>
							<li><a href="#">test</a></li>
							<li><a href="#">test</a></li>
						</ul>
					</div>
					<div id="center">
						<div id="contenu">
							<p>aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa </p>
							
						</div>
					</div>
				</div>
				<div id="right">
					<h2>titre2</h2>
					<ul>
						<li><a href="#">aaa</a></li>
						<li><a href="#">aaa</a></li>
						<li><a href="#">aaa</a></li>
						<li><a href="#">aaa</a></li>
					</ul>
				</div>
			</div>
			<div id="footerwrapper">
				<p>Copyright &copy; 2010 website</p>
			</div>
		</div>
	</body>
</html>

Et mon css :

/* ------------------------------RAZ */
*{margin:0; padding:0;}
h1, h2, h3, h4, h5, h6, p{
	font-size: 1em;
	font-weight: normal;
}
ul {
	margin: 0; padding: 0;
	list-style: none;
}
a {
	text-decoration:none;
	outline: none;
}
a img {
	border:none;
}
.clear { 
    clear:both;
    display:block;
    line-height:1px;
	font-size:1px;
	height:1px;
}
:focus{-moz-outline-style: none;}
.hidden {
	visibility:hidden;
}
fieldset{border:none;}
/* -------------------------fin RAZ--- */

body {
	font-size:14px;
	line-height:1.1em;
	font-family:"Trebuchet MS",arial,helvetica,sans-serif;
	background:#fff url(images/header-bg.png) repeat-x top left;
	color:#cdcdcd;
	margin:0px;
	padding:0px;
}

#wrapper{
width:971px;
margin:0 auto;
}

#headerwrapper{
background:url(images/header-style.png) no-repeat;
height:98px;
}

#logo{
background:url(images/logo.png) no-repeat;
width:364px;
height:97px;
margin:1px 0 0 10px;
}

#logo a{
padding: 0 370px 81px 0;
text-indent:-5000px;
display:block;
}

#headerwrapper ul{
float:right;
margin:-20px 0 0 0;
font-size:14px;
}

#headerwrapper li{
display:inline;
padding:0 20px 0 20px;
color:#ffffff;
}

#headerwrapper li a{
color:#ffffff;
font-weight:bold;
padding-bottom:4px;
}

#headerwrapper li a:hover{
background:url(images/puce-menu.png) no-repeat 50% 100% scroll transparent;
}

#headerwrapper .addsite{
background:url(images/addsite.png) no-repeat;
width:123px;
height:30px;
padding:9px;
margin-right:0px;
margin-left:10px;
}

#headerwrapper .addsite a{
color:#990069;
}

#headerwrapper .addsite a:hover{
color:#cdcdcd;
}


#contentwrapper{
background:url(images/content-bg.png) repeat-y;
width:971px;
margin-top:1px;
position:absolute;

}

#leftcenter{
position:relative;
float:left;
width:813px;
margin-left:4px;
}

#left{
position:relative;
float:left;
width:150px;
}

#left h2, #right h2{
background:url(images/cat-bg.png) no-repeat;
width:140px;
height:28px;
color:#ffffff;
margin:25px 0 0 5px;
padding:6px 0 0 15px;
}

#left ul{
margin-left:10px;
}

#left li a{
color:#cdcdcd;
line-height:22px;
}

#center{
position:relative;
float:right;
width:663px;
}

#contenu {
position:relative;
margin:0;
padding:0 10px;
}

#right{
position:relative;
float:right;
width:150px;
margin-right:4px;
}

#footerwrapper{
background:url(images/footer-bg.png) no-repeat;
width:971px;
height:15px;
position:relative;
}

#footerwrapper p{
color:#cdcdcd;
font-size:12px;
padding: 16px 0 0 5px;
}


J'ai essayé de mettre un position:relative ou static pour mon footerwrapper (pour qu'il soit après wrapper) mais rien à faire.

Si quelqu'un pouvait m'aider, ce serait sympa merci Smiley smile
Déjà, tu utilises trop de position:absolute et position:relative. T'en as pas besoin.

Ensuite, les éléments du contentwrapper sont tous flottés donc ce contentwrapper ne prend virtuellement pas de place.

Une des solutions serait de rajouter un <div> avec un clear à la fin du contentwrapper.
Administrateur
Bonjour,

yop tu as même déjà la règle .clear {} dans tes CSS.

Mais le plus simple c'est d'utiliser un des gabarits de Florent V. présent dans la section Apprendre/Outils du site.
Désolé mais le <div class="clear"></div> après le </div> fermant de contentwrapper. Y en a t il d'autres à placer ?

baubbelayponge => Je comprends bien mais je ne maitrise pas encore tout pour le css. Je vais les enlever un par un et voir si cela n'a pas d'incidence sur le visuel Smiley smile
Modifié par newty (15 Jun 2010 - 18:52)
newty a écrit :
Désolé mais le <div class="clear"></div> après le </div> fermant de contentwrapper. Y en a t il d'autres à placer ?

Remarque: la première phrase ne veut rien dire. Il manque un verbe, par exemple (là tu a écrit «désolé mais groupe nominal», ce qui nous fait une belle jambe).
Réponse à la question: à priori tu n'as besoin que d'un seul <div class="clear"></div>, mais il faut bien le placer. Ce serait plutôt juste avant le </div> de #contentwrapper.

Je te suggère en passant de clairement identifier tes balises </div> car sinon ça va vite être la pagaille. Par exemple tu peux écrire:
<div id="contentwrapper"> 
  <div id="leftcenter"> 
    <div id="left"> 
      ...
    </div><!--#left-->
    <div id="center"> 
      <div id="contenu"> 
        ...
      </div><!--#contenu-->
    </div><!--#center-->
  </div><!--#leftcenter-->
  <div id="right"> 
    ...
  </div><!--#right-->
  <div class="clear"></div>
</div><!--#contentwrapper-->
(Ici j'utilise une syntaxe inspirée des sélecteurs CSS, mais on peut mettre ce qu'on veut dans les commentaires; certains écrivent "fin de contentwrapper" par exemple.)

Edit: houla... en plus de ça, il faut absolument retirer le positionnement absolu de #contentwrapper. Tu n'as aucune chance de placer ton footer en dessous du contenu si le contenu est positionné en absolu!
Tu peux aussi supprimer tous les position:relative, à vue de nez. Pour rappel, la valeur par défaut de la propriété position est "static", et pas "relative".

À lire ou relire (de même pour les références qui y sont indiquées): Guide de survie du positionnement CSS.
Modifié par Florent V. (15 Jun 2010 - 19:36)
Désolé mais le <div class="clear"></div> après le </div> fermant de contentwrapper ne fonctionne pas. Y en a t il d'autres à placer ?

Ce sera mieux comme ça Smiley biggol

Merci Florent V. mais cela ne fonctionne toujours pas (placé avant le </div> de #contentwrapper).
newty a écrit :
Merci Florent V. mais cela ne fonctionne toujours pas (placé avant le </div> de #contentwrapper).

Est-ce que tu as, dans l'ordre:
1. Lu l'article indiqué?
2. Supprimé le positionnement absolu de ton #contentwrapper, qui n'a rien à faire là, de même que les positionnements relatifs superflus?
Sujet clos
Aller à