Jump to content
Sign in to follow this  
balibaba

[Résolu] Pb positionnement subcategory

Recommended Posts

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

Sans%20titre-2.jpg

et voici ce que je souhaiterais avoir

Sans%20titre-1.jpg

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 !

Share this post


Link to post
Share on other sites

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
}

Share this post


Link to post
Share on other sites

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 :

Sans titre-4.jpg

 

Merci encore pour ton aide.

Share this post


Link to post
Share on other sites

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

Sans-titre-5.jpg

 

Merci beaucoup !

 

Je passe le post en résolu.

Share this post


Link to post
Share on other sites

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
Sign in to follow this  

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More