28111 sujets

CSS et mise en forme, CSS3

Mise en page footer

Bonjour,

ça fait 3 jours que je m'arrache les tifs pour réussir ma mise en page. le but recherché est grosso modo comme celui décrit sur cette page:

http://www.alsacreations.com/articles/modeles/g_fixe.htm

seulement voilà mon souci est que le site sera réalisé sous SPIP et que les tailles des blocs "menu gauche" et "contenu" seront variables en permanence.

Le problème avec cette mise en page est qu'il n'y a que le bloc "contenu" qui pousse le "pied de page". Si le "contenu" est inferieur en taille au bloc "menu gauche", alors le pied remonte sous ce menu...ce qui tout compte fait est assez disgracieux!

Je ne trouve pas ma solution...avec IE ça marche mais sous Firefox c'est la cata.

Si quelqu'un veut bien m'éclairer dans ma nuit, ce serait vraiment chouette.

A+
Bonjour etc et bienvenue sur ce forum.

Ce sujet est régulièrement abordé sur le forum, il est conseillé avant de poser une question de faire une recherche, il y a bien souvent des réponses pertinentes.
Sinon les extraits de code et/ou un lien sont toujours les bienvenues pour voir de quoi il retourne.
Pour ton pied de page tu pourrais essayer à tout hasard:

#pied{
 clear:both;}

Dans le cas où tu utiliserais des floatants, tu peux peux voir ces deux sujets:
http://forum.alsacreations.com/topic.php?fid=2&tid=831&p=1#p8610
http://forum.alsacreations.com/topic.php?fid=2&tid=831&p=1#p8610

Si le coeur t'en dit tu peux aussi faire un tour au bar du forum sur le topic des présentations.
Puis-je me permettre une réflexion d'ordre générale, à voir ce problème revenir régulièrement ici (et ailleurs) avec d'autres du type "gestion de la hauteur" ?

Les difficultés rencontrées avec de tels templates sont l'inévitable défaut, tout à fait normal, d'une approche du positionnement CSS qui privilégie son mécanisme le plus rigide, c'est à dire le positionnement absolu.

Le principe de base de la mise en page CSS est l'interaction entre les boîtes (flux, float, display:table et affiliés). Plus les boîtes sot libres d'agir les unes sur les autres, et moins il y a de risque de "casse" du layout dû à une question de contenu trop long, trop court, etc.

En revanche, le positionnement absolu est un mécanisme d'exception, qui ne devrait être employé qu'en tant que tel, puisqu'il abstrait totalement la boîte concernée de l'interaction en bloc/en ligne. Autrement dit: On ne positionne un élément en absolu qu'après s'être assuré qu'il dispose en toutes circonstances de tout l'espace nécessaire, aussi bien en hauteur qu'en largeur.

Concrètement, dans le template utilisé ici, il y a un défaut de conception indéniable: le pied de page ne devrait pas s'étendre sous le menu, mais devrait au contraire avoir une largeur et une marge gauche identique à celle du contenu principal, de manière à laisser le menu gauche vivre sa vie en toute indépendance Smiley cligne

<haute diplomatie>
Je ne dis pas que le template de Raphael est mauvais Smiley cligne Il reflète simplement moins la logique CSS2 que celle de DreamWeaver, qui a commis de lourds dégâts en conduisant les gens à privilégier le positionnement absolu sans les précautions nécessaires.
</gros sabots>
Oui, j'ai eu une ou 2 fois ce genre de discussion avec Raphaël, le positionement absolu causant parfois plus de problèmes qu'il n'en réglait.
Je trouve que c'est un bon résumé que tu as fait là. Attention aussi à ne pas oublier le positionement relatif, souvent jeté aux oubliettes mais bien souvent très pratique Smiley cligne

Donc, du flux le plus possible, du float pour le colonage (du display: table; si on accepte la dégradation sous IE, pas toujours évident), et du positionement relatif pour rester dans le flux sans interargir avec lui, et enfin du positionement absolu pour sortir totalement du flux et être totalement indépendant du reste des éléments non positionnés.
Petite précision: le positionnement relatif, en dépit de son nom courant et de son recourt à la propriété position.... n'est pas un positionnement. Une boîte en position relative est une simple mise en boîte en flux (interragissant totalement avec les boîtes "voisines" selon les règles du flux, ayant des dimensions calculées en tant que tel, etc), mais décalée ensuite de son emplacement.
ElMoustiko a écrit :
du float pour le colonage (du display: table; si on accepte la dégradation sous IE, pas toujours évident)

La dégradation la plus aisée du display:table sous IE étant tout simplement le float... elle n'a rien d'inacceptable Smiley cligne

a écrit :
et du positionement relatif pour rester dans le flux sans interargir avec lui


J'avais lu trop vite lorsque j'ai posté mon message précédent. Donc j'enfonce encore un peu le clou : le positionnement relatif est en pleine interraction avec le flux.
Bah oui mais si tu décale une "boite" en relatif vers la gauche en la faisant sortir de son conteneur (graphiquement) la "boite" parente ne bronche pas. De même si tu décales vers le haut une "boite" en relatif, les "boites" d'en dessous ne broncheront pas non plus et resterons là où elles sont... je trouve ça moyen comme interaction moi
J'en profite pour signaler qu'en plus des Modèles de mise en page en CSS présentés ici, modèles qui soit dit en passant n'utilisent que le positionnement absolu, il existe layout-o-matic, un générateur de modèles, The Layout Reservoir de bluerobot.com ainsi que les CSS Layout Techniques: for Fun and Profit de glish.com. Ces ressources sont toujours une bonne source d'inspiration. Pour les plus aventureux, Creating Liquid Layouts with Negative Margins saura bien vous voler quelques heures ne serait-ce que pour comprendre comment les différentes parties interagissent.
Merci Igor pour le "clear:both".

Une fois n'est pas coutume, c'est souvent un petit rien ou un petit pas grand chose qui permet de venir à bout d'un probléme qui semblait insoluble.

Le respect des standards, ça se mérite, faut être têtu.

Plus je viens et reviens sur ce site et plus je m'éloigne du "retenez-moi ou je fais un tableau !"

Désolé de n'avoir pas recherché suffisament avant de poster (on ne m'y reprendra pas), en attendant cela semble avoir permis d'amener de nouvelles contributions pour le débat (merci donc à tous les autres).

Ma mise en page est désormais faite il me reste maintenant à mettre en forme ma <div id="contenu">.

Merci encore.

A+
mikaël
Sujet clos
Aller à