Jump to content

Colonne de gauche avec height à 100%

TSalm
 Share

Recommended Posts

TSalm Newbie

TSalm

Posted
Posted

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

Link to comment
Share on other sites
  • 3 months later...
Patrick_64 Newbie

Patrick_64

Posted
Posted

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

Link to comment
Share on other sites
Atch Newbie

Atch

Posted
Posted
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
Link to comment
Share on other sites
Patrick_64 Newbie

Patrick_64

Posted
Posted

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
Link to comment
Share on other sites
Patrick_64 Newbie

Patrick_64

Posted
Posted

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
Link to comment
Share on other sites
coeos.pro Collaborator

coeos.pro

Posted
Posted

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;

Link to comment
Share on other sites
Patrick_64 Newbie

Patrick_64

Posted
Posted

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

Link to comment
Share on other sites
coeos.pro Collaborator

coeos.pro

Posted
Posted

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.

Link to comment
Share on other sites
coeos.pro Collaborator

coeos.pro

Posted
Posted

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.

Link to comment
Share on other sites
coeos.pro Collaborator

coeos.pro

Posted
Posted

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...