CSS homefeatured appliquées à product_list : problème d'alignement

[balibaba]

Bonjour,

 

Je suis en version 1.5

 

J'ai essayé plusieurs modules permettant d'afficher les produits soit en liste soit en grille mais rien de concluant.

J'ai donc essayé d'afficher la liste des produits en mode grille par défaut en laissant tomber le switch entre les modes d'affichage.

Pour ça j'ai modifié product_list.css en me basant sur ce qui a été fait pour homefeatured.css dans le thème de base.

Mais je n'arrive pas à mettre les 4 blocs produits les uns à côté des autres. Ils sont les uns en dessous des autres.

 

Je mets en PJ ce que ça donne (ce-que-jai.jpg) et ce que je veux comme affichage (ce-que-je-veux.jpg) . Avec les cases à cocher du comparateur à côté.

 

Voici mon fichier product_list.css :

 

ul#product_list {

list-style-type: none

}

#product_list li {

margin-bottom: 14px;

padding: 12px 8px;

border: 1px solid #eee;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px

}

#product_list li a {

color: #000;

text-decoration: none

}

 

#product_list li .left_block {

float:left;

padding-top:58px;

width:15px

}

#product_list li .left_block .compare label {display:none;}

 

#product_list li p.compare input {

vertical-align: text-bottom

}

 

#product_list li .center_block {

float: left;

padding:0 7px;

/*width: 542px;/* 356 */

width:180px;

height:320px;

border-right:1px dotted #ccc

}

#product_list a.product_img_link {

overflow:hidden;

position:relative;

float: left;

display:block;

margin-right: 14px;

border: 1px solid #ccc

}

#product_list a.product_img_link img {

display: block;

vertical-align: bottom

}

#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: #ff007e;

}

#product_list li h3 {

font-size:14px;

color:#000;

padding: 0 0 20px;

}

#product_list li a {

color: #000;

text-decoration: none;

}

 

#product_list li p.product_desc {

overflow: hidden;

padding:0;

line-height:16px;

}

#product_list li p.product_desc {font-size:12px;},

#product_list li p.product_desc a {

color:#666;

}

 

#product_list li .right_block {

position:absolute;

float: left;

width: 145px;

text-align: right;

padding-top:235px;

padding-left:50px

}

#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {

display: block;

font-weight: bold;

color: #ef0606;

text-transform: uppercase

}

#product_list li .discount {

position:absolute;

top:0;

right:0;

display: inline-block;

font-weight: bold;

padding: 1px 5px;

font-size: 10px;

color: #fff;

text-transform: uppercase;

background: none repeat scroll 0 0 #ef0606

}

#product_list li .online_only {

margin:0 0 10px 0

}

#product_list li .content_price {

display: inline;

margin-top:10px;

padding:0;

}

#product_list li .price {

font-weight:bold;

font-size:18px;

color:#ff7800

}

 

#product_list li span.availability {

display:none;

color: #44c635

}

#product_list li .ajax_add_to_cart_button {

padding-left: 20px

}

#product_list li .ajax_add_to_cart_button span {

display: block;

position: absolute;

top: -1px;

left: -12px;

height: 26px;

width: 26px;

background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent

}

#product_list li .lnk_view {

display: block;

margin-top:15px;

padding:0 10px;

border:none;

font-weight:bold;

color:#0088CC;

background:url(../img/arrow_right_1.png) no-repeat 100% 4px transparent

}

#product_list li .lnk_view:hover {text-decoration:underline} [/code]

 

 

 

Merci à tous de votre aide.

Edited September 26, 2012 by balibaba (see edit history)

[YopixelAE]

Bonjour postez une url ce sera + pratique.

[balibaba]

Voici l'url de la page :

http://www.petitskoalas.com/index.php?id_category=3&controller=category

 

J'ai essayé avec inline à la place de block mais ça ne marche pas. Je ne dois pas l'appliquer correctement.

 

Merci

[Stéphane Chonez]

bonjour,

 

essayer en ajoutant un float:left; à :

#product_list li {
float:left;
margin-bottom: 14px;
padding: 12px 8px;
border: 1px solid #eee;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px
}

[balibaba]

Avec le float left ça fonctionne ! Merci Stéphane.

 

Par contre, la barre grise en bas de page qui contient le bouton comparer s'est étendu sous les produits. COmment la remettre à sa taille initiale ?

 

