28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Je viens de m'inscrire à cause d'un problème de template

Je voudrais une présentation en 3 colonnes dont celle de gauche et droite ont une largeur fixe, et celle du milieu prend la place restant et va jusqu'au bord quand la partie droite n'est pas affichée.
Je n'arrive pas à le faire car il faut que ça s'adapte avec la résolution d'écran donc pas de taille fixe, min ou max du cadre central.

Le css est ici : http://www.lazareth.info/advances2/index.php?option=com_content&task=blogsection&id=0&Itemid=9&lang=fr
et le site ici : http://www.lazareth.info/advances2/templates/joomlabox_10_05/css/template_css.css

Merci d'avance, le problème est assez urgent
Modifié par GregBond007 (02 May 2006 - 10:22)
Aloha !

Avant de reposer ta question ici, je te conseille de faire un tour sur les gabarits de mise en page en CSS proposés par Raphaël.
Tu y trouveras la réponse à ta question, je te conseille particulièrement ce modèle :
Un site en trois colonnes et largeur fluide en positionnement flottant

Normalement, avec le positionnement flottant, tu pourras réaliser ce que tu souhaites, c'est-à-dire prendre compte du fait que la colonne de droit peut être absente.

Néanmoins, pense aussi à jeter un coup d'oeil sur ce modèle, en positionnement absolu, qui peut aussi t'être utile :
Un site en trois colonnes et largeur fluide en positionnement absolu

En espérant t'avoir aidé !
Modifié par Upsilon (02 May 2006 - 10:59)
J'ai déjà travaillé à partir de ces modéles ce matin mais ça ne marche pas car :
1) le center est placé en margin-left et margin-right donc si la colonne de droite n'existe pas, le centre ne s'étend pas
2) je ne peux pas tout mettre en position absolute vu que j'ai déjà des positions relatives car je dois recouvrir une partie des onglets du header donc garder une position relative

à moins qu'il y ait une autre solution à ça car c'est gentil de recouvrir 10px du header mais après, je suis obligé pour tous les div de faire un
position: relative;
top: -10px;


Edit :

Ah bah tiens, je crois avoir une solution de rechange :
- s'il existe un module de droite, on affiche le centre avec le margin left et right de la taille des 2 autres colonnes
- s'il n'existe pas de module de droite, on affiche le width à 100%
donc 2 styles différents au bout

Je vais essayé tout à l'heure mais si vous avez plus propre que des "if" dans un template, c'est mieux, merci.


Edit :

Eh non, ça ne marche pas Smiley sweatdrop
Modifié par GregBond007 (02 May 2006 - 13:05)
Je me permets un petit up car ça ne marche toujours pas.

Sous IE, le center est bien placé mais comme il est défini en margin par rapport à left et right, il ne s'étend pas quand il n'y a pas de bloc de droite

Sous FF, il se place carrément sous les 2 blocs et prend toute la longueur.
Ouhlà merci, tu me sauves Smiley smile

J'ai trouvé pile poil ce que je voulais mais ça m'oblige toujours a changer le style d'après la présence ou non du bloc de droite mais au moins ça marche Smiley biggrin


Merci à tous ceux qui ont lu le message et particulièrement à Upsilon et Papyjo.

J'ai peut-être joué le boulet car ce problème doit être assez courant mais vraiment pas moyen de trouver ce que je voulais et je n'aurais pas pensé à ce que j'ai trouvé. D'ailleurs, je ne comprends pas tout mais le principal est que j'ai pu l'adapter correctement.

Merci encore et bonne journée à vous. Smiley ravi