generacion de Div a partir de una BD y PHP

goya · #1 (**permalink**) 26/08/2010, 09:38

Hola a todos .

Tengo el siguiente problema , estoy tratando de leer una base de datos y que los resultados se presenten uno al lado del otro , cuando pensé la idea de la conversión de tabla a div probé con esto y funciona

codigo :

Código PHP:

  <div class="articuloprensa"> 
<div class="area1-foto">Foto</div> 
<div class="area1-texto">texto</div> 
</div> 
<div class="articuloprensa"> 
<div class="area1-foto">Foto></div> 
<div class="area1-texto">texto</div> 
</div> 
<div class="articuloprensa"> 
<div class="area1-foto">Foto</div> 
<div class="area1-texto">texto</div> 
</div>

CSS :

Código PHP:

  .articuloprensa { 
    float:left; 
    width:375px; 
    height:250px; 
    margin:3px; 
    background-color:#6FF; 
} 
.area1-foto{ 
    width:375px; 
    height:160px; 
    background-color:#FFF; 
    text-align:center; 
} 
.area1-texto{ 
    width:375px; 
    height:90px; 
    background-color:#36C; 
}

Hora cuando lo aplico a la lectura de la base de datos me quedan uno arriva del otro.

codigo :

Código PHP:

  mysql_connect("$hostname_conexion","$username_conexion","$password_conexion");  
$result=mysql_db_query("$database_conexion", "select * from noticias order by ID desc Limit 10"); 
while ($row=mysql_fetch_array($result)) 
{ 
echo '<div class="articuloprensa">'; 
echo '<div class="area1-foto"><img src="fotos_news/'.$row["foto"].'" width="213" height="160" longdesc="fotos_news/'.$row["foto"].'" /></div>'; 
echo '<div class="area1-texto">'; 
echo '<span class="titulos_news"> '.$row["titulo"].' </span> <span class="fecha_news">('.$row["fecha1"].')</span>'; 
echo '<span class="textos_news">'.$row["resumen"].'</span>'; 
echo '<p><span class="autor_news">Autor: '.$row["contacto"].'</span></p>'; 
echo '</div>'; 
echo '</div>'; 
} 
mysql_free_result($result);

y el CSS es el mismo ..

alguna idea ???

dluxox_ · #2 (**permalink**) 26/08/2010, 10:51

me parece que tienes que aplicar un float: left; en una clase prueba con eso y los cuentas

kseso? · #3 (**permalink**) 26/08/2010, 12:01

Ojo a la caja contenedora de /articuloprensa/ y las propiedades que se le aplican, verifíquelas, por ejemplo con firebug en ff.

¿Nos curamos algo de divitis?:

Código HTML:

Ver original<div class="articuloprensa">
<img src=".../>
<p>texto</p>
</div>
<!-- ********** y el css ********** -->
.articuloprensa img {
    width:375px;
    height:160px; /*ojo al alto y ancho, podría distorsionarse*/
    background-color:#FFF;
    margin: 0 auto;
    display: block;
}
 
.articuloprensa p {/*sólo las relativas al texto, si acaso padding*/}

Atentamente

goya · #4 (**permalink**) 26/08/2010, 13:21

Gracias !! pero no funciona , siguen quedando una arriba de otra, lo gracioso es que con tablas funciona re bien pero estoy convencido que debo hacerlo con css .

Mas ideas?

kseso? · #5 (**permalink**) 26/08/2010, 13:44

Revise la anchura de la caja contenedora de esos div´s como le comentaba anteriormente.
Pruebe lo siguiente en el navegador:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Kseso? Jugando con css</title>
 
<style type="text/css">
* {margin: 0; padding: 0; outline: 0; position: relative;}
.articuloprensa {
    float:left;
    width:375px;
    height:250px;
    margin:3px;
    background-color:#6FF;
}
.articuloprensa img {
    width:375px;
    height:160px; /*ojo al alto y ancho, hay distorsión*/
    background-color:#FFF;
    margin: 0 auto;
    display: block;
}
 
.articuloprensa p { font-size: .9em;}
</style>
</head>
<body>
  <div id="contenedor">
    <div class="articuloprensa">
      <img src="http://farm2.static.flickr.com/1337/831326806_17f1a0c3bb.jpg?v=0" alt="#"/>
      <p>Lorem ipsum dolor sit amet consectetuer leo sodales nunc quis Aenean. Dui Morbi Morbi id ante Nullam urna velit quis interdum cursus. Mollis cursus ac consequat Aliquam dictumst.</p>
    </div>
    <div class="articuloprensa">
      <img src="http://heterodoxia.files.wordpress.com/2009/07/carajillo.jpeg" alt="#"/>
      <p>Lorem ipsum dolor sit amet consectetuer metus Sed ac Nam neque. Et at Pellentesque Phasellus id penatibus sem hac Suspendisse mollis ut. Justo enim nulla Nullam Quisque neque dui justo nisl ut Aliquam. Tortor risus malesuada sagittis.</p>
    </div>
    <div class="articuloprensa">
      <img src="http://www.milrayas.com/blog/wp-content/uploads/2007/08/carajillo_bolsillo.jpg" alt="#"/>
      <p>Lorem ipsum dolor sit amet consectetuer porttitor libero congue justo Phasellus. Curabitur augue tempor leo vitae lacus elit nunc id Vestibulum Suspendisse. Nibh convallis ultrices.</p>
    </div>
  </div>
</body>
</html>

No verificado en otros distintos a ff. Como verá, es su código pero variando el etiquetado en el html según le apuntaba anteriormente.

goya · #6 (**permalink**) 27/08/2010, 10:02

Grande !!! ahí si funciono !!!

Gracias lo único que me quedo la duda por que usaste "* {margin: 0; padding: 0; outline: 0; position: relative;}" y eso me imagino que es heredable ?

kseso? · #7 (**permalink**) 27/08/2010, 11:00

Me alegra saber que le fue de ayuda.
Es un mini reset. El asterisco /*/ es un selector universal, así que no es por herencia.
Ojo al par /position:relative/