28220 sujets

CSS et mise en forme, CSS3

Bonjour!

Je me pose une question en ce moment et comme je trouve pas d'exemple ou de solution après plusieurs recherche... pourquoi pas la poser ici! Smiley smile

Alors c'est tout simple... Je veux faire un design en position:absolute avec un header + 3 colonnes Jusque là pas de problème... maintenant ce qui me pose problème c'est le footer... car j'aimerais ne pas le mettre en absolute!

Le contenu de mon site varie selon les pages... c'est dynamique donc je ne peux pas savoir à l'avance la taille de la page en pixel (verticalement je parle)

Et donc si je met un footer en absolute bah parfois ca s'inscrit sur le contenu...

Je ne veux pas non plus que ca "colle" au contenu car si il y a qu'un petit contenu il va etre trop haut! il faudrait qu'il soit "poussé" par le contenu au cas où celui-ci est plus grand que les 2 colonnes de côté mais qu'il reste au minimum au niveau des 2 colonnes si la page n'est pas longue...

Quelqu'un aurait-il une solution? c'est que théorique j'ai pas de code à vous donner... c'est pour moi comprendre un peu mieux le positionnement absolu et ses limites car pour moi c'est une vrai limite ce problème... ??

(j'espère avoir été claire dans mes explication!)

Merci!
Modifié par Boulou (13 Apr 2006 - 09:17)
Plop,

Bon si on reste dans de la théorie, le positionnement absolute avec bottom permet de fixer un élément en bas d'un autre élément (positionné bien sûr : p) quelque soit sa hauteur.

Si on admet que ton footer a une hauteur fixe, il te suffit de le mettre en absolute avec bottom à 0 dans ton conteneur principal et d'appliquer un margin-bottom à tes colonnes de la hauteur de ton footer pour éviter le chevauchement.

Voilà comment je tenterais pour ma part : >
Boulou a écrit :
Je veux faire un design en position:absolute avec un header + 3 colonnes Jusque là pas de problème... maintenant ce qui me pose problème c'est le footer... car j'aimerais ne pas le mettre en absolute!

Le contenu de mon site varie selon les pages... c'est dynamique donc je ne peux pas savoir à l'avance la taille de la page en pixel (verticalement je parle)


Je pense que ton problème n'a pas de solution. Une des limites considérables du positionnement absolu est que tu n'as pas l'équivalent du "clear" pour la propriété float. Ta div est totalement retirée du flux du document. Tu n'as pas de moyen de positionner un élément flottant ou placé dans le flux normal sous le contenu d'une div en position absolute. Tu as encore moins moyen de placer un document sous la plus longue de tes div postionnées de la sorte.

Si tes 3 divs sont en positionnement absolu, la démarche proposée par tyx est, à ma connaissance, la meilleure.
Modifié par phdm (12 Apr 2006 - 18:02)
Bonjour,

Pour un footer sans positionnement absolu, tu peux utiliser "clear: both;" dans le div de ton bas de page. Cela évitera tout chevauchement ; n'étant pas positionné en absolu, il reste dans le flux du document, et donc à sa place (soit en bas de page, si on le positionne comme tel dans le balisage).

div#footer {
    clear: both;
    margin: xxxx;
    padding: xxxx;
    width: xxxx;
    height: xxxx;
    }

Pour un positionnement absolu, le conseil de Tyx est le bon je crois.
Modifié par Smiley neko (12 Apr 2006 - 15:25)
Merci beaucoup pour ces solutions et surtout explications!

Je tenterais sans doute la solution de Tyx!

Merki Smiley cligne
peut être que cela peut t'aider :
ici
le pied de page est en absolu mais un script permet de replacer selon la taille de la page