Foros del Web » Creando para Internet » CSS »

REPETIR DIV y productos // Sin encimarse!

 Estas en el tema de REPETIR DIV y productos // Sin encimarse! en el foro de CSS en Foros del Web. Hola a todos de nuevo :) Estoy con un problemita que me está quitando un poco el sueño: Quiero listar una cantidad de productos uno ...
  #1 (permalink)  
Antiguo 11/11/2010, 07:31
 
Fecha de Ingreso: marzo-2008
Mensajes: 171
Antigüedad: 16 años, 1 mes
Puntos: 0
REPETIR DIV y productos // Sin encimarse!
Hola a todos de nuevo :)

Estoy con un problemita que me está quitando un poco el sueño:

Quiero listar una cantidad de productos uno abajo del otro, lo que yo quiero es que el DIV se repita para abajo tantas veces productos haya, para esto hice lo siguiente:

Código: 
<?php do { ?>
        <div class="producto">
          <div id="cajaprod_titulo"><?php echo $row_Productos['descprip']; ?></div>
          <div id="imagenes_prod">
            <div id="img1"></div>
            <div id="img2"></div>
          </div>
          <div id="descrip_prod"><span class="tit_desc_prod">ID PROD:  </span><?php echo $row_Productos['id_prod']; ?><span class="tit_desc_prod"><br />
            PRECIO/PRICE: </span><?php echo $row_Productos['precio']; ?><span class="tit_desc_prod"><br />
            STOCK:</span> <?php echo $row_Productos['stock']; ?><br />
          <span class="printed"><?php echo $row_Productos['printed']; ?> </span></div>
        </div>
        <p align="justify" class="texto_gris">&nbsp;</p>
        <?php } while ($row_Productos = mysql_fetch_assoc($Productos)); ?>
El problema es que en vez de repetirlos hacia abajo, repite los registros y los encima uno arriba del otro.

No puede hacerse que repita el DIV PRODUCTO hacia abajo?

Muchas gracias desde ya y espero puedan ayudarme

Un beso grande,

Agustina
  #2 (permalink)  
Antiguo 11/11/2010, 10:46
Avatar de dargorg  
Fecha de Ingreso: octubre-2010
Ubicación: Castellón (España)
Mensajes: 188
Antigüedad: 13 años, 6 meses
Puntos: 9
Respuesta: REPETIR DIV y productos // Sin encimarse!
Los divs que posicion tienen? Absoluta, relativa? Además, para confirmarlo, ¿Nos podrías poner el CSS que tienes? Así podremos ayudarte mejor,

Un saludo,
  #3 (permalink)  
Antiguo 11/11/2010, 14:26
 
Fecha de Ingreso: marzo-2008
Mensajes: 171
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: REPETIR DIV y productos // Sin encimarse!
Hola dargorg, los DIVS tienen posicion ABSOLUTA

Dejo el Css completo:

Código: 
#cont_total {
	position: absolute;
	height: 100%;
	width: 850px;
	left: 50%;
	margin-left: -425px;
	/*overflow: auto;*/
	top: 0px;
}
.weaccept {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #EAAF00;
}
#caja_producto1 {
	position: absolute;
	height: 165px;
	width: 585px;
	top: 0px;
	left: 30px;
	background-image: url(../imagenes/bg_prod.png);
}
#imagenes_prod {
	position: absolute;
	height: 75px;
	width: 175px;
	top: 59px;
	left: 28px;
}


.withoutgris {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	color: #CCCCCC;
}
#cajaprod_titulo {
	background-color: #58C758;
	position: absolute;
	height: 20px;
	width: 573px;
	top: 21px;
	left: 6px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: underline;
}
#img1 {
	position: absolute;
	height: 75px;
	width: 75px;
	background-color: #CCCCCC;
}

#img2 {
	position: absolute;
	height: 75px;
	width: 75px;
	left: 100px;
	background-color: #CCCCCC;
}
.printed {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #00CC00;
}

.tit_desc_prod {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: underline;
}





.safer_blanco {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	color: #FFFFFF;
}
#descrip_prod {
	position: absolute;
	height: 75px;
	width: 250px;
	top: 59px;
	left: 228px;
}




#cont_total_contacto {
	position: absolute;
	height: 100%;
	width: 850px;
	left: 50%;
	margin-left: -425px;
	/*overflow: auto;*/
	top: 0px;
}

#cont_nico {
	position: absolute;
	height: 1150px;
	width: 650px;
	left: 102px;
	top: 10px;
}

#cont_nico_contacto {
	position: absolute;
	height: 650px;
	width: 650px;
	left: 102px;
	top: 10px;
}

