Modifier longueur des blocs de la colonne de gauche

[vivifromage]

Bonjour !

 

Une amie a réalisé mon site il y a un peu plus de 2 ans, avec sur la page boutique une colonne de gauche composée de 2 blocs ("catégories" et "informations") : http://vivifromage.com/shop.php

 

Je souhaite intercaler un bloc entre ces 2 blocs (avec le module 2nd block categories), mais lorsque je le fais, le bloc en question est beaucoup trop long :

 

 

Je souhaite obtenir 3 blocs dont la longueur totale est égale à la longueur de la page (qu'il faudra d'ailleurs sûrement augmenter)

 

 

J'ai pu éditer le global.css pour modifier la longueur du 1er bloc "catégories", mais je ne sais pas comment appliquer des propriétés à un nouveau bloc. Comment procéder ?

 

Merci d'avance !

[belew]

Bonjour,

 

Il faut rajouter dans global.css a la ligne 1147

 

 

height:auto;

 

 

au lieu de :

 

 

height: 375px;

 

 

++

[vivifromage]

Merci pour cette réponse, mais en faisant cette manip, le bloc "catégories" disparait totalement...

 

Voilà une copie du code concernant les blocs, je n'y connais rien mais j'ai l'impression que le style est défini pour 2 blocs uniquement et je ne peux donc pas définir la longueur du bloc que je veux ajouter en plus :

 

/* Default block style */
div.block {
margin-bottom: 9px;
width: 191px
}
div.block2 {
margin-bottom: 9px;
width: 191px
}
#left_column div.block,
#right_column div.block {
padding-bottom: 5px;
background-color: #5d5d5d;
}
#left_column div.block2,
#right_column div.block2 {
padding-bottom: 5px;
background-color: #5d5d5d;
}
div.block h4 {
text-transform: uppercase;
font-style: italic;
font-size: 1.1em;
padding-left: 2.7em;
padding-top: 12px;
line-height: 1.3em;
color: white;
height: 29px;
width: 180px;
background: transparent url('../img/block_header.png') no-repeat top left
}
div.block2 h4 {
text-transform: uppercase;
font-style: italic;
font-size: 1.1em;
padding-left: 2.7em;
padding-top: 12px;
line-height: 1.3em;
color: white;
height: 29px;
width: 180px;
background: transparent url('../img/block_header.png') no-repeat top left
}
div.block h4 a { color: #374853 }
div.block2 h4 a { color: #374853 }
div.block ul { list-style: none }
div.block2 ul { list-style: none }
div.block ul.tree li { padding-left: 1.2em }
div.block2 ul.tree li { padding-left: 1.2em }
div.block a:hover { text-decoration: underline }
#left_column div.block .block_content a.button_large,
#right_column div.block .block_content a.button_large { margin: 0 0 0 -3px }
div.block .block_content {
padding: 0 0.7em;
width: 163px;
height: 375px;
background-color: #5d5d5d;
}
div.block2 .block_content {
padding: 0 0.7em;
width: 163px;
height: 220px;
background-color: #5d5d5d;
}
div.block li {
padding: 0.2em 0 0.2em 0em;
list-style-position: outside
}
div.block2 li {
padding: 0.2em 0 0.2em 0em;
list-style-position: outside
}
div.block a {
color: white;
text-decoration: none
}
div.block2 a {
color: white;
text-decoration: none
}

 

J'ai essayé d'ajouter un div.block3 à la suite des autres à chaque fois, mais ça n'a pas fonctionné.