REPETIR DIV y productos // Sin encimarse!

[MadKat]

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

[dargorg]

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,

[MadKat]

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.

[MadKat]

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);
?>

[dargorg]

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:

body
{
    text-align: center; /* para centrar en IE */
}
 
#cont_total_contacto
{
    margin: 0 auto;
    text-align: left;
    width: 850px;
}
 

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!!

[MadKat]

Iniciado por dargorg

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:

body
{
    text-align: center; /* para centrar en IE */
}
 
#cont_total_contacto
{
    margin: 0 auto;
    text-align: left;
    width: 850px;
}
 

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.