Problema con CSS? [SOLUCIONADO]

[Eduweb]

Buenos días, estoy modificando la plantilla que viene por defecto en prestashop 1.5

 

Me gustaría mostrar varios artículos por fila en la lista de artículos, pero hay algo que no debo estar haciendo bien, y no tengo muy claro que el problema resida en el fichero product-list.css

 

Así es como me lo está mostrando ahora mismo, tras las modificaciones que he realizado:

 

 

Me gustaría mostrar 4 artículos por fila...

 

Sabéis donde puede estar el problema?

También me gustaría que cada artículo hiciese un efecto al pasar sobre el el ratón..

 

Gracias por adelantado

 

www.parragaelectrodomesticos.com

Edited March 25, 2013 by mancalibra (see edit history)

[Eduweb]

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
 margin-top: 10px;*/
 background: none repeat scroll 0 0 #eeeeee;
 border: 1px solid #cccccc;
 border-radius: 3px 3px 3px 3px;
 float: left;
 height: auto;
 margin-bottom: 12px;
 margin-left: 14px;
 padding: 6px;
 position: relative;
 text-align: center;
 width: 156px;
}
 #product_list li a {
  color: #374853;
  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: 342px;/* 356 */
/* 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*/
  display:block;
position:relative;
overflow:hidden
}
 #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: #990000
 }
#product_list li h3 {
 padding:0 0 10px 0;
 font-size:13px;
 color:#000
}
 #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,
#product_list li p.product_desc a {
 color:#666;
}
#product_list li .right_block {
/*position:relative;
  float: left;
  width: 350px;
  text-align: right*/
}
#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {
 display: block;
 font-weight: bold;
 color: #990000;
 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 #9B0000
}
#product_list li .online_only {
 margin:0 0 10px 0
}
#product_list li .content_price {
 margin:26px 0 15px 0;
}
 #product_list li .price {
  /*font-weight:bolder;
  font-size:32px;
  color:#e1662a;
  text-shadow: 0 1px 0 #000000*/
  background: none repeat scroll 0 0 #FFFFFF;
   border: thin solid #cccccc;
  border-radius: 3px 3px 3px 3px;
  color: #e1662a;
  display: block;
  font-size: 20px;
  font-weight: bold;
  margin: 15px 0;
  padding: 8px 0 5px;
  text-shadow: 0 1px 0 #000000;
 }
 #product_list li span.availability {
  display:none;
  color: #488C40
 }
#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:#000;
 background:url(../img/arrow_right_1.png) no-repeat 100% 4px transparent
}
#product_list li .lnk_view:hover {text-decoration:underline}

 

Así es tal y como tengo ahora mismo el product-list.css

[chicoco]

Si veo tu shop parece que ya lo solucionaste.

Si es así etiquéta tu Post como solucionado.

 

Un saludo

[nadie]

Buenos días, estoy modificando la plantilla que viene por defecto en prestashop 1.5

 

Me gustaría mostrar varios artículos por fila en la lista de artículos, pero hay algo que no debo estar haciendo bien, y no tengo muy claro que el problema resida en el fichero product-list.css

 

Así es como me lo está mostrando ahora mismo, tras las modificaciones que he realizado:

 

 

Me gustaría mostrar 4 artículos por fila...

 

Sabéis donde puede estar el problema?

También me gustaría que cada artículo hiciese un efecto al pasar sobre el el ratón..

 

Gracias por adelantado

 

www.parragaelectrodomesticos.com

 

Hola !

 

Pero ahora mismo no tienes activado el "grid" en el listado de productos, tienes activado los productos en lista, al menos eso veo cuando entro en esta direccion:

 

http://parragaelectrodomesticos.com/tienda/es/6-televisi%C3%B3n

 

¿Has seguido esta guia: http://nemops.com/gr...prestashop-1-5/ ?

 

Puedes bajarte los ficheros reparados si pulsas en "Download Proyect Files".

 

 

PD: Te recomendaria meterle un truncate a la descripcion en el listado de productos, por lo que enseñas en la imagen.

[Eduweb]

Efectivamente nadie, eso es lo que buscaba, en cuanto tenga un hueco me pongo al lio y os cuento.

 

Muchísimas gracias!

[Eduweb]

Buenos días, siento no haber contestado antes.

 

Ha quedado perfecto, aunque aún me queda alguna cosilla por ajustar, pero era el resultado que buscaba, muchísimas gracias

http://parragaelectrodomesticos.com/tienda/es/145-inform%C3%A1tica-

 

Me gustaría crear un efecto para cuando pase por encima de un producto con el ratón. Doy este tema por solucionado y abro otro? O lo vemos aquí mismo?

[nadie]

Buenos días, siento no haber contestado antes.

 

Ha quedado perfecto, aunque aún me queda alguna cosilla por ajustar, pero era el resultado que buscaba, muchísimas gracias

http://parragaelectr...form%C3%A1tica-

 

Me gustaría crear un efecto para cuando pase por encima de un producto con el ratón. Doy este tema por solucionado y abro otro? O lo vemos aquí mismo?

 

Un placer ayudarte y servirte!

 

Si das el tema como solucionado, edita el titulo del tema, editando el primer mensaje, pulsando en editar, y después en "Usar editor completo", añadiendo la palabra "Solucionado" al titulo, esto ayudara, a mantener una mayor organización en el foro.

 

Un saludo y recuerda que estaremos en el foro, para guiarte por este mundo oscuro y tenebroso.

 

PD: Para nuevas dudas abre un tema nuevo en el foro.