Jump to content

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


Recommended Posts

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) post-312540-0-76348400-1348700034_thumb.jpget ce que je veux comme affichage (ce-que-je-veux.jpg) post-312540-0-24782000-1348700193_thumb.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 by balibaba (see edit history)
Link to comment
Share on other sites

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 !

Link to comment
Share on other sites

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 by balibaba (see edit history)
Link to comment
Share on other sites

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;
}

Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

Oups j'ai parlé trop vite ! :D

 

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

Link to comment
Share on other sites

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;

Link to comment
Share on other sites

ç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 by balibaba (see edit history)
Link to comment
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
×
×
  • Create New...