Foros del Web » Creando para Internet » CSS »

generacion de Div a partir de una BD y PHP

 Estas en el tema de generacion de Div a partir de una BD y PHP en el foro de CSS en Foros del Web. Hola a todos . Tengo el siguiente problema , estoy tratando de leer una base de datos y que los resultados se presenten uno al ...
  #1 (permalink)  
Antiguo 26/08/2010, 09:38
Avatar de goya  
Fecha de Ingreso: enero-2002
Ubicación: La Serena
Mensajes: 273
Antigüedad: 22 años, 10 meses
Puntos: 1
generacion de Div a partir de una BD y PHP
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 ???
__________________
:adios:
..."Hay dos cosas que son infinitas: el universo y la estupidez humana; y no estoy muy seguro acerca del universo."
Albert Einstein
  #2 (permalink)  
Antiguo 26/08/2010, 10:51
 
Fecha de Ingreso: mayo-2010
Mensajes: 39
Antigüedad: 14 años, 6 meses
Puntos: 0
Respuesta: generacion de Div a partir de una BD y PHP
me parece que tienes que aplicar un float: left; en una clase prueba con eso y los cuentas
  #3 (permalink)  
Antiguo 26/08/2010, 12:01
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 5 meses
Puntos: 539
Respuesta: generacion de Div a partir de una BD y PHP
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
  1. <div class="articuloprensa">
  2. <img src=".../>
  3. <p>texto</p>
  4. </div>
  5. <!-- ********** y el css ********** -->
  6. .articuloprensa img {
  7.     width:375px;
  8.     height:160px; /*ojo al alto y ancho, podría distorsionarse*/
  9.     background-color:#FFF;
  10.     margin: 0 auto;
  11.     display: block;
  12. }
  13.  
  14. .articuloprensa p {/*sólo las relativas al texto, si acaso padding*/}

Atentamente
  #4 (permalink)  
Antiguo 26/08/2010, 13:21
Avatar de goya  
Fecha de Ingreso: enero-2002
Ubicación: La Serena
Mensajes: 273
Antigüedad: 22 años, 10 meses
Puntos: 1
Respuesta: generacion de Div a partir de una BD y PHP
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?
__________________
:adios:
..."Hay dos cosas que son infinitas: el universo y la estupidez humana; y no estoy muy seguro acerca del universo."
Albert Einstein
  #5 (permalink)  
Antiguo 26/08/2010, 13:44
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 5 meses
Puntos: 539
Respuesta: generacion de Div a partir de una BD y PHP
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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  5. <title>Kseso? Jugando con css</title>
  6.  
  7. <style type="text/css">
  8. * {margin: 0; padding: 0; outline: 0; position: relative;}
  9. .articuloprensa {
  10.     float:left;
  11.     width:375px;
  12.     height:250px;
  13.     margin:3px;
  14.     background-color:#6FF;
  15. }
  16. .articuloprensa img {
  17.     width:375px;
  18.     height:160px; /*ojo al alto y ancho, hay distorsión*/
  19.     background-color:#FFF;
  20.     margin: 0 auto;
  21.     display: block;
  22. }
  23.  
  24. .articuloprensa p { font-size: .9em;}
  25. </style>
  26. </head>
  27. <body>
  28.   <div id="contenedor">
  29.     <div class="articuloprensa">
  30.       <img src="http://farm2.static.flickr.com/1337/831326806_17f1a0c3bb.jpg?v=0" alt="#"/>
  31.       <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>
  32.     </div>
  33.     <div class="articuloprensa">
  34.       <img src="http://heterodoxia.files.wordpress.com/2009/07/carajillo.jpeg" alt="#"/>
  35.       <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>
  36.     </div>
  37.     <div class="articuloprensa">
  38.       <img src="http://www.milrayas.com/blog/wp-content/uploads/2007/08/carajillo_bolsillo.jpg" alt="#"/>
  39.       <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>
  40.     </div>
  41.   </div>
  42. </body>
  43. </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.
  #6 (permalink)  
Antiguo 27/08/2010, 10:02
Avatar de goya  
Fecha de Ingreso: enero-2002
Ubicación: La Serena
Mensajes: 273
Antigüedad: 22 años, 10 meses
Puntos: 1
Respuesta: generacion de Div a partir de una BD y PHP
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 ?
__________________
:adios:
..."Hay dos cosas que son infinitas: el universo y la estupidez humana; y no estoy muy seguro acerca del universo."
Albert Einstein
  #7 (permalink)  
Antiguo 27/08/2010, 11:00
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 5 meses
Puntos: 539
Respuesta: generacion de Div a partir de una BD y PHP
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/

Etiquetas: bd, partir, php
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 10:17.