28172 sujets

CSS et mise en forme, CSS3

Positionnement colonne par rappor à une autre

hello,suite à vos bons conseils de la dernière fois, je post a nouveau un petit souci de css.
je suis en train de bosser sur une nouvelle boutique en ligne www.monsoinbio.com

le site est concu de facon à ce que la colonne droite se trouve sous la colonne gauche (en bas là ou il y la newsletter etc...

mon pb est que si par exemple vous clique sur panier (lorsque celui ci est vide) la rightcolumn remonte et se retrouve superposée à la left. j'ai donc essayé de mettre els 2 colonne en absolute car en tout logique d'après ce que j'ai compris c'est de cette facon que le second "objet" se positionne par rapport à son 1er ancètre en absolute ou alors j'ai mal compris.

bref, pas moyen d'obtenir cela, en fait je souhaiterais que ma colonne droite reste toujours sous ma gauche et que elle descende plus bas en cas de besoin (quand il y a plein de produits sur la page par exemple.

pourriez vous m'aider svp. merci d'avance

voici le code des colonnes:
.page {width:890px; margin:auto;}
h1#logo {float:left; background:none;} 
#header {width:890px; margin:auto; position:relative;}
#top {margin-bottom:1em;}
#main_center_column { margin:auto; width:890px;}
#left_column, #right_column {float:left;}
#left_column {position: absolute; clear:left; width:202px; margin-top:0em}
#right_column {position: absolute;  background:url('../img/dotted_stuffs.gif') top left no-repeat; clear:both; margin-top:25em}
#right_column ul  { width:953px}
#right_column div {margin:1em 0 0 0}
#right_column h5 a:hover {text-decoration:underline}
#center_column {width:890px; margin:auto; padding:0 0 1em 0; background:#FFFFFF}
div.cms {width:670px; margin-top:1.8em; float:right; padding-bottom:2em}
body#my-account #left_column, body#history #left_column, body#order-slip #left_column, body#identity #left_column, body#order-slip #left_column, body#discount #left_column {display:none}
Bonjour,

J'arrive pas à voir le problème que tu décris sur firefox, ni sur internet explorer, tu pourrais éventuellement faire des screenshot pour qu'on comprenne bien de quoi tu parles?

Si tu veux faire du positionnement absolu sur ton left column, alors enlève les float left: c'est soit l'un, soit l'autre.

a écrit :
j'ai donc essayé de mettre els 2 colonne en absolute car en tout logique d'après ce que j'ai compris c'est de cette facon que le second "objet" se positionne par rapport à son 1er ancètre en absolute ou alors j'ai mal compris.


Le positionnement aboslu prend comme référence le premier ancêtre positionné (c'est à dire qui a position différent de static: absolute, relative, etc.). Ici, l'ancêtre direct de left column, c'est center column: sauf erreur de ma part, il n'est pas positionné.

des liens pour t'aider sur le positionnement:
initiation au positionnement en css partie 1 sur alsacréations
initiation au positionnement en css partie 2 sur alsacréations
voici une capture.
http://i44.servimg.com/u/f44/11/34/49/21/captur10.jpg
le chevauchement est en bas à gauche.
ce n'est pas la colonne gauche que je veux positionner c'est la droite (ou plutôt celle du bas) que je veux positionner par rapport à la gauche donc left colonne est bien en position absolute et si je mets right column en absolue ca ne fonctionne pas.
Modifié par cockpitinferno (24 Nov 2011 - 12:08)
si tu veux positionner right_column, right_column doit être en absolute, et son noeud parent (center_column d'après ton code) en relative. si tu veux positionner right_column par rapport à left_column, left_column doit être en relative et contenir right_column.
je viens de m'ajouter un nouveau problème. j'ai ajouté un slider dans la partie centrale à droite et du coup a me décale ma colonne gauche vers el bas et pour le moment le seul moyen que j'ai trouvé est de remettre cette colonne en absolute mais du coup si je fais ca j'ai à nouveau mon problème exposé plus haut.
je commence à ne plus y voir clair, est ce que qqun à une piste pour résoudre ce pb.
merci d'avance.
un petit up, j'ai réussi à trouver une solutin temporaire mais je ne suis pas entièrement satisfaite, j'ai mis le block editorial en absolute et tout est aligné mais du coup si j'ajoute beaucoup de choses sur la age d'accueil, ca se supperpose sur les produit de la page d'accueil (puisque le blok editorial est en absolute, c'est logique)

y aurait il une autre facon de faire.
merci d'avance.
je viens de regarde un peu ce que je pouvais changer mais je ne vais pas pouvoir faire grand chose pour le moment la dessus. les modifs sont à faire dans les tpl et ce n'est aps moi qui ai fait le module donc j'ai peur de faire des bétises.
de plus il y a des trucs qui me paraissent être de fausses erreur. et je ne suis pas sure que cela va résoudre mon problème de mise en page.

en fait j'ai réussi à tricher sur la page d'accueil en mettant la partie ou il y a le slideshow en absolute et en décalant vers le bas mes produits.
Sujet clos
Aller à