28172 sujets

CSS et mise en forme, CSS3

[résolu]Problème pied de page sous content

Salut,

J'ai fait pas mal de tutoriels et d'aide mais sans succès pour ce problème là : placer ("coller") mon pied de page : "footer" sous mon contenu : "content". On raisonne pour un fonctionnement sous IE6 !!! (horreur ! malheur !)

Ce qui se passe en ce moment c'est que le footer se place en bas de la "fenêtre" et pas en bas de la page (ce que je souhaite ardemment Smiley biggrin ), sous le content tandis que le content passe en-dessous. Remarque: "content" et "footer" peuvent être scroller.

Le site peut se décomposer en 2 parties distinctes :

- partie fixe : header, navigation, browser, left-menu (z-index: 10;)
- partie mobile (scroll) : content, footer (z-index: 0;)

le tout est englobé dans un <div id="global"> </div>


/* Feuille CSS de "Content" */

#content {
	background-color: #6E6E6E;
	/*height: expression(100% - 228px);*/
	position: absolute;
	top: 228px;
	width: 781px;
	margin-left: 200px;
	z-index: 0;
	
	position : expression("absolute");
	left: expression( ( 'center' + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
}


#footer1 {
	border-style: solid none none none;
	border-width: 9px;
	border-color: #404040;
	background-repeat: repeat-x;
	background-image: url('../Images/Frame/masthead3_background.png');
	overflow: hidden;
	position: absolute;
	z-index: 0;
	height: 12px;
	width: 990px;
	bottom: 148px;
}



J'ai cru comprendre qu'il était judicieux de travailler avec "content" et "footer" en position: absolute dans un "container" en position: relative ???

Help ! Merci d'avance
Modifié par polothentik (24 Apr 2008 - 08:32)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Salut,

As-tu essayé d'appliquer à ton footer : clear:both;
Cette fonction va te permettre de placer ta div en dessous de toutes les autres.
Peux-tu préciser ta solution ?

a écrit :
va te permettre de placer ta div en-dessous de toutes les autres


Aurais -tu un exemple (juste le script) pour comprendre mieux ?
@ingrid04, merci de ne pas proposer des anneries Smiley cligne On utilise clear quand on utilise les flottant, ce qui n'est pas le cas présent (même si, on peut faire la même chose avec des flottants)

@polothentik, peux-tu nous donner un schéma, ou à défaut une page qui y ressemble, de ce que tu veux obtenir ? S'il s'agit d'avoir un bloc et en dessous un footer, je ne pense pas que cela soit difficile.

Pour ton information, ta technique de placement n'est assurément pas la meilleure pour l'instant.
Bonjour,

Je viens de préparer une page php (qui conserve le problème) pour que tu puisses m'en dire peut etre un peu plus Antoine !

Merci à toi ! Smiley biggrin 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#content {
	background-color: #6E6E6E; /*height: expression(100% - 228px);*/;
	top: 228px;
	width: 781px;
	margin-left: 200px;
	z-index: 0;
	position : expression("absolute");
}


#footer4 {
	background-color: #404040;
	position: absolute;
	bottom: 0px;
	width: 990px;
	z-index: 0;
	/*clear: both;*/
}


#footer4 p.whitetextinfo{
	font-family: Arial;
	font-size: 10px;
	color: #FFFFFF;
	text-align: center;
	line-height: 16px;
	letter-spacing: 1px;
}


#footer4 a.whitelink {
	text-decoration: none;
	font-size: 10px;
	font-weight: bold;
	font-family: Arial;
	color: #CCCCCC;
}


#footer4 a:hover.whitelink {
	text-decoration: underline;
	color: #FFFFFF
}


#footer4 q.whitetextinfo{
	font-family: Arial;
	font-size: 10px;
	color: #FF0000;
	text-align: center;
	line-height: 16px;
	letter-spacing: 1px;
	font-style: italic;
}
</style>
</head>

<body>

<div id="content">
La feuille CSS "content.css" reste à faire !!
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
test du footer !
</div>



<div id="footer4">
<p class="whitetextinfo">
	Test &nbsp;-&nbsp; Test &nbsp;-&nbsp; Test <br/>
	Dernière mise à jour Webmaster :
	<script type="text/javascript"> dateModifWebmaster(); </script>
	&nbsp;-&nbsp; <a href="" class="whitelink">Contact Webmaster</a> <br/>
	Dernier ajout ou modification de la BDD : <br/>
</p>
</div>


</body>

</html>
Bonjour,

Je me permet de faire un petit UP de mon problème vu que j'ai préparé une page exprès pour un test et que ja n'ai toujours pas eu de réponse...

Merci d'avance Smiley smile
Bonjour,

si j'ai bien compris tu désires juste placer ton pied de page en dessous du content. C'est déjà ce qu'il se passe si tu replaces le bloc "pied de page" dans le flux en retirant "position: absolute;"



#content {
	background-color: #6E6E6E; 
	width: 781px;
}
#footer4 {
	background-color: #404040;
	width: 990px;
}
Salut,

merci à toi !

En effet, en attribuant position : relative au content et au footer et en attribuant position : absolute au <div> qui les regroupe, je parviens à placer mon footer sous mon content

pour les z-index :

content z-index : 1
footer : z-index : 0
<div> englobant : z-index : 2

Merci à tous ceux qui ont contribuer à la solution

Smiley biggrin
Modifié par polothentik (24 Apr 2008 - 08:30)
Sujet clos
Aller à