#cont_nico_gallery {
	position: absolute;
	height: 650px;
	width: 650px;
	left: 102px;
	top: 10px;
}

#cont_nico_webshop {
	position: absolute;
	height: 850px;
	width: 650px;
	left: 102px;
	top: 10px;
}

#sombra_izq {
	background-image: url(../imagenes/sombra_larga_izq.png);
	position: absolute;
	height: 1180px;
	width: 100px;
	left: 0px;
}

#sombra_der {
	background-image: url(../imagenes/sombra_larga_der.png);
	position: absolute;
	height: 1180px;
	width: 100px;
	right: 0px;
}
#webshop_weacc {
	position: absolute;
	height: 150px;
	width: 310px;
	top: 215px;
	text-align: center;
	left: 155px;
}


#sombra_izq2 {
	background-image: url(../imagenes/sombra_larga_izq.png);
	position: absolute;
	height: 100%;
	width: 100px;
	left: 0px;
}

#sombra_der2 {
	background-image: url(../imagenes/sombra_larga_der.png);
	position: absolute;
	height: 100%;
	width: 100px;
	right: 0px;
}

html,body{margin:0;padding:0;height:100%;}
#header_logo_pp {
	position: absolute;
	height: 90px;
	width: 645px;
	top: 25px;
}
#swf_logo {
	position: absolute;
	height: 80px;
	width: 500px;
	left: -2px;
	top: 10px;
}
#paypal {
	position: absolute;
	height: 80px;
	width: 100px;
	top: 0px;
	right: 0px;
}
.textsafer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #FF9900;
}

#bg_menu {
	position: absolute;
	height: 50px;
	width: 650px;
	top: 8px;
	left: 0px;
}
#cats_webshop {
	position: absolute;
	height: 167px;
	width: 385px;
	top: 10px;
	left: 127px;
}

.copyright {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
}

#logo_pp_top {
	position: absolute;
	height: 34px;
	width: 50px;
	top: 15px;
	left: 25px;
}
#menu_botom_texto {
	position: absolute;
	height: 45px;
	width: 650px;
	top: 63px;
	left: 0px;
	text-align: center;
}

#menu_boton_logo {
	position: absolute;
	height: 25px;
	width: 290px;
	top: 0px;
	left: 180px;
}
#caja_menu {
	position: absolute;
	height: 75px;
	width: 650px;
	top: 140px;
}


.text_easier {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #FFFFFF;
}
#menu_botom {
	position: absolute;
	height: 120px;
	width: 650px;
	top: 1050px;
}

#menu_botom_contacto {
	position: absolute;
	height: 120px;
	width: 650px;
	left: 100px;
	bottom: 0px;
}

#menu_botom_gallery {
	position: absolute;
	height: 120px;
	width: 650px;
	top: 1050px;
}

#menu_botom_shop {
	position: absolute;
	height: 120px;
	width: 650px;
	top: 1050px;
}

#slidehome {
	position: absolute;
	height: 350px;
	width: 650px;
	top: 230px;
}
#sep_botom_menu {
	background-image: url(../imagenes/botom_menu.png);
	position: absolute;
	height: 5px;
	width: 650px;
	top: 60px;
}

.links_botom {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #00CCFF;
}
.links_botom_sep {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #00FFFF;
}


.links_botom:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #00CCFF;
	text-decoration: underline;
}

#titulosechome {
	position: absolute;
	height: 50px;
	width: 650px;
	top: 595px;
}

#tituloseccontacto {
	position: absolute;
	height: 50px;
	width: 650px;
	top: 225px;
	left: -2px;
}

#titulosecgaleria {
	position: absolute;
	height: 50px;
	width: 650px;
	top: 595px;
}

#titulosecshop {
	position: absolute;
	height: 50px;
	width: 650px;
	top: 225px;
}




#menu_botom_links {
	position: absolute;
	height: 15px;
	width: 650px;
	top: 35px;
	text-align: center;
}
.mail {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FF9900;
	text-decoration: underline;
}


#texto_pp_top {
	position: absolute;
	height: 20px;
	width: 100px;
	left: 0px;
	top: 56px;
	text-align: center;
}
.links {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
}


#caja_texto_home {
	position: absolute;
	height: 180px;
	width: 640px;
	top: 650px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align: justify;
	line-height: 19px;
	left: 1px;
}

#caja_texto_contacto {
	position: absolute;
	height: 180px;
	width: 640px;
	top: 280px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align: justify;
	line-height: 19px;
	left: 1px;
}


#caja_texto_galeria {
	position: absolute;
	height: 180px;
	width: 640px;
	top: 650px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align: justify;
	line-height: 19px;
	left: 1px;
}