Et je n'ai plus de lien sur les produits pour rédiriger vers leur fiche produit. Je ne trouve pas ce que j'ai bien pu modifier pour que ce lien disparaisse...

 

Merci de votre aide très précieuse !

[Stéphane Chonez]

testez en mettant un clear:left; à :

.content_sortPagiBar {
clear: left;
margin: 20px 0;
}

dans globall.css ligne 319

Edited September 28, 2012 by Stéphane Chonez (see edit history)

[balibaba]

Merci Stéphane, je vais essayer ça ce soir en rentrant du boulot

 

J'ai un autre soucis sous IE l'affichage du bloc prix est complètement décallé ! Fichu IE ça ne marche jamais pareil !

[Stéphane Chonez]

je sais pas quelle version tu utilise! chez moi pas de soucis ! V9.0

[balibaba]

C'est sous IE7 et IE8 que le bloc prix est decallé vers la droite. Du coup le prix du produit 1 se trouve sous le produit 2, le prix du produit 2 sous le produit 3 et le prix du produit 3 est carrément dans la colonne CMS de droite.

Edited September 28, 2012 by balibaba (see edit history)

[balibaba]

Merci Stéphane, le clear left fonctionne. La barre du comparateur est bien fixe.

 

Par contre je n'ai plus les liens vers les fiches produit sur mes produits en mode grille...Sais tu d'où ça peut venir ?

Et je ne peux plus cocher les cases du comparateur.

 

Merci beaucoup de ton aide très précieuse !

Edited September 29, 2012 by balibaba (see edit history)

[Stéphane Chonez]

re,

 

je n'avais pas tout regardé mais y'a des soucis....

 

adapte le code de #product_list li .right_block dans product_list.css ligne 89 comme ceci :

 

#product_list li .right_block {
   float: right;
   padding: 0 7px;
   text-align: right;
   width: 195px;
}

 

et pour #product_list li .center_block ligne 31

#product_list li .center_block {
   display: inline;
   float: left;
   padding: 0 7px;
   width: 195px;
}

[balibaba]

Tout fonctionne à merveille !

 

Comme je n'y connais pas grand chose en intégration je bidouille petit bout par petit bout en regardant ce qui marche...et parfois il y a des dommages collatéraux

 

En tout cas merci beaucoup de ton aide et de ta réactivité !

 

J'ai fait des modif depuis hier, que penses tu du site ?

[balibaba]

Oups j'ai parlé trop vite !

 

Sur la page des nouveautés, j'ai un produit qui est complètement décalé à droite (FF14 et IE8).

J'ai l'impression que c'est parce que la hauteur de chaque bloc produit n'est pas la même, par exemple quand il y a la mention "Exclusivité web".

J'ai essayé de rajouter une hauteur fixe au bloc produit mais du coup le produit d'en dessous vient se mettre par dessus celui du dessus et le footer vient manger sur la dernière ligne de produits.

 

Sur IE8 le background de mon menu horizontal est doublé car le dernier item ne tient pas alors que sur FF c'est bon. Une idée ?

 

Merci

[Stéphane Chonez]

alors pour ton pb de bloc, essaye de mettre un min-height:330px; à #product_list li dans product_list.css ligne 5

#product_list li {
   border: 1px solid #EEEEEE;
   border-radius: 3px 3px 3px 3px;
   float: left;
   margin-bottom: 14px;
   padding: 12px 8px;
   width: 225px;
  min-height: 330px;
}

 

et pour le menu, il faut mettre l'image de fond en 'no-repeat' à .sf-menu dans superfish-modified.css ligne 16 :

background: url("../img/bg_blocktopmenu.png") no-repeat scroll 0 0 transparent;

[balibaba]

ça fonctionne merci Stéphane.

 

Quelle est la différence entre min-weight et une hauteur fixe ? Pourquoi l'un fonctionne et pas l'autre alors que ça revient à avoir une hauteur imposée?

 

J'ai une dernière question et après j'arrête de t'embêter : je souhaiterais que les boutons ajouter au panier soient tous sur la même ligne même si il y a la mention Exclusivité web ou même si le libellé du produit n'a pas le même nombre de ligne. Car là les boutons ajout sont à des niveaux différents du coup ça donne un effet d'escalier qui gène la lisibilité.

 

Merci encore de ton aide.

Edited September 30, 2012 by balibaba (see edit history)