ayuda con cajas en css

[destor77]

hola:
estoy armando un sitio con css, el problema que tengo son con las cajas que quiero hacer para la noticias.

el codigo css que se encagar de eso es el siguiente:

Código:

		/* titulo background images */
		.titulo { background: url(../imagenes/nt.gif) repeat; }
		.rbtop div { background: url(../imagenes/tl.gif) no-repeat top left; }
		.rbtop { background: url(../imagenes/tr.gif) no-repeat top right; }
		.rbbot div { background: url(../imagenes/bl.gif) no-repeat bottom left; }
		.rbbot { background: url(../imagenes/br.gif) no-repeat bottom right; }

		/* height and width stuff, width not really nessisary. */
		.rbtop div, .rbtop, .rbbot div, .rbbot {
			width: 100%;
			height: 7px;
			font-size: 1px;
		}
		.rbcontent { margin: 0 12px; }
		.titulo { width: 100%; margin: 1em auto; }
		
		/* texto of background images*/ 
		.texto { background: url(../imagenes/nt1.gif) repeat; }
		.rbtoptexto div { background: url(../imagenes/tl1.gif) no-repeat top left; }
		.rbtoptexto { background: url(../imagenes/tr1.gif) no-repeat top right; }
		.rbbottexto div { background: url(../imagenes/bl1.gif) no-repeat bottom left; }
		.rbbottexto { background: url(../imagenes/br1.gif) no-repeat bottom right; }

		/* height and width stuff, width not really nessisary.*/
		.rbtoptexto div, .rbtoptexto, .rbbottexto div, .rbbottexto {
			width: 99%;
			height: 7px;
			font-size: 1px;
		}
		.rbcontenttexto { margin: 0 7px; }
		.texto { width: 99%; margin: 1em auto; }

		/* autor of background images */
		.autor { background: url(../imagenes/nt2.gif) repeat; }
		.rbtopautor div { background: url(../imagenes/tl2.gif) no-repeat top left; }
		.rbtopautor { background: url(../imagenes/tr2.gif) no-repeat top right; }
		.rbbotautor div { background: url(../imagenes/bl2.gif) no-repeat bottom left; }
		.rbbotautor { background: url(../imagenes/br2.gif) no-repeat bottom right; }

		/* height and width stuff, width not really nessisary. */
		.rbtopautor div, .rbtopautor, .rbbotautor div, .rbbotautor {
			width: 100%;
			height: 7px;
			font-size: 1px;
			
		}
		.rbcontentautor { margin: 0 7px; text-align:center}
		.autor { width: 100%; margin: 1em auto; }

en el php uso lo siguiente:

Código PHP:

  $conexion= mysql_connect($host_db, $usuario_db, $pass_db, $db);
mysql_select_db($db, $conexion);
$result = mysql_query("SELECT * FROM noticias ORDER BY fecha DESC", $conexion);
while ($maximo = mysql_fetch_array($result))
{
echo ' <div id= "contenedor">
          <div class = "titulo">
            <div class="rbtop"><div></div></div>
                <div class="rbcontent"><b>'.$maximo[titulo].'</b></div>
           </div>
        <div class = "texto">
            <div class="rbcontenttexto">
                <p>'.$maximo['texto'].'</p> 
            </div>
           </div> 
         
        <div class = "autor">
            <div class="rbcontentautor" >
                '.$maximo['autor'].' - '.$maximo['fecha'].'
            </div>
            <div class="rbbotautor"><div></div></div>
        </div>
        
     </div>'; 
   

El problema que surge es que quiero unir el div texto con el div titulo y autor, pero siempre me queda un espacio en blanco y nose porque.

alguien me puede decir porque me pasa esto, seguramente es una boludez, es mas si el cierre de la etica div titulo la pongo al cierre del div texto me une esas dos partes pero ya no puedo hacer lo mismo con el div autor.

Ojala puedan darme una mano, ya que soy bastante novato en css , desde ya muchas gracias.

salu2

[jesusbet]

Los divs son elementos de bloque, eso quiere decir que tienen un salto de línea al final y al principio. Si quieres eliminar los saltos de línea, usas lo siguiente para tu div:

div {
display: inline;
}

Además de eso, los navegadores también agregan un márgen inferior (10px o algo así), para quitar ese márgen solo tienes que hacer esto:

div {
margin: 0;
}

o bien combinar los dos:

div {
display: inline;
margin: 0; /* también puedes usar margin-bottom */
}

Saludos

[destor77]

jesusbet

intente lo que me dijiste pero no funciona, aca te dejo una imagen de como tengo las cajas



espero que me puedas ayudar nuevamente.

gracias

[jesusbet]

prueba agregando esto al final de tu hoja de estilos:

* {margin: 0; padding: 0;}

[destor77]

no amigo jesusbet, sigue sin pasar nada. Y la verdad que nose porque es, seguramente es una boludez pero no puedo encontrarla

[Valentinoo]

Buenos Dias,

Yo tambien tengo el mismo problema pero solo en FireFox, en IE me va de lujo. He intentado el display:inline y nada. ¿Sabe alguien donde se puede encontrar mas informacion sobre ese atributo (display) y de todas sus funciones (inline, block etc)?

Saludos

[destor77]

listo lo solucione, el error estaba en css cuando armaba la caja de texto y todos su atributos, no tenia que armarlo con el ese codigo.
Ahora no estoy en casa, cuando vuelva pongo el codigo completo.

salu2