#caja_texto_shop {
	position: absolute;
	height: 400px;
	width: 640px;
	top: 300px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align: justify;
	line-height: 19px;
	left: 1px;
}

#caja_texto_shop12 {
	position: absolute;
	height: 400px;
	width: 645px;
	top: 300px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align: justify;
	line-height: 19px;
	left: 1px;
}

#caja_texto_shop19 {
	position: absolute;
	height: 400px;
	width: 640px;
	top: 300px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align: justify;
	line-height: 19px;
	left: 1px;
}

.texto_gris {
	color: #CCCCCC;
}
.texto_naranja {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #FF9900;
}
#imagen_weship {
	position: absolute;
	height: 180px;
	width: 200px;
	top: 845px;
	left: 225px;
}

Gracias desde ya por la ayuda!

Besos,

Agus.
  #4 (permalink)  
Antiguo 11/11/2010, 14:26
 
Fecha de Ingreso: marzo-2008
Mensajes: 171
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: REPETIR DIV y productos // Sin encimarse!
Y EL CODIGO DE LA WEB por si hace falta tambien:

Código: 
<?php require_once('Connections/Nicolecron_DB.php'); ?>
<?php
$colname_Productos = "-1";
if (isset($_GET['1/12'])) {
  $colname_Productos = (get_magic_quotes_gpc()) ? $_GET['1/12'] : addslashes($_GET['1/12']);
}
mysql_select_db($database_Nicolecron_DB, $Nicolecron_DB);
$query_Productos = sprintf("SELECT * FROM productos WHERE categoria = '1/12' ORDER BY id_db ASC", $colname_Productos);
$Productos = mysql_query($query_Productos, $Nicolecron_DB) or die(mysql_error());
$row_Productos = mysql_fetch_assoc($Productos);
$totalRows_Productos = mysql_num_rows($Productos);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Nicolecron Decals | Premium water slide decals</title>
<style type="text/css">
<!--
body {
	
	background-image: url(imagenes/bgweb.jpg);
	background-repeat: repeat;
}

.producto {width: 585px;
text-align: center;
float: left;
}


-->
</style>
<link href="css/nicolecron.css" rel="stylesheet" type="text/css" /></head>

<body>
<div id="cont_total_contacto">
  <div id="cont_nico_webshop">
    <div id="header_logo_pp">
	
	<div id="paypal">
	  <div id="logo_pp_top"><img  src="https://www.paypal.com/en_US/i/logo/PayPal_mark_50x34.gif" border="0" alt="Marca de aceptaci&oacute;n" /></div>
	  <div class="textsafer" id="texto_pp_top">The safer <br />
	    <span class="text_easier">easier way to pay </span></div>
	</div>
	
      <div id="swf_logo"><img src="imagenes/logo.png" width="397" height="76" /></div>
	</div>
    
    
	
	<div id="titulosecshop"> <img src="imagenes/tit_webshop.png" width="648" height="50" /></div>
    <div id="caja_texto_shop12">
      <div id="caja_producto1">
        <div id="cajaprod_titulo"><?php echo $row_Productos['descprip']; ?></div>
        <div id="imagenes_prod">
          <div id="img1"></div>
          <div id="img2"></div>
        </div>
        <div id="descrip_prod"><span class="tit_desc_prod">ID PROD:  </span><?php echo $row_Productos['id_prod']; ?><span class="tit_desc_prod"><br />
          PRECIO/PRICE: </span><?php echo $row_Productos['precio']; ?><span class="tit_desc_prod"><br />
          STOCK:</span> <?php echo $row_Productos['stock']; ?><br />
        <span class="printed"><?php echo $row_Productos['printed']; ?> </span></div>
      </div>
      <p align="justify" class="texto_gris">&nbsp;</p>
    </div>
    
    
	
	<div id="caja_menu">
	
	<div id="bg_menu">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="120" height="50">
  <param name="movie" value="flash/boton_home.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="transparent" />
    <embed src="flash/boton_home.swf" width="120" height="50" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
      <img src="imagenes/sep.png" width="4" height="47" />   
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="120" height="50">
        <param name="movie" value="flash/boton_webshop.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <embed src="flash/boton_webshop.swf" width="120" height="50" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
      </object>
      <img src="imagenes/sep.png" width="4" height="47" /> 
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="120" height="50">
        <param name="movie" value="flash/boton_gallery.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <embed src="flash/boton_gallery.swf" width="120" height="50" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
      </object>
      <img src="imagenes/sep.png" width="4" height="47" />
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="120" height="50">
        <param name="movie" value="flash/boton_contact.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <embed src="flash/boton_contact.swf" width="120" height="50" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
      </object>
      <img src="imagenes/sep.png" width="4" height="47" />
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="120" height="50">
        <param name="movie" value="flash/boton_world.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <embed src="flash/boton_world.swf" width="120" height="50" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
      </object>
    </div>	
	
	<div id="sep_botom_menu"></div>
	
	</div>
	
  </div>	
  <div id="sombra_izq2"></div>
  <div id="sombra_der2"></div>
  
  <div id="menu_botom_contacto">
      <div id="menu_boton_logo"><img src="imagenes/logo_botom.gif" width="288" height="24" /></div>
      <div class="copyright" id="menu_botom_texto">NICOLECRON DECALS - COPYRIGHT 2010 <br />
        <strong>PHONE</strong>: 54 02302 426943&nbsp;(JUST FOR ENGLISH AND SPANISH SPEAKERS)<br />
        <a href="mailto:[email protected]" class="mail">[email protected]</a></div>
      <div id="menu_botom_links"><span class="links_botom">HOME</span> <span class="links_botom_sep">-</span> <span class="links_botom">GALLERY</span> <span class="links_botom_sep">-</span> <span class="links_botom">WEBSHOP</span> <span class="links_botom_sep">-</span> <span class="links_botom">CONTACT US</span></div>
  </div>
  
