28173 sujets

CSS et mise en forme, CSS3

[Résolu] Site sur 3 colonnes en CSS, comment bien faire ?

Bonsoir à tous,

Voilà je veux faire un site sur 3 colonnes mais mon pb est le suivant en image s'est plus parlant :
upload/6846-site.gif

http://forum.alsacreations.com/smilies/attention.gif Les blocs 1 et 2 doivent aller jusqu'à toucher le Foot
http://forum.alsacreations.com/smilies/attention.gif le bloc 3 pousse le Foot. Si le texte est plus court ça remonte donc.

J'ai bien trouvé des choses mais rien de propre, la dernière info est celle ci sur ce site CSS Astuces pour mettre en place un site sur 3 colonnes mais ça pête tous les cadres SI le centre n'est pas plus grand que les colonnes de gauche et droite.. dommage je voulais ça.

Si vous avez d'autres sources, car là je ne sais plus ou chercher et soit bien être faisable non de non ! Smiley lol

Merci les filles
Modifié par Gaaaz (28 Sep 2006 - 22:46)
JeanLoup a écrit :
Moi j'ai fait ça récemment :
http://www.kocliko.fr/acmos/page.htm

ça répond à la plupart des problèmes que j'ai eu … bien que les marges soient + de la bidouille qu'autres choses … ça a le merite de bien se passer sur IE, firefox et Safari

qu'en penses vous ?

Ca pourrait le faire mais sur mon site en Bloc1 j'utilise "Border-left: solid 1px" pour désiner le cadre, alors que toi s'est des blocs sans Border, mais on se rapporche.
(sympa le design en tout cas Smiley cligne )

Autres idées ou autres tout court !
Gaaaz a écrit :

Nan malheureusement, la home est sécurisé.


Dans ce cas ma réponse aussi Smiley smile
Met clear:both quelquepart Smiley smile
noklio a écrit :


Dans ce cas ma réponse aussi Smiley smile
Met clear:both quelquepart Smiley smile

J'aimerais bien crois moi, mais bon mon projet est en cours, donc je peux pas Smiley decu

Hum je vais tester le "clear: both;"
Salut Gaaaz,

Si j'ai bien compris ton problème, tu devrais trouver un tuto clair à la page suivante. Tu peux aussi trouver divers exemples de mise en page ici. Il te faudra appliquer l'astuce décrite dans le premier lien.
Merci Jihel pour le site et les infos et merci également à mpop pour les infos Smiley smile

Bon ok ça marche bien, MAIS moi je souhaite que les 3 colonnes aillent toucher le FOOT MAIS que le FOOT ne va pas forcément en bas de page du navigateur, vous voyez ! Car le contenu peut varier !

Solution les amis pour ceci ?
Gaaaz a écrit :
Bon ok ça marche bien, MAIS moi je souhaite que les 3 colonnes aillent toucher le FOOT MAIS que le FOOT ne va pas forcément en bas de page du navigateur, vous voyez ! Car le contenu peut varier !

Comment est positionné ton pied de page ? S'il est positionné en statique (c'est à dire pas en absolu ou en fixe ou en relatif), il devrait se placer après tes colonnes, tout bêtement (avec un petit clear: both; pour l'aider passer à la ligne juste sous les flottants).

Pour ne pas avoir le motif de fond des colonnes qui s'étend sur toute la hauteur de page, mais uniquement jusqu'au pied de page, il suffit de ne pas placer l'image de fond sur body mais plutôt sur un bloc conteneur général.
Impec mpop Smiley smile

Pour résumer et pour archiver cette astuce :

Objectif : Avoir trois colonnes +Header + Footer
Spécificité : Pouvoir faire en sorte que visuellement, le site donne l'impression que les 3 colonnes partent du Header et descendent jusqu'au Footer et se quelque soit la taille que le site aura verticalement.
Astuce : Créer une image qui sera en Background

Pour se faire :
1- Prendre le Layout ici > Layout N°8
2- Remplacer la ligne : 
div#container{width:700px;margin:0 auto
par 
div#container{width:700px;margin:0 auto;background: #ccc url(/bg_700.gif) repeat-y 50% 0}

*modifer votre chemin URL
3- Créer un image de 700 x 1 à la couleur de votre fond central, et appliquer 1 pixel de couleur aux extrémités de cette image pour donner l'illusion (un peu comme Coperfield) qu'il y a bien une "vraie colonne" à part entière avec de "vraie Border" de couleur.
4- Voilà vous avez un cadre dessiné

Merci pour votre aide les enfants Smiley biggol
Sujet clos
Aller à