problema con estilos (menuda novedad!)

[higochumbo]

Hola, buenas. Este es mi primer post en este foro y me gustaria saludar a toda la comunidad antes de expresar mis dudas. Hola a todos

No soy de forear mucho pero siempre que tengo alguna duda y busco en google la respuesta acaba viniendo entre otras webs de esta. Ahora tengo una duda que la verdad no se como expresar ni como empezar a buscar por lo que estoy en la obligacion de postearla para ver si alguien sabe resolvermela.

Estoy empezando a hacer una pagina web y tengo el index y los estilos. El problema viene al insertar un span.

Tengo 3 estilos que forman un rectangulo:

-El estilo de arriba tiene una imagen de fondo que es la parte de arriba del rectangulo.

-El estilo del medio es un estilo con height:auto con una imagen de un pixel que se repite.

-Y el estilo de abajo es igual que el de arriba pero con la imagen de fondo de la parte de abajo del rectangulo.

Bueno, si en el estilo del medio inserto texto el rectangulo aumenta de tamaño sin problemas y cuanto mas texto meto mas se agranda pero el problema es si en vez de meter texto a palo seco inserto un span.

Si inserto el span con texto el texto no forma parte del contenido del estilo central y se superpone la imagen del estilo de abajo.

Pongo aqui el codigo para que lo entendais mejor:

Código:

		<div id="contenedor_contenido">
			<div id="contenedor_noticia">
				<div id="c_barr"></div>
				<div id="c_bcen">
					<span class="titulo">Hola</span>
				</div>
				<div id="c_babj"></div>

			</div>
		</div>

Estilos:

Código:

#c_barr{
	position:relative;
	width:656px;
	height:20px;
	float:left;
	background-image:url(../img/c_barr.png);
	background-repeat:no-repeat;
	}

#c_bcen{
	position:relative;
	width:656px;
	height:auto;
	float:left;
	background-image:url(../img/c_bcen.png);
	background-repeat:repeat;
	}

#c_babj{
	position:relative;
	width:656px;
	height:20px;
	float:left;
	clear:left;
	background-image:url(../img/c_babj.png);
	background-repeat:no-repeat;
	}

.titulo{
	position:absolute;
	margin-left:14px;
	font-family:Arial;
	font-size:30px;
	color:#E11534;
	font-weight:bold;
	}

Si escribo solo hola sin el span no hay problema. El estilo del centro aunmenta su tamaño:

Código:

		<div id="contenedor_contenido">
			<div id="contenedor_noticia">
				<div id="c_barr"></div>
				<div id="c_bcen">
					Hola
				</div>
				<div id="c_babj"></div>

			</div>
		</div>

No se si tendra que ver con clrea y float pero la verdad es que no se como meter el span dentro del estilo central y que a su vez el estilo central agrande su altura y el estilo de abajo no se superponga.

Espero haberme expresado bien. Gracias por vuestra atencion :P

Saludos.

[pitufoweb]

mmmm,

sera porque no cerraste correctamente la etiqueta span.

<span class="titulo">Hola</span

<span class="titulo">Hola</span>



Bye

[higochumbo]

Madre mia xD

Muchas gracias pitufoweb. Siempre siempre siempre son los pu..os cierres o comas o llaves...

Saludos!

[higochumbo]

Puesss, no es eso

El problema persiste.

[higochumbo]

Por si ayuda visulizarlo, en el texto rojo pone firefox y esa palabra deberia salir dentro del rectangulo.

imagen:

[pitufoweb]

<span class="titulo">Hola</span>

.titulo{
position:absolute;

Tienes el span con posición absoluta, lo cual lo hace que lo quite del flujo del documento.


Quita la posición absoluta y con eso solucionaras tu problema.





Bye.

[higochumbo]

Ahora si, muchas gracias!