</div>
</body>
</html>
<?php
mysql_free_result($Productos);
?>
  #5 (permalink)  
Antiguo 11/11/2010, 15:59
Avatar de dargorg  
Fecha de Ingreso: octubre-2010
Ubicación: Castellón (España)
Mensajes: 188
Antigüedad: 13 años, 6 meses
Puntos: 9
Respuesta: REPETIR DIV y productos // Sin encimarse!
Hola Agus,

Estoy viendo cositas que no me gustan mucho cómo están hechas. Por ejemplo que tengas posicionados todos los divs de forma absoluta cuando tienen que ir todos en posición relativa, siguiendo todos su orden natural (excepto en algunos casos puntuales que no hay más cojones que utilizar absoluta, pero tu te estás excediendo ya con su uso).

Quita todas las posiciones absolutas, y juega con los márgenes (margin) y espaciados (padding) para posicionar los elementos donde toca. Para que vayas empezando, te pongo un código para posicionar al centro el div contenedor.

Código CSS: 
Ver original
  1. body
  2. {
  3.     text-align: center; /* para centrar en IE */
  4. }
  5.  
  6. #cont_total_contacto
  7. {
  8.     margin: 0 auto;
  9.     text-align: left;
  10.     width: 850px;
  11. }


Si necesitas más ayuda dimelo, pero ya te digo que el problema que tienes radica en lo que te he comentado. Una vez quites los position: absolute, los bottom, top, left y right... todo se solucionará!

Un saludo y suerte!!
  #6 (permalink)  
Antiguo 11/11/2010, 16:14
 
Fecha de Ingreso: marzo-2008
Mensajes: 171
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: REPETIR DIV y productos // Sin encimarse!
Cita:
Iniciado por dargorg Ver Mensaje
Hola Agus,

Estoy viendo cositas que no me gustan mucho cómo están hechas. Por ejemplo que tengas posicionados todos los divs de forma absoluta cuando tienen que ir todos en posición relativa, siguiendo todos su orden natural (excepto en algunos casos puntuales que no hay más cojones que utilizar absoluta, pero tu te estás excediendo ya con su uso).

Quita todas las posiciones absolutas, y juega con los márgenes (margin) y espaciados (padding) para posicionar los elementos donde toca. Para que vayas empezando, te pongo un código para posicionar al centro el div contenedor.

Código CSS: 
Ver original
  1. body
  2. {
  3.     text-align: center; /* para centrar en IE */
  4. }
  5.  
  6. #cont_total_contacto
  7. {
  8.     margin: 0 auto;
  9.     text-align: left;
  10.     width: 850px;
  11. }


Si necesitas más ayuda dimelo, pero ya te digo que el problema que tienes radica en lo que te he comentado. Una vez quites los position: absolute, los bottom, top, left y right... todo se solucionará!

Un saludo y suerte!!
Uyyyy no lo puedo creer :( tengo que hacer todo de nuevo

Bueno, no queda otra, asi que te consulto ya desde el principio, jeje: no puedo darle 100% alto a los divs? Porque mi idea es que se llegue hasta abajo del todo las sombras.

Gracias de nuevo, un beso, Agustina.

Etiquetas: productos, repetir
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


« Tema Anterior | Próximo Tema »


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