28173 sujets

CSS et mise en forme, CSS3

Positionnement de pied de page

Bonjour à tous,

Je reviens consulter vos lumière à propos de ce site.

La structure de celui-ci est des plus standard :
- une entête
- un corps (avec une partie gauche, une partie centrale et une partie droite)
- un pied de page

Mon problème est le suivant :
les 2 parties gauche et droite son positionnées en absolue.
Du coup, lorsque le contenu est moins 'haut' que les 2 parties gauche et droite, le pied de page, qui lui reste dans le flux, 'glisse' derrière les 2 parties (toujours droite et gauche).

Et là vous me direz :
"pourquoi passer les 2 parties gauche et droite en absolue ? Passe tes 2 section droite et gauche en flottant et applique un clear à ton pied de page."

et moi de vous répondre :
"en fait, j'utilise à plusieurs reprise la techniquement des boîtes flottantes dans une <div> et ceci dans la partie centrale (je vous invite à consulter la section 'catalogue').
Cette technique est simple, il s'agit d'encapsuler des éléments flottants dans une <div> et donc de rajouter dans cette même <div> un élément avec la propriété 'clear' activée (ici un <hr />) afin que ces éléments flottant suivent les déformations de la <div> dû au différentes résolutions (je précise que ce site est voulu adaptable à partir du 800x600)"

Bref, si par malheur je passe les <div> gauche et droite en float, je vous laisse imaginer le résultat ... la <div> située au centre et contenant ce <hr /> en clear:both; va immédiatement se loger en-dessous des partie gauche et droite et laisser au-dessus un grand vide.

Donc ma question est simple :
Sauriez vous comment faire pour garder le pied de page constament en-dessous des <div> gauche et droite (si la partie centrale est moins haute), et celà en gardant le système des boîtes empilées dans la section 'catalogue' et 'nouveauté' de la page d'accueil ?

Merci à vous
Salut.

Arf ça c'est du ccs qu'il est correctement indenté et très accessible Smiley biggol

Sinon, je ne vois pas le problème, une des pistes
un conteneur global.
Un bloc gauche en float: left (avec à l'intérieur tes blocs dans le flux) et overflow: hidden pour que le flottant suive sont contenu.
Idem pour le droit sauf (float: right Smiley cligne )
Un bloc centre avec un margin-left = width bloc gauche et margin-right = width bloc droit avec un éventuel min-height si ton centre peut être plus court que le plus long de tes blocs latéraux .
Un footer en clear: both.

L'ordre des blocs:
conteneur
gauche
droite
centre
footer
Ah oui zut !!
C'est un problème avec filezilla ça ... dès que j'upload un css il me fait sauter tous les sauts de lignes !
Rhaaa j'avais un peu oublié.

Ouais nan, t'as pas saisi le problème et c'est normal vu mes explications Smiley lol
J'ai un <hr /> avec clear:both; qui est dans ma <div> centrale, donc si je passe les <div> gauche et droite en float, et vu la structure HTML qui est exactement celle que tu as citée, cette <div> contenant le <hr /> va se positionner en-dessous des <div> droite et gauche.
Je vais tâcher de remettre le css en place ... ça pourrait grandement aider pour la lisibilité Smiley ravi
Modifié par RaGe (27 Aug 2007 - 14:55)
Re,
effectivement changement de tactique, heu !!
gauche float: left
droite float: right
centre width: auto; overflow: hidden (height: 1% pour ie)
pied clear: both

<edit> je ne sais pas si j'ai été clair sur le coup Smiley biggol 
<style type="text/css">
#conteneur{
width: 800px;
margin: 0 auto;
border: 1px solid black;
}

#gauche{
width: 150px;
float: left;
background: lime;
}

#droite{
width: 150px;
float: right;
background: red;
}

#centre{
width: auto;
background: yellow;
height: 1%;/* pour ie6 --------------------*/
overflow: hidden;
}

#pied{
clear: both;
height: 30px;
background: blue;
}

.gauche_1{
width: 130px;
height: 100px;
border: 1px solid black;
margin: 10px auto;
}

.centre_1{
width: 130px;
height: 100px;
border: 1px solid black;
float: left;
}

.centre_2{
width: 130px;
height: 100px;
border: 1px solid black;
float: right;
}

.clear{
clear: both;
}
	</style>
</head>	
<body>
<div id="conteneur">
	<div id="gauche">
		<div class="gauche_1"></div>
		<div class="gauche_1"></div>
		<div class="gauche_1"></div>
	</div>
	<div id="droite">
		<div class="gauche_1"></div>
		<div class="gauche_1"></div>
		<div class="gauche_1"></div>
		<div class="gauche_1"></div>
	</div>	
	<div id="centre">

		<div class="centre_1"></div>
		<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque molestie odio eget neque. Nullam in quam. Phasellus semper nulla et quam. Sed pellentesque condimentum nulla. Curabitur ac nunc quis sem porttitor gravida. Sed ac nunc. Suspendisse potenti. Suspendisse eget dolor ac dui pulvinar dictum. Aliquam ac velit. Proin porttitor, sapien at varius vehicula, libero lorem pharetra ante, at mollis eros nisl sed ante. Fusce vel pede vel ante lobortis sollicitudin.
		</p>
		<div class="clear"></div>

		<div class="centre_2"></div>
		<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque molestie odio eget neque. Nullam in quam. Phasellus semper nulla et quam. Sed pellentesque condimentum nulla. Curabitur ac nunc quis sem porttitor gravida. Sed ac nunc. Suspendisse potenti. Suspendisse eget dolor ac dui pulvinar dictum. Aliquam ac velit. Proin porttitor, sapien at varius vehicula, libero lorem pharetra ante, at mollis eros nisl sed ante. Fusce vel pede vel ante lobortis sollicitudin.
		</p>
		<div class="clear"></div>
	</div>	
	<div id="pied">
	</div>
</div>


</edit>
Modifié par ghost (27 Aug 2007 - 16:24)
Bon, j'ai essayé ta technique qui fonctionne à merveille sous Firefox mais pas sur IE6 hélas.
Je te post ici le résultat : c'est pas beau sous IE
Les div concernées (parce que le CSS est toujours illisible Smiley sweatdrop ) sont #gauche{} #droite{} et #corps{}.
Il semblerait qu'il interprète mal le widht: auto; de la div #corps.
Je pense que celà vient du fait que la largeur n'est pas fixé pour le conteneur.
C'est ça de vouloir faire du site adaptable avec un width relatif Smiley confus
Merci encore
Salut,

Ta CSS !! Smiley biggol
Du coup, j'ai re-testé mon but de code, il passe bien sous IE6...
Tu as peut être un problème de margin mal adapté pour centre?

Si j'ai un bout de temps je jette l'oeil.
fouuuu a y'est ! je viens de remettre la CSS en place ! Smiley sweatdrop
Y'a plus qu'à comme on dit.
Il est vrai que ton bout de code marche bien, ceci dit la structure est plus simple (et heureusement pour un exemple Smiley smile ).
Bon ben, on dégaine le CSS Edit et on va tripatouiller tout ça Smiley murf
Marci encore ghost Smiley cligne
et plop !
Juste pour donner des nouvelles concernant mon problème de la dernière fois.
Merci pour ton aide ghost, mais ta technique ne marche pas pour moi, et pour cause, mon site n'a pas de largeur définie contrairement à ton exemple, puisque l'intérêt est justement qu'il s'adapte à la résolution d'écran.
Don mission non accomplie pour moi Smiley sweatdrop mais bon, c'est pas non plus la mort Smiley ravi
Je n'ai pas suivi tout le détail du sujet, mais quelques remarques (qui ne seront donc pas forcément pertinentes):

1. L'utilisation de colonnes flottantes est effectivement pratique lorsqu'il s'agit de positionner un pied de page en dessous des colonnes, quelle que soit la hauteur de celles-ci.

2. Alternativement, on peut utiliser... un tableau de mise en page à trois colonnes. Ça ne fera pas grand mal, et on gagnera du temps.

3. Si aucune de ces deux solutions ne convient, on pourra limiter les dégâts en utilisant une hauteur minimale (min-height) sur la colonne centrale, de sorte qu'avec un contenu «normal» dans les colonnes latérales et avec une taille de texte standard, le pied de page soit correctement placé même si le contenu de la colonne centrale est court. Si la quantité de contenu des colonnes latérales est imprévisible et pas estimable, cette technique sera cependant inutile.

4. Il existe d'autres moyens d'empêcher le dépassement des flottants et de faire un retour à la ligne après des flottants que l'utilisation de la propriété clear. Faire une recherche sur les dépassements de flottants.

5. On peut restreindre la portée de la propriété clear à l'aide d'un contexte de formatage. Faire une recherche à ce sujet (premier lien dans google Smiley cligne ).

Voili voilou. Smiley smile
Salut,
des pistes très intéressantes Smiley cligne
Je pense que la min-height serait la plus simple et pourrait fonctionner étant donné que les 2 parties latérales sont figées en hauteur ... cependant IE interprète bien les valeurs minimales ?

Allez zou on resteste !
Merci Florent Smiley biggrin
Sujet clos
Aller à