Ancho de H1

[sweetman]

Buenas tardes... tengo el siguiente problema:
si pongo un color de fondo a un h1 se colorea en fondo de todo el ancho de la capa que lo contiene... ¿cómo puedo hacer para que sólo coloree el texto y todo el ancho?

¡¡Mil gracias!!

[willyfc]

no si es esto lo que buscas, si no lo es avisas

Código:

h1{color:#FF0000; background-color:#00FF00; margin:0;}
#contenedor{width:400px; height:200px; border:1px solid #000000;}
.texto{height:auto; padding:10px; text-align:justify;}

Código HTML:

<div id="contenedor">
	<h1>Aqui va el contenido</h1>
	<div class="texto">
		texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto <br />texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto 
	</div>
</div> 

[sweetman]

Muchas gracias willyfc, pero no me refería a eso... con el código que me has puesto estoy en el mismo problema... me "pinta" el fondo de h1 todo el ancho de la capa #contenedor y yo quiero que sí:
<h1>Hola</h1> sólo quede con fondo la palabra hola... no todo el ancho ¿me he explicado mejor ahora??

Gracias de nuevo

[willyfc]

mira es otra forma, la verdad no si será válida, pero espero que te sirva:

Código:

h1{color:#FF0000;margin:0;}
h1 a{ color:#ff0000; background-color:#00FF00; text-decoration:none; cursor:text}
#contenedor{width:400px; height:200px; border:1px solid #000000;}
.texto{height:auto; padding:10px; text-align:justify;}

Código HTML:

<div id="contenedor">
	<h1><a href="#">Aqui va el contenido</a></h1>
	<div class="texto">
		texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto <br />texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto 
	</div>
</div> 

miralo y avisas si te sirve, si no buscaremos otra solución

[sweetman]

¡¡¡GRACIAS!!!

Hice lo mismo que me dijiste pero con etiqueta <span> en vez de <a> y queda como quería... puf!! creí que no lo conseguiría

Muchas gracias de nuevo...

[Mikmoro]

En realidad te bastaba con poner display: inline; al h1.

[sweetman]

Mikel, gracias por tu aportación, lo de display:inlay; ya lo había intentado, pero su subian las capas que tenía debajo y tenía que darles un margin-top para solucinarlo y luego sólo se veía bien es firfox y explorer 7, en explorer 6 dejaba una línea entre el H1 y la capa de debajo y en safari se montaba la siguente capa despues del H1 en horizontal... como si fuese un float.

Gracias!