[Résolu][2cols4u] Petit souci de placement du div "footer"

Coucou !

Je suis arrivé à cette étape du tuto : Etape 2

Et là, un petit souci est apparu dans FireFox, le div "footer" se retrouver correctement dans le bas de la page, cependant, il est légèrement décallé vers la droite par rapport au reste des divs contenu dans "global". Il dépasse d'à peu près 10px de la bordure du div "global".
(Constaté en faisant appraître les bordures des différents divs)

Dans un premier temps j'ai pensé à une mauvaise imbrication de ma part et j'ai aussi tenté de mettre à zéro les marges et les padding, sans succès.

Une petite idée de ce que cela pourrait être?

Merci d'avance pour l'attention portée a mon Post !

Voici ma feuille CSS :

div#global 
{
	border : solid 2px green ; 
	min-height: 100%; 
	width: 750px;
	padding: 0 10px;
	margin: 0 auto;
	position: relative;
}

div#header
{
	border : solid 2px green ;
}

div#center 
{
	border : solid 2px green ; 
	padding-bottom: 50px;
	overflow: auto;
}

div#content 
{
	float: right;
	width: 530px;
}
div#sidebar 
{
	float: left;
	width: 200px;
}

div#footer 
{
	border : solid 2px green ; 
	position: absolute;
	width: 100%;
	bottom: 0;
}

et mon code html juste pour l'imbrication des divs :

<div id="global">
	<div id="header">
	</div>
					
	<div id="center">
		<!-- Menu de gauche --> 
		<div id="sidebar">		
                </div>
					
		<!-- Corps -->
		<div id="content">
		</div>		
	</div>
			
	<div id="footer">
	</div>
</div>

Modifié par Freem@n (08 May 2007 - 13:40)

je sais pas si c'est pareil

mais dans le même genre de pb (visuellement ) j'avais mis un left:0; a mon footer

pascal

Salut

Essaie avec

#footer {
   width: 750px;
}

Merci ! Ca résoud en effet le décallage vers la droite.

Comme j'ai toujours de la chance dans ce genre de chose, il se produit un autre petit souci. Oui je sais, je démarre fort ... Mais promis après je serai gentil

La taille du footer est exprimée "width: 100%;" mais là elle est de la même taille que Global

Or elle devrait normalement être de la taille des divs "header" et "center" si je ne me trompe pas ?

Oups post croisé

Thomas D. a écrit :
Salut

Essaie avec

#footer {
   width: 750px;
}

J'ai testé cette 2ème solution. Il y a toujours une petite différence de taille entre le "header" et le "footer", mais rien de bien mechant !

Je vais poursuivre le tuto voir si j'arrive au résultat final

Freem@n a écrit :
La taille du footer est exprimée "width: 100%;" mais là elle est de la même taille que Global

Or elle devrait normalement être de la taille des divs "header" et "center" si je ne me trompe pas ?

Tu veux dire que div#footer positionné en absolu et dimensionné en width: 100% ne tient pas compte des padding de son bloc parent ?

Après écumage de la spécification CSS 2.1, il s'avère que c'est un comportement normal. Les éléments positionnés en absolu le sont par rapport aux limites du padding edge de leur plus proche ancêtre positionné. Et le padding edge, c'est la limite qui entoure le padding.

Tes blocs statiques (div#header, div#center) sont dimensionnés par rapport au content edge de div#global. La zone dessinée par le content edge de div#global fait 750px de large. Celle dessinée par le padding edge fait 770px de large (10 + 750 + 10). Donc si tu demandes à div#footer de prendre une largeur de 100%, il prendra une largeur de 770px.

Solution :

div#footer {
	border : solid 2px green ; 
	position: absolute;
	width: 746px;
	bottom: 0;
	left: 10px;
}

Si je ne me suis pas trompé, tu devrais obtenir un bloc de 750px de large (2px de bordure gauche + 746px de largeur + 2px de bordure droite), positionné pile comme il faut.

Niquel ! Positionnement parfait !

Si j'ai bien tout compris, j'ai fait appraître les bordures pour le "débugging", leur épaisseur entre en compte lors du calcul du positionnement (logique vous me direz). En les supprimant je devrai donc adapter la taille de div#footer à 750px. Compris !

Ensuite pour la différence entre content edge et padding edge, compris aussi !

Et bien merci beaucoup à tous pour vos réponses !

Ah! Il est excellent ce tuto du Collectif Alsacreations

J'ai une page assez simple avec un contenu à largeur fixe centré & une seule colonne dedans, donc pas de float.

Avec les ajustements pour IE6, j'obtiens un footer qui "se fait la malle" sur la droite, exactement comme si IE le plaçait à partir du milieu de la page horizontalement.

C'est probablement une petite différence dans la structure de ma page p/r à celle du tuto, bien que j'ai successivement presque tout remplacé sans la trouver.
Pourtant le modèle passe sur un IE6 ici donc il est bon !

Ici je m'en suis sorti en modifiant légèrement le style.css :

#footer {
	position	: absolute;
	bottom		: 0;
	width		: 903px;  /* largeur idendique au #global */
	margin		: 0 auto;
	text-align	: center;
	font		: 10pt;
	}

et le ie.css :

#global {
  height	: 100%;
  }
#center {
  overflow	: visible;
  height	: 1%;
  }
#footer {
  left		: 5px;     /* alignement gauche */
  width		: 857px;  /* largeur idendique au #global */
  border	: 1px dashed white; /* deboggage */
  }

La page est dispo en ligne ici http://idc-paris.com/fc/

Bonjour,

Il est préférable de ne pas mélanger des problèmes différents (même s'ils peuvent être proches, ou relatifs au même tutoriel) dans un même sujet.

Pour plus de clarté, donc, merci de créer un nouveau sujet reprenant votre message ci-dessus.