Colonne de gauche avec height à 100%

[TSalm]

Bonjour,

J'ai repris le thème de base de prestashop.
Je voudrais que la "left_column" prenne toute la hauteur à gauche : c'est à dire collée au dessous de la banderolle en haut, et descende jusqu'au haut du footer.

Est-ce que c'est possible ou faut-il que je passe par un tableau ?

D'avance merci pour vos lumières.

- TSalm

[Patrick_64]

Salut

j'ai le même problème les colonnes de gauches et de droite s'agrandissent et se diminuent en fonction des blocks à l'intérieur, et ce n'est pas très joli.

J'aimerai moi aussi que les deux colonnes touchent le haut et le bas tout le temps.

Merci

[lenoir]

Bonjour,

Vous avez essayé de modifier le fichier global.css qui se trouve dans le répertoire de votre thème ?

Ou de retirer tous les éléments à droite pour faire de la place (ce que j'ai fais pour mon projet et ça a marcher)

[Patrick_64]

Oui, j'ai modifié le GLOBAL.CSS du thème, j'y ai mis une image à gauche et une à droite, mais quelque soit la longueur de cette image, l'affichage grandi ou dimunue en fonction de la place que prennent les modules.

Et j'aimerais que cette image en premier s'affiche en entier et qu'elle ne bouge plus.
Merci

[Atch]

Oui, j'ai modifié le GLOBAL.CSS du thème, j'y ai mis une image à gauche et une à droite, mais quelque soit la longueur de cette image, l'affichage grandi ou dimunue en fonction de la place que prennent les modules.

Et j'aimerais que cette image en premier s'affiche en entier et qu'elle ne bouge plus.
Merci

Me semblait vous avoir déjà répondu et donné une solution sur votre sujet...

V++

Atch

[Patrick_64]

Bonjour Atch,
Effectivement vous m'aviez répondu :

Bonjour,

Ne pouvant pas mettre de height 100% sur cette colonne de droite, l’idéal et le plus simple serait d’attribuer un bg contenant les deux piliers au div “column” celui qui regroupe les 3 colonnes. ainsi vous êtes sure d’avoir des piliers toujours de la meme hauteur
V++
Atch

Sur le POST d'après je vous avez demandé des précisions que je n'ai jamais eu. Mais ne vous tracassez pas je n'en ai pas pris ombrage, je comprends bien que je ne suis pas seule, et vous ne pouvez pas être partout.

Merci

[Atch]

ah désolé, j'avais pas eu la notification....

Oui je disais, qu'en faite il fallait appliquer qu'un seul BG (avec les deux colonnes gauche droite) directement dans le div column

V++

Atch

[Patrick_64]

Bonsoir,

Pas de soucis, et puis pendant un moment je n'ai pas eu de notification moi aussi.

J'ai bien compris pour le DIV COLUMN, mais ou on le trouve dans le CSS.


Merci

Anne

[Atch]

Trouve le avec firebug qui va te donner le N° dans le css....

Dans ton cas, il n'y arien d'attibuer à ce div.
donc dans ton global css tu ajoutes #columns { background etc.... }

V++

Atch

[Patrick_64]

Bien le bonjour du matin,

voila ce que j'ai dans mon CSS :

#left_column {
background: url('../img/colonne-gauche.jpg') no-repeat;
clear: left;
width: 191px;
margin-top: -8px;
margin-right: 21px;
overflow: hidden
}

#right_column {
background: url('../img/colonne-droite.jpg') no-repeat;
clear: right;
width: 191px;
margin-right: 0px;
margin-top: -8px;
margin-left: 0px;
overflow: hidden
}

eh oui, j'ai une image différente à gauche d'à droite . . ., et c'est avec ces paramètres, que la colonne s'affiche mais pas en entier. La taille de la colonne est dépendant des modules à l'intérieur.
Plus il y a de modules plus la colonne descend.
Je préfèrerais qu'elle soit d'une longueur fixe.
Merci

[coeos.pro]

Bonjour,

en CSS, on appelle ceci une colonne factice (un peu de lecture si vous voulez en savoir plus : http://www.pompage.net/pompe/colonnesfactices/ ).
En gros on va tricher, on va afficher l'image en background non pas sur les colonnes mais sur le corps de la page, et ce sera cette image : http://imm.io/media/1l/1lmI.png (il faudra enlever les extrémités qui ont la couleur de fond, de manière a obtenir une image de 1120px de large).
Il faut donc supprimer les images en background que vous avez mis et rajouter pour #page (ligne 205) :

background-image:url("../img/colonnes.jpg");
background-repeat:repeat-x;

[Patrick_64]

Salut,

merci pour l'info, j'ai essayé mais le poids de la page frôle les 800k, apparemment ça plait au chef . . . mais j'aurais quand même préféré garder mes 2 background sous colonne. comme quoi dans la vie on fait ce qu'on peut, pas ce qu'on veut (j'aurais voulu être une artiiiiiiste).

Si je voulais bloquer les hauteur des colonnes ou fixer la place du footer en bas, plus bas qu'en automatique, quelqu'un aurait une idée ?

Merci
Anne

[coeos.pro]

Pour l'image de fond vous avez placé une image de 1600px de haut du coup votre image a un poids non négligeable, je vous conseil de la réduire (par exemple 100 ou 200px de haut et de mettre backgroud-repeat:repeat-x

Pour le footer si vous voulez éviter les 2 bords de votre image précédente, rajoutez background-color:beige; dans #footer ligne 852.

[Patrick_64]

Bonsoir,
pour le footer, pas de soucis ça marche par contre pour le backgroud repeat, ça ne fonctionne pas.
j'ai fais une copie de sauvegarde de mon site sur le quel je peux bosser sans toucher au site de prod : http://decoacoeur.baissat.fr/ si vous voulez voir le résultat.
Mais avant toute chose, merci pour votre aide.
Anne

[coeos.pro]

Autant pour moi, j'ai mis background-repeat:repeat-x; c'est background-repeat:repeat-y;

Pour l'image il faut mettre par exemple http://imm.io/media/1l/1lJg.png : sans les bordures en haut et en bas et sans la partie haute, qui faut placer dans une autre image : http://imm.io/media/1l/1lJo.png par exemple:

#categories_block_left h4,cart_block h4{
background-image:url(votre_image_haut);}

ceci permet d'avoir le haut sur les 2 colonne latérales.

[Patrick_64]

c'est presque bon, encore un chti effort, les colonnes dépassent en hauteur, j'ai essayé avec le BACKGROUND-POSITION masi ça fonctionne bien à gauche mais pas en haut, grrrrrrr

et pour le haut de la colonne à gauche ok, mais à droite rien ne s'affiche

merci pour ton aide

[coeos.pro]

Pour supprimer la bande vide en haut, supprimez margin-top:0.5em; qui est dans h1#logo ligne 219

Pour la droite (je suis vraiment étourdi) j'ai oublié le # devant cart_block:
changez #categories_block_left h4,cart_block h4{ par #categories_block_left h4,#cart_block h4{...

Normalement tout doit être bon ensuite, par contre sur l'image de fond il reste un ou deux pixel à gauche en blanc, suffit de les mettre en beige et ce sera parfait.

[Patrick_64]

Chapeau bas Messire,

Regardez le résultat, c'est PARFAIT.

Merci beaucoup encore, et bonne continuation.

PS: je ne sais pas sir j'arriverai à mettre ce poste en résolu, ce n'est pas moi qui l'ai créer