[Solucionado] Cómo muestro el product-list horizontalmente?

[Syd]

Hola,

quisiera que a la hora de mostrar el product-list se mostraran los productos horizontalmente con su descripción abajo, al estilo por ejemplo de esta web:

 

http://www.exoticind...andAccessories/

 

En mi web ahora mismo se muestra en una fila la foto, a la derecha la descripción y a la derecha el precio..., por ejemplo:

 

http://www.asianexot...?id_category=27

 

Muchas gracias,

Salu2

Edited July 18, 2012 by Syd (see edit history)

[shacker]

pega este codigo en tu global.css al final

 

 

 

 

/* product-list.tpl */

ul#product_list{ margin-top:4em; list-style-type:none; height:100% }

ul#product_list li {

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

float: left;

height: 460px;

margin-bottom: 0.3em;

margin-left: 5px;

padding: 16px;

position: relative;

width: 140px;

}

ul#product_list li:hover {

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

}

ul#product_list li a {

text-decoration:none;

color:#374853;

}

 

ul#product_list a.product_img_link{

border: solid 1px #d0d3d8;

float:left;

margin-right:0.6em;

}

 

ul#product_list a.product_img_link img{

vertical-align:bottom;

}

ul#product_list li h3{

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

display: table-cell;

float: left;

height: 40px;

margin: 10px 0 0 -10px;

min-height: 40px;

padding-left: 13px;

position: relative;

text-align: left;

vertical-align: bottom;

width: 128px;

font-size:13px }

ul#product_list li .new{

background:transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;

border:1px solid #555;

color:white;

font-size:0.6em;

font-weight:bold;

margin:0pt 1em 0pt 0pt;

padding:0pt 0.4em;

text-transform:uppercase;

vertical-align:0.3em;

}

ul#product_list li p.product_desc{

/* float: left;*/

font-size: 0.92em;

max-height: 131px;

min-height: 130px;

overflow: hidden;

position: relative;

width: 136px;

}

ul#product_list li div.center_block{

float:left;

width:100%;

}

ul#product_list li div.right_block{

float:left;

width: 11em;

text-align:right;

margin-left:1em;

margin-top:0;

}

ul#product_list li .discount{

color:#da0f00;

text-transform:uppercase;

font-weight:bold;

display: block;

}

ul#product_list li .on_sale{

color:#da0f00;

text-transform:uppercase;

font-weight:bold;

display: block;

}

ul#product_list li .reduction {

display: block;

margin-bottom: 0.3em;

}

ul#product_list li .price{

display: block;

font-size: 170%;

margin-bottom: 0.2em;

}

ul#product_list li span.availability{

/*float: right;*/

color:#555;

font-size:0.9em;

}

ul#product_list li a.button{ margin-left: 15px;

margin-top: 0.5em; }

[Syd]

Muchas gracias,

 

ahora es como quería, sólo que aún está descuadrado. Me gustaría encajarlos en el columns y reducir los espacios...

[shacker]

en el product list.css, deberas modificar esta linea

 

ul#product_list

 

 

 

y poner un width:750px

 

 

pero en el global.css tienes un height que hace qhe los productos se salgan

 

#center_column

 

height:450px

[Syd]

Gracias, ya lo he hecho, pero se me queda muy abajo. He cambiado margin-top y top para subir los productos de la lista, pero se me sigue quedando muy abajo... Luego el pagination se queda a la derecha también

[shacker]

es que esa parte la tienes con tamaños fijos. deberias poder poner 4 o 3 productos por pagina desde preferencias, productos

[Syd]

Sí, sí, ya lo puse antes en 4 productos, pero al margen de los tamaños fijos, no se puede subir un poco el nivel de los productos y poner el pagination debajo de ellos? Solo con eso encajaría en las medidas

gracias

[Syd]

Alguna ayudita con esto, por favor?

Muchas gracias

[ErikSebastia2]

Alguna ayudita con esto, por favor?

Muchas gracias

 

Tienes un problema con el CSS. Descargate e instala el plugin para Firefox de Firebug. Esto te ayudara a modificar el CSS.

 

El problema lo tienes en la linea 437 de global.css en el atributo "Top". Dale un valor de 300 px.

 

Saludos cordiales

Edited July 17, 2012 by ErikSebastia2 (see edit history)

[Syd]

Hola, gracias, ya lo he solucionado, lo único que me queda es ubicar el botón comparar y el pagination debajo de los productos. He probados varias chapuzas, pero sólo quedaron en eso. A ver si me podéis ayudar a rematarlo.

Muchas gracias.

Saludos

 

Por cierto, suena muy bien ese plugin de firefox, muchas gracias por la recomendación.

Edited July 17, 2012 by Syd (see edit history)

[shacker]

al comparar, editas este archivo

 

product-compare.tpl

 

y donde hay una <p>

 

cambias a

 

<p style="position; relative; float; right; clear: both">

[Syd]

Buenos días,

el pagination está abajo y dentro de columns, está muy bien, pero el compare está abajo pero fuera de columns. He probado a ponerlo float;left, pero sigue igual, a ver si se puede meter en columns y colocar a la izquierda,

Gracias

[shacker]

 

 

agrega un width a esta clase en el global.css y voila

 

.img_prod {

• position: absolute;
  
• top: 260px;
  
• text-align: right;
  
• width: 650px;
  

}

[Syd]

Entró! pero no consigo alinearlo a la izquierda

gracias

[shacker]

no se puede todo en la vida

 

al <p>

 

añadele esto

style="clear:both; position:relative;float:left;width:100%"

[Syd]

no se puede todo en la vida

 

Está claro . El caso es que se queda en la derecha y un poco fuera del columns

[shacker]

con eso que te pase tambien?

[Syd]

Así lo teng, con la compilación activa y todo:

 

<p style="clear:both; position:relative;float:left;width:100%">

<input type="submit" class="button" value="{l s='Compare'}" style="float:right" />

<input type="hidden" name="compare_product_list" class="compare_product_list" value="" />

</p>

[nadie]

Estimado Syd después de realizar una investigación en su nave enterprise, prueba cambiar esto:

 

<input type="submit" class="button" value="{l s='Compare'}" style="float:right" />

 

Por esto:

 

<input type="submit" class="button" value="{l s='Compare'}" style="float:left" />

[Syd]

Muchas gracias, increible pero cierto, era como ver una aguja en un pajar,

y perdonad por tantas molestias,

un saludo y gracias

[nadie]

Muchas gracias, increible pero cierto, era como ver una aguja en un pajar,

y perdonad por tantas molestias,

un saludo y gracias

Un placer ayudarte y servirte!

 

Si das el tema como solucionado, edita el titulo del tema y añade la palabra "Solucionado" al titulo, esto ayudara a mantener una mayor organización en el foro.

 

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

[shacker]

de nada. Cualquier otro problema abre otro post