[RESOLU] Changer alignement sous categories (de vertical à horizontal)

[xscream_007]

Je n'arrive pas après divers recherche à changer l'apparence de la Sous-catégorie.

 

J'ai cela :

 

 

Et je souhaiterai comme cela :

 

Edited November 6, 2012 by mathieu gerentes (see edit history)

[DeyDDy]

Bonsoir mathieu,

 

Dans thémes/ css/ category.css modifie à la ligne 55

 

 

 

.inline_list li {

padding:10px 0;

border-bottom:1px dotted #ccc

}

.inline_list li .img {

float:left;

margin-right:15px

}

 

par

 

.inline_list li {

overflow:hidden;

width:90px;

float:left;

margin-bottom:8px;

padding: 10px 15px;

}

.inline_list li .img {

overflow: hidden;

width:90px;

float:left;

margin-right:15px

}

[xscream_007]

Cool ça marche. terrible, merci merci beaucoup DeyDDY

[DeyDDy]

pas de quoi

 

Tu peut mettre "Résolu" en éditant ton premier post

 

merci

[xscream_007]

J'ai encore un petit problème (je débute et je suis un peu perdu encore)

 

Je souhaiterai une séparation entre "sous catégorie" et la liste de produits

et que le choix de "tri" sois en dessous

 

Voir image

 

[DeyDDy]

Bonjour mathieu,

 

Je vois que tu as mis tes produits en grille

je pense qu'il manque quelques chose dans le product_list.css

 

tu as un lien vers ta boutique ?

[xscream_007]

Merci de ton aide précieuse.

 

En effet les produits sont affichés en grille

 

Voici un lien vers la boutique : http://www.phoneacce...achées-iphone-5

 

Voila mon résultat :

 

 

Voici mon code CSS : category.css

 

.resumecat {
margin:15px 0 10px 0;
padding:8px 7px;
color:#000;
background:#f0f0f0;
}
.content_scene_cat {
padding:5px;
border:1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 1px #e2e2e2;
-webkit-box-shadow: 0 1px 1px #e2e2e2;
box-shadow: 0 1px 1px #e2e2e2;
}
.cat_desc {
font-size:12px;
line-height:18px;
}
.cat_desc p {padding:0 10px 5px 10px}
.cat_desc .lnk_more {
  padding:0 10px;
  color:#0088CC;
background:url(../img/arrow_right_1.png) no-repeat 100% 4px transparent;
}

/* ************************************************************************************************
  SUB CATEGORIES
************************************************************************************************ */
#subcategories {margin-top:15px}
#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 #999
}
.inline_list {
list-style-type:none;
margin-top:10px ;
}

.inline_list li {
overflow:hidden;
width:90px;
float:left;
margin-bottom:8px;
padding: 10px 15px;
}
.inline_list li .img {
overflow: hidden;
width:90px;
float:left;
margin-right:15px
}
.inline_list  li img {
border:1px solid #ccc
}

 

Et le code : product_list.css

 

.shopbybrand{width:666px;padding:0 20px 20px;background:transparent url(../img/shadow.png) repeat-x left bottom;}
.shopbybrand ul{overflow:hidden}
.shopbybrand li{float:left;height:305px;margin-bottom:10px;margin-right:20px;padding:0 0 1px;position:relative;width:207px;text-align:center}
.shopbybrand li p.product_img_link {
   text-align: center;
   width: 100%;height:200px;
}
.shopbybrand li a.button{
background: #21A5B7; /* Old browsers */
background: -moz-linear-gradient(top, #21A5B7 0%, #098394 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#21A5B7), color-stop(100%,#098394)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #21A5B7 0%,#098394 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #21A5B7 0%,#098394 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #21A5B7 0%,#098394 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#21A5B7', endColorstr='#098394',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #21A5B7 0%,#098394 100%); /* W3C */
   border: 1px solid #098394;
   color: #FFFFFF !important;}
.shopbybrand li a.button:hover{
background: #3bd2e6; /* Old browsers */
background: -moz-linear-gradient(top, #3bd2e6 0%, #21A5B7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3bd2e6), color-stop(100%,#21A5B7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3bd2e6 0%,#21A5B7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3bd2e6 0%,#21A5B7 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #3bd2e6 0%,#21A5B7 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bd2e6', endColorstr='#21A5B7',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #3bd2e6 0%,#21A5B7 100%); /* W3C */
   border: 1px solid #098394;
   border-radius: 3px 3px 3px 3px;
   color: #ffffff !important;}
.shopbybrand li.last_item{margin-right:0}
.shopbybrand li h3{  margin: 5px 0;
   max-height: 30px;text-align:left;  color: #000;
   font-size: 18px;
   font-weight: 700;}
.shopbybrand li h3 a{   color: #333;
   font-size: 18px;
   font-weight: 700;}
.shopbybrand li p{text-align:left;margin:0!important}
ul#product_list{#margin-bottom:20px;list-style-type:none;overflow:hidden;width:666px;padding:20px 20px;}
ul#product_list li{float:left;margin-bottom:20px;margin-right:20px;position:relative;width:207px}
ul#product_list li.last_item_of_line{margin-right:0}
* html ul#product_list li{height:auto!important}
ul#product_list li a{text-decoration:none}
ul#product_list a.product_img_link{display: block;
   overflow: hidden;
   position: relative;
   text-align: center;
   width: 100%;}
#product_list li .discount {
 position:absolute;
 bottom:10px;
 left:0;
 display: inline-block;
 font-weight: bold;
 padding: 1px 5px;
 font-size: 10px;
 color: #fff;
 text-transform: uppercase;
 background: none repeat scroll 0 0 #9B0000;
 color:#fff;
}
ul#product_list a.product_img_link img{vertical-align:bottom}
ul#product_list li h3{	   margin: 5px 0;    max-height: 30px;clear:both; padding:0;}
ul#product_list li h3 a{color: #1e1e1e;
   font-size: 12px;
   font-weight: 700;}
#product_list li span.new {
  display: block;
  position: absolute;
  top: 15px;
  right:-30px;
  padding: 1px 4px;
  width: 101px;
  font-size:10px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform:rotate(45deg);
  -ms-transform: rotate(45deg);
  background-color: #990000
 }
ul#product_list li p.product_desc{color:#887d18;font-size:11px;margin:0;padding:0 5px 0 0}
ul#product_list li p.product_desc a{color:#767878}
ul#product_list li div.center_block{float:left;width:100%}
ul#product_list li div.center_block div{	 width: auto;margin:0 auto;}
ul#product_list li p.compare{color:#9b9c9c;float:left;font-size:10px;margin:10px 0 0;padding:0;width:100%;font-weight:700;}
ul#product_list li div.right_block{float:left;margin-top:0;text-align:right;width:15em}
ul#product_list li .discount,ul#product_list li .on_sale,ul#product_list li .online_only{display:block;font-weight:700;text-transform:uppercase; float:left; clear:both;}
ul#product_list li .reduction{display:block;margin-bottom:.3em}
ul#product_list li .price{color:#333333;display:block;float:left;font-size:12px;font-weight:700;margin-top:8px;width:auto}
ul#product_list li div .button,ul#product_list li div .exclusive{font-size:11px!important;float:left;text-align:center; margin-bottom:13px; }
ul#product_list li div .button span,ul#product_list li div .exclusive span{
 text-align: center;float:left;padding-right:8px;margin-right:-2px}
ul#product_list li span.availability,ul#product_list li span.outofstock{float:left;font-size:10px;font-weight:700;margin-bottom:5px;width:100%;text-transform:uppercase}
ul#product_list li span.availability{color:#5f9414}
ul#product_list li span.outofstock{color:#767878}
ul#product_list li a.button,ul#product_list li span.exclusive{margin-top:.5em}
ul#product_list li p.compare input {
   border: medium none;
   height: auto;
   padding: 0;
   vertical-align: -3px;#width:15px!important;
}
.form-compare p input {
   width: 88px; background: url("../img/button_add.png") no-repeat scroll 0 0 transparent;color:#646464!important;margin-right:20px;
}

Edited November 6, 2012 by mathieu gerentes (see edit history)

[DeyDDy]

ça va plutôt se passer dans ton css/ ultimateshop.css

 

à la ligne 251 ajoute clear:both;

[xscream_007]

ça va plutôt se passer dans ton css/ ultimateshop.css

 

à la ligne 251 ajoute clear:both;

 

 

Tes un chef. Je te tire mon chapeau.

 

BRAVO et dix-mille Merci à toi pour ton aide rapide.

[DeyDDy]

Je t'en pris

 

J'ajouterais simplement une dernière chose pour être un peut plus propre dans tes sous-catégorie

 

ligne 52 de ton category.css met plutôt width:100px voir width:110px; et ajoute aussi text-align:center;

[lordbdp]

Quelqu’un pourrait mettre des captures d'écran car celles de xscream_007 ne s'affichent plus ?

 

Merci.

[autoprestige]

bonsoir

j'ais mis en place le code css ci-dessus
je suis content car c'est beaucoup mieux

j'ais juste un petit probleme d'alignement 

quand j'ais de nombreuses sous-categorie
ci vous avez une solution 

je vous remerci d'avance.