synchroniser hauteur center colum et left column

[ultraxa]

bonjour

j'utilse la transparence sur mon site internet

c'est a dire que je n'affiche en blanc le block left-colum et center-column

ce qui implique que l'on voit la diffrence de hauteur entre les 2 bloc , or si je fixe la hauteur , sur certaine page (par exemple la page contact ) j'ai du contenu juste en haut de la page et donc le reste est vide

 

je souhaiterais synchroniser la hauteur de la colonne cnetrale avec la gauche

 

comment faire sur le css

 

 

 

merci

[ultraxa]

je me souviens p^lus comment savoir que l'on est sur tele ou tel page , comme cela , je changerai de style par rapport a la page

merci

[virtualgadjo]

salut,

 

deux choses

- pour savoir sur quel page on est, ps met un identifiant sur le body, ça aide à faire des surcharges dans les css (un des rares trucs bien fait en css d'ailleurs...)

 

- tu pourrais gérer tes fonds en css en faisant un fond commun pour tes deux colonnes, comme ça elles auront apparemment la même hauteur en toutes circonstances même sans contenu, vieux truc de victime de maquette en colonnes

sinon, tu peux aussi faire ça en js mais honnêtement, bien que js ultra fan je n'en vois pas trop l'intérêt

 

have swing

[ultraxa]

c'est pas vraiment un probleme de fond , mais plutot la hauteur des colonnes

comme les pages centrale s'augmentent par rapport au contenu (genre si l'on a 30 produits sur la page , ce n'est pas la meme hauteur que 10) , il faudrait que la hauteur de la colonne de gauche se cale dessus

[Atch]

Salut,

 

virtualgadjo te donne la réponse :

 

tu pourrais gérer tes fonds en css en faisant un fond commun pour tes deux colonnes,

 

En gros il faut que tu ajoutes un BG au div id=columns qui regroupe les deux BG en un...

C'est la meilleure astuce pour avoir la même hauteur à chaque page.

 

V++

 

Atch

[virtualgadjo]

oui, mais physiquement, qu'est-ce qui montre qu'une des deux colonnes n'est pas aussi haute que l'autre ? sa couleur ou image de fond ou un filet autour ?

 

dans le cas d'un filet, tu vas devoir passer par js (tu peux t'en passer pour les navigateurs qui comprennent display table-cell mais ce n'est pas le cas de ie7 sur lequel difficile de faire l'impasse...

 

have swing

[ultraxa]

en faite le fond de #centercolum est transparent , on voit le background du site

mon fond de @leftcolum est blanc et le fond des pages (produits..contact..) est blanc

obligatoirement comme j'ai moins de contenu dana sma colonne de gauche , elle est mois haute qeu la page centrale

et inversement avec par exemple ma page contact ou celle ci a moi de contenu que la colonne gauche

vous voyez ce que je veux dire ?

 

par exemple , la page contact

 

il faudrait que dans mon css que la hauteur de

#leftcolum {}

se cale avec la hauteur de la page contact

#contact{}

[virtualgadjo]

re,

 

yes, mais c'est exactement ce que je te disais et que pointe atch... fais un fond large qui couvre les deux colonnes (tu peux d'ailleurs faire ça aussi avec du fond à droite un centre vide et du fond à gauche, gif ou png8 - ou 32 si comme moi tu t'en tapes de ie6)

il faudrait voir le truc mais si ton fond est une couleur uni une mini bande avec du fond là ou il en a besoin et de la transparence là où il en faut comme fond de ce qui contient tes deux blocs et hop le tour est joué que ce soit le bloc de gauche ou le bloc central qui pousse la page le fond suit tout le long

 

have swing

[ultraxa]

re,

 

yes, mais c'est exactement ce que je te disais et que pointe atch... fais un fond large qui couvre les deux colonnes (tu peux d'ailleurs faire ça aussi avec du fond à droite un centre vide et du fond à gauche, gif ou png8 - ou 32 si comme moi tu t'en tapes de ie6)

il faudrait voir le truc mais si ton fond est une couleur uni une mini bande avec du fond là ou il en a besoin et de la transparence là où il en faut comme fond de ce qui contient tes deux blocs et hop le tour est joué que ce soit le bloc de gauche ou le bloc central qui pousse la page le fond suit tout le long

 

have swing

la je ne comprend plus

 

je n'ai pas de fond large puisqu'il est en transaprent , mon fond que je vois c'est le background du body

[virtualgadjo]

en fait, si j'ai bien compris, tu as deux blocs, voisins verticalement dont tu veux qu'ils donnent l'impression de faire la même hauteur

- un bloc n'a pas de fond

- l'autre a un fond

correct ?

 

si oui, la solution simple consiste à ce que ces deux blocs soient dans un conteneur commun (c'est probablement le cas) et que le fond des deux blocs (ou d'un seul) soit géré par le conteneur commun qui lui prend toujours la bonne hauteur

 

par ex tu as un bloc de 250 px de large et un de 600, celui de 600 n'a pas de fond et celui de 250 si

tu fais un fond de 250px de large (le coup du fond large avec de la transparence c'est en cas de besoin, là, ce ne serait pas le cas) et tu mets ce fond, non pas comme fond du bloc de 250px mais du bloc parent en repeat-y et positionné, oeuf corse, sous le bloc de 250px

en faisant ça, si ton bloc de 600px de large à un contenu de 1000px de haut son conteneur (leur conteneur commun donc) aussi, forcément et ton fond va s'étendre sur 1000px de haut même si le bloc de 250px de large n'en fait que 300de haut donnant ainsi l'impression qu'il fait la même hauteur que son voisin

simple et efficace, crois-moi

 

have swing

[ultraxa]

 

par ex tu as un bloc de 250 px de large et un de 600, celui de 600 n'a pas de fond et celui de 250 si

tu fais un fond de 250px de large (le coup du fond large avec de la transparence c'est en cas de besoin, là, ce ne serait pas le cas) et tu mets ce fond, non pas comme fond du bloc de 250px mais du bloc parent en repeat-y et positionné, oeuf corse, sous le bloc de 250px

en faisant ça, si ton bloc de 600px de large à un contenu de 1000px de haut son conteneur (leur conteneur commun donc) aussi, forcément et ton fond va s'étendre sur 1000px de haut même si le bloc de 250px de large n'en fait que 300de haut donnant ainsi l'impression qu'il fait la même hauteur que son voisin

simple et efficace, crois-moi

 

have swing

 

 

 

 

j'ai pas tout compris

voir carrement pas compris

 

j'ai fait un petit dessin , il faut que les partie blanche soit a la meme hauteur

c'est a dire le lftrcolum et de l'autre la hauteur de la page (ici pageproduit)

[ultraxa]

je reviens sur mon sujet qui n'est pas encore reglé

 

la solution serait de pouvoir lire la valeur de la heuteur des 2 colonnes (center colum et left colum)

et lorsque le" height "de" leftcolum" est plus grand que" height" de "center colum" alors forcer le height de centercolum = height left colum et si

le" height "de" centercolum" est plus grand que" height" de "leftcolum" alors forcer le height de leftcolum = height centercolum

 

merci