Foros del Web » Creando para Internet » CSS »

problema con galeria para tiendas virtuales

Estas en el tema de problema con galeria para tiendas virtuales en el foro de CSS en Foros del Web. Hola amigos, pues primero agradecerles por leer esto: La verdad es que estoy haciendo una galeria de productos con precios y titulos en css, que ...
  #1 (permalink)  
Antiguo 23/05/2011, 11:22
 
Fecha de Ingreso: febrero-2011
Ubicación: cali, valle del cauca
Mensajes: 158
Antigüedad: 5 años, 11 meses
Puntos: 8
problema con galeria para tiendas virtuales

Hola amigos, pues primero agradecerles por leer esto:

La verdad es que estoy haciendo una galeria de productos con precios y titulos en css, que vienen desde la base de datos. Lo quiero hacer en mosaico la galeria pero en la segunda pagina me sale desordenado la imagen. ¿Como devo hacer para que todo me salga bien organizado?
Código HTML:
Ver original
  1. <div class="prod_box">
  2.  
  3.             <div class="center_prod_box">            
  4.                  <div class="product_title"><a href="ver-co_'.$row["id_producto"].'-tienda_'.$row["id_tienda"].'-'.$d.'.html">'.$row['nom_producto'].'</a></div>
  5.                  <div class="product_img"><a href="ver-co_'.$row["id_producto"].'-tienda_'.$row["id_tienda"].'-'.$d.'.html"><img src="http://localhost/tuluacomercial/files/'.$row["fot_miniatura"].'"  alt="" title="" border="0" /></a></div>
  6.                  <div class="prod_price"><span class="reduce"></span> <span class="price">$'.$valor.'</span></div>                        
  7.             </div>
  8.            
  9.             <div class="prod_details_tab"><a href="ver-co_'.$row["id_producto"].'-tienda_'.$row["id_tienda"].'-'.$d.'.html" class="prod_details">Ver</a>            </div>                    
  10.         </div>

y el css:
Código CSS:
Ver original
  1. .prod_box{
  2. width:173px;
  3. height:auto;
  4. float:left;
  5. margin:10px;
  6. text-align: center;
  7. padding:8px;
  8. }
  9. .center_prod_box{
  10. width:173px;height:
  11. auto;float:left;
  12. text-align:center;
  13. padding:8px;
  14. margin:0px;
  15. border:1px #F0F4F5 solid;
  16. }
  17. .prod_details_tab{
  18. width:173px;
  19. height:31px;
  20. float:left;
  21. margin:3px 0 0 0;
  22. }
  #2 (permalink)  
Antiguo 23/05/2011, 15:25
 
Fecha de Ingreso: abril-2003
Mensajes: 150
Antigüedad: 13 años, 9 meses
Puntos: 1
Respuesta: problema con galeria para tiendas virtuales

A la clase .center_prod_box cámbiale el height:auto; por un alto definido (no lo dejes en auto).

Y El link de 'ver' colocalo dentro de la clases .center_prod_box. Y este link ya no neceita 'float:left'

Código HTML:
 <div class="prod_box">
     
                <div class="center_prod_box">            
                     <div class="product_title"><a href="ver-co_'.$row["id_producto"].'-tienda_'.$row["id_tienda"].'-'.$d.'.html">'.$row['nom_producto'].'</a></div>
                     <div class="product_img"><a href="ver-co_'.$row["id_producto"].'-tienda_'.$row["id_tienda"].'-'.$d.'.html"><img src="http://localhost/tuluacomercial/files/'.$row["fot_miniatura"].'"  alt="" title="" border="0" /></a></div>
                     <div class="prod_price"><span class="reduce"></span> <span class="price">$'.$valor.'</span></div>  
                     <div class="prod_details_tab"><a href="ver-co_'.$row["id_producto"].'-tienda_'.$row["id_tienda"].'-'.$d.'.html" class="prod_details">Ver</a> </div>                           
                </div>
               
                               
            </div> 
Código HTML:
    .prod_box{
    width:173px;
    height:auto;
    float:left;
    margin:10px;
    text-align: center;
    padding:8px;
    overflow:hidden; /* NEW*/
    }
    .center_prod_box{
    width:173px;
    height:300px;  /* NEW*/
    float:left;
    text-align:center;
    padding:8px;
    margin:0px;
    border:1px #F0F4F5 solid;
    }
    .prod_details_tab{
    width:173px;
    height:31px;
    /*float:left;*/
    margin:3px 0 0 0;
    }
  #3 (permalink)  
Antiguo 23/05/2011, 19:40
 
Fecha de Ingreso: febrero-2011
Ubicación: cali, valle del cauca
Mensajes: 158
Antigüedad: 5 años, 11 meses
Puntos: 8
Respuesta: problema con galeria para tiendas virtuales

Cita:
Iniciado por lizfranco Ver Mensaje
A la clase .center_prod_box cámbiale el height:auto; por un alto definido (no lo dejes en auto).

Y El link de 'ver' colocalo dentro de la clases .center_prod_box. Y este link ya no neceita 'float:left'

Código HTML:
 <div class="prod_box">
     
                <div class="center_prod_box">            
                     <div class="product_title"><a href="ver-co_'.$row["id_producto"].'-tienda_'.$row["id_tienda"].'-'.$d.'.html">'.$row['nom_producto'].'</a></div>
                     <div class="product_img"><a href="ver-co_'.$row["id_producto"].'-tienda_'.$row["id_tienda"].'-'.$d.'.html"><img src="http://localhost/tuluacomercial/files/'.$row["fot_miniatura"].'"  alt="" title="" border="0" /></a></div>
                     <div class="prod_price"><span class="reduce"></span> <span class="price">$'.$valor.'</span></div>  
                     <div class="prod_details_tab"><a href="ver-co_'.$row["id_producto"].'-tienda_'.$row["id_tienda"].'-'.$d.'.html" class="prod_details">Ver</a> </div>                           
                </div>
               
                               
            </div> 
Código HTML:
    .prod_box{
    width:173px;
    height:auto;
    float:left;
    margin:10px;
    text-align: center;
    padding:8px;
    overflow:hidden; /* NEW*/
    }
    .center_prod_box{
    width:173px;
    height:300px;  /* NEW*/
    float:left;
    text-align:center;
    padding:8px;
    margin:0px;
    border:1px #F0F4F5 solid;
    }
    .prod_details_tab{
    width:173px;
    height:31px;
    /*float:left;*/
    margin:3px 0 0 0;
    }
Muchas gracias amigo todo esta muy claro

Etiquetas: galeria, tiendas, virtuales
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:51.