[Résolu] Pb positionnement subcategory

[balibaba]

Bonjour,

 

Je n'arrive pas à positionner les sous catégories les unes à côté des autres.

Je sais que c'est quelques chose de tout simple mais pourtant j'ai testé dans la CSS : inline, display block, réduire la largeur des images. Mais mes connaissances en intégration s'arrêtent là et je n'ai rien trouvé dans le forum qui a fonctionné comme je le veux.

 

C'est pour un aspect purement esthétique certe mais ça permettra également de pouvoir faire remonter les produits car sur certains rayons j'ai 8 ou 10 sous catégories du coup on ne voit plus du tout mes produits !

 

Voici ce que j'ai comme positionnement

et voici ce que je souhaiterais avoir

Voici la CSS :

 

/* *************************************************

SUB CATEGORIES

**************************************************** */

#subcategories {margin-top:10px}

#subcategories h3 {

padding:14px 12px;

font-size:13px;

color:#fff;

text-transform:uppercase;

text-shadow:0 1px 0 #666;

background:url(../img/bg_table_th.png) repeat-x 0 0 #a8967e

}

 

.inline_list {

display:inline;

list-style-type:none;

margin-top:10px;

}

.inline_list {

padding:10px 0;

border-bottom:1px dotted #ccc

}

.inline_list li .img {

margin-right:15px

text-align:center;

 

}

.inline_list li img {

border:1px solid #ccc

}

.inline_list li .cat_name {

font-weight:bold;

font-weight:13px

 

}

 

 

Est ce qu'il faut intervenir également dans le global.css ? Si oui ou ?

Quand je regarde les css avec firebug ou webdevelopper il m'affiche un bout du global CSS mais ce n'est pas spécifique aux sous catégories et je ne veux pas que ça impacte les autres pages...

 

Merci de votre aide car ça me fait tourner en boutique !

[Stéphane Chonez]

bonjour,essayer de

 

rajouter ceci à votre feuille de style :

.inline_list li {
   float: left;
   text-align: center;
}

 

par contre il y a des pb dans la feuille de style doublon de class et un point virgule est absent après margin-right:15px de .inline_list li .img

 

essayer ce code

/* *************************************************
SUB CATEGORIES
**************************************************** */
#subcategories {margin-top:10px}
#subcategories h3 {
padding:14px 12px;
font-size:13px;
color:#fff;
text-transform:uppercase;
text-shadow:0 1px 0 #666;
background:#a8967e url(../img/bg_table_th.png) repeat-x 0 0
}
.inline_list {
display:inline;
list-style-type:none;
margin-top:10px;
padding:10px 0;
border-bottom:1px dotted #ccc
}
.inline_list li {
   float: left;
   text-align: center
}
.inline_list li img {
border:1px solid #ccc
}
.inline_list li .cat_name {
font-weight:bold;
font-weight:13px
}

[balibaba]

Merci beaucoup Stéphane.

Je vais abuser encore un peu de ta gentillesse et de tes compétences.

 

Les catégories se sont bien positionnées sur la même ligne.

Par contre les titres se positionnent à côté et non en dessous, je n'arrive pas à les remettre à la ligne.

 

Voici ce que ça me donne :

 

Merci encore pour ton aide.

[Stéphane Chonez]

pas de problèmes

 

essaye en mettant une largeur à ton LI

.inline_list li {
   float: left;
   text-align: center;
width:150px
}

[balibaba]

Nickel !!! J'ai mis la largeur à 90px pour que les textes longs passent sur deux lignes.

 

Merci beaucoup !

 

Je passe le post en résolu.

[balibaba]

Comment fait-on pour passer le post en résolu ?...

[Stéphane Chonez]

il faut réediter le titre du premier message ;-)