Modification bloc Catégorie

[Fab67]

Bonjour,

ne connaissant rien à la programmation (pour le moment), je souhaiterais avoir un petit coup de main concernant une modification du bloc catégorie.
En effet, je souhaiterais que la hauteur de celui-ci ne soit pas variable mais fixe selon une longueur définie quelque soit son contenu.
De plus, est-il possible de mettre un bloc plusieurs fois dans un même espace. Exemple, je souhaite répéter le bloc publicité à droite 3x avec un contenu différente à chaque fois

Merci par avance pour votre aide

[Cédric Girard]

Bonsoir

Au niveau du bloc de hauteur fixe (donc du DIV categories_block_left dans ton fichier global.css), ajouter les deux lignes suivantes :

       min-height: 300px;
       height: 300px;

(ici pour une hauteur fixe de 300 pixels)

Concernant la répétition du bloc publicité, je ne vois pas comment tu peux utiliser le même bloc pour afficher des choses différentes, sauf à démultiplier ce bloc en trois blocs différents...

Bonne soirée

Cédric

[DrÿSs']

Déplacé sur le forum Développement et Graphisme.

[Fab67]

Merci Cedric pour ton aide.

J'ai encore besoin d'un petit coup de pouce.....Maintenant le contenu du bloc n'est plus mis en page car l'espace entre chaque ligne est important....Comment remettre tout cela en haut du bloc...

[Cédric Girard]

Tu aurais un lien ? Ce serait plus facile pour t'aider car là je ne comprends pas réellement ce qui se passe ;-) (sans voir c'est pas facile !)

[Fab67]

Ci-joint un visuel

[Cédric Girard]

Et le code HTML et CSS de ton menu ?...

Je penche pour un padding (ou un margin) trop important, ou qui se répercute sur les éléments du menu... Ou alors un line-height qui traîne...

[Fab67]

Ci-dessous le code

/* Block categories */
div#categories_block_left ul.tree { padding-left:0.5em; }
div#categories_block_left ul.dhtml{ display:none; }
div#categories_block_left ul.tree li {
border:none;
padding-left:15px;
background: none;
margin-left:0;
font-weight:bold;
font-size:13px;
line-height:13px;
margin-top:2px;
min-height:50px;
height: 100px;

}
div#categories_block_left ul.tree li ul li{
padding-left:15px;
background:none;
font-size:11px;
font-weight:normal;
}
div#categories_block_left ul.tree li ul li ul li{
padding-left:15px;
font-size:9px;
}
div#categories_block_left ul.tree a{
padding-left:0;
color:#bbb;
}
div#categories_block_left ul.tree a:hover{
text-decoration:none;
}
div#categories_block_left ul.tree a.selected{
color: #488c40;
font-weight: bold;
}
div#categories_block_left span.grower{
display:block;
float:left;
background-position: 0px 3px;
background-repeat: no-repeat;
width:9px;
height:15px;
margin: 0 0 0 -10px!important;
margin: 0 0 0 -6px;
padding: 0;
}
div#categories_block_left span.OPEN { background-image: url('../img/icon/less.gif'); }
div#categories_block_left span.CLOSE{ background-image: url('../img/icon/more.gif'); }

[Cédric Girard]

Alors, visiblement tu as mis mon code pas au bon endroit ;-)

Essayes ça :

/* Block categories */
div#categories_block_left ul.tree { padding-left:0.5em; min-height:100px; height: 100px;
}
div#categories_block_left ul.dhtml{ display:none; }
div#categories_block_left ul.tree li { border:none; padding-left:15px; background: none; margin-left:0; font-weight:bold; font-size:13px; line-height:13px; margin-top:2px; }
div#categories_block_left ul.tree li ul li{ padding-left:15px; background:none; font-size:11px; font-weight:normal;
}
div#categories_block_left ul.tree li ul li ul li{ padding-left:15px; font-size:9px;
}
div#categories_block_left ul.tree a{ padding-left:0; color:#bbb;
}
div#categories_block_left ul.tree a:hover{ text-decoration:none;
}
div#categories_block_left ul.tree a.selected{ color: #488c40; font-weight: bold;
}
div#categories_block_left span.grower{ display:block; float:left; background-position: 0px 3px; background-repeat: no-repeat; width:9px; height:15px; margin: 0 0 0 -10px!important; margin: 0 0 0 -6px; padding: 0;
}
div#categories_block_left span.OPEN { background-image: url(’../img/icon/less.gif’); }
div#categories_block_left span.CLOSE{ background-image: url(’../img/icon/more.gif’); }

En fait tu avais mis la hauteur mini pour chaque élément du menu (balises li se trouvant dans la balise ul de classe .tree (3ème ligne de ton css) alors qu'en fait, on veut définir cette hauteur mini pour le menu dans son ensemble (donc la balise ul de classe .tree, pas ses "enfants" !)

[Cédric Girard]

Je pense que tu devrais revoir les bases du CSS... C'es très simple une fois qu'on a compris le truc ;-)

[Fab67]

ok merci en tout cas pour ton aide......