6 replies to this topic

[sabrinaandree]

bonjour,

mon site à deux colonnes, une centrale et celle de gauche.
J'ai appliqué un couleur d'arrière plan à la colonne de gauche.
Je voudrai que la colonne de gauche s'agrandisse en même temps que ma colonne centrale,


est-ce que quelqu'un aurait une idée ?

merci

[Trolet]

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 %

[sabrinaandree]

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.

[sabrinaandree]

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

Quote

<!-- Header -->

{$HOOK_TOP}

<!-- container -->

<!-- Left -->

{$HOOK_LEFT_COLUMN}

<!-- Center -->

{/if}

puis dans le css rajouter

Quote

/* 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

• Back to top

[ringostare]

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 :

   

                
                

                    {$HOOK_TOP}
                

            

            <!-- container -->
            

                <!-- Left -->
                

                    {$HOOK_LEFT_COLUMN}
                

                <!-- Center -->
                

    {/if}

Mon footer.tpl (pour fermer les div) :

        {if !$content_only}
                

[ringostare]

ç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.

[yvesbj]

bonjour, cette solution n'est plus possible sur la version 1.4.
Moi j'aimerais l'étendre sur la longueur. Auriez vous une autre astuce ? merci