Jump to content

Agrandir la colonne de gauche [RESOLU]


Recommended Posts

si tu veux agrandir ta colonne de gauche il faut modifier les propriétés de #left_column dans le global.css.

si tu augmentes la taille en px il faut penser à garder en tête que la largeur de la colonne de gauche + celle du milieu + celle de droite = 980px (=taille de la page réglée dans le global.css aussi).

si tu veux une colonne extensible il faut entrer des valeurs en %

Link to comment
Share on other sites

Troley merci pour ta réponse.

en fait mon problème est le suivant sur certaine page la colonne centrale s'agrandit en fonction du texte mais ma colonne de gauche garde la même hauteur, je voudrais donc que ma colonne de gauche est une hauteur variable qui soit fonction de la hauteur de la colonne centrale.

si j'applique des valeurs en % à ma left column cela ne fonctionne pas non plus.

Link to comment
Share on other sites

après quelques recherches, voici la solution

il faut rajouter un container qui va englober les colonnes centrales et de gauche dans le fichier header.tpl

<!-- Header -->

{$shop_name|escape:'htmlall':'UTF-8'}



{$HOOK_TOP}



<!-- container -->


<!-- Left -->

{$HOOK_LEFT_COLUMN}




<!-- Center -->

{/if}


puis dans le css rajouter
/* global layout */
#page {
width: 1024px;
min-height:100%;
border: 1px #000000 solid;
margin: 0 auto 2px auto;
text-align:left;
}
#container{
min-height:453px;
width: 1024px;
background:#000000;
}


voilà problème résolu
Link to comment
Share on other sites

  • 10 months later...
Bonjour,
chez moi, je n'arrive pas à faire fonctionner cette solution.
J'aimerai que mes 3 colonnes fassent 100% de la hauteur, car je veux mettre une image de fond répétitive (repeat-y) dans chaque colonne, et l'image sera fermée en bas par le background-image du pied de page.

Dans mon header.tpl, il y a une balise #columns déjà présente, sans code css dans le global.css, que j'ai utilisé comme div container.
Je ne comprend pas non plus à quoi sert la classe "column" dans ce code.
J'aurai bien besoin d'un peu d'aide, merci à vous.

Voilà mon code header.tpl :
[code]
<!-- container -->

<!-- Left -->

{$HOOK_LEFT_COLUMN}

<!-- Center -->

{/if}[/code]
Mon footer.tpl (pour fermer les div) :
[code] {if !$content_only}


<!-- Right -->

{$HOOK_RIGHT_COLUMN}

<!-- Columns-->

<!-- Footer -->

<!-- Page -->
{/if}
</body>
</html>[/code]
mon global css pour les parties concernées :
[code]/* global layout */
#page {
width: 980px;
margin-top: 20px;
margin-left:auto;
margin-right: auto;
text-align: left;
min-height:100%;
}
#columns{
min-height:453%;
width: 980px;
background: black;
}
#left_column, #center_column, #right_column {
float: left;
}
#left_column {
clear: left;
width: 212px;
overflow: hidden;
background-image: url("../img/background_left.jpg");
background-color: black;
background-repeat: repeat-y;
background-position:0 0;
}
#center_column {
width: 556px;
margin: 0 0 0 0;
overflow: hidden
}
#right_column {
width: 212px;
overflow: hidden;
background-image: url("../img/background_left.jpg");
background-color: black;
background-repeat: repeat-y;
background-position:0 0;
}[/code]
Link to comment
Share on other sites

ça y est, c'est tout bon, j'ai trouvé la soluce en étudiant le code d'un thème tout fait de chez alsacreations.

Je récapitule : On touche pas au header.tpl ni au footer.tpl, on utilise la balise #columns qui s'y trouve déjà.
on ne touche qu'au global css, moi j'ai rajouté dans la partie /* global layout */ du global.css de mon thème, vers la ligne 190, le css suivant :

#columns { 
   background: url(../img/background_columns.jpg) repeat-y;
   overflow: hidden;
   width: 100%;
} 


Comme mon image "columns" remplace les images des 3 colonnes, j'ai bien sûr enlevé les background-image du css de mes colonnes.

Merci.

Link to comment
Share on other sites

  • 11 months later...

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
×
×
  • Create New...