Foros del Web » Creando para Internet » CSS »

definir height y div auto en divs

Estas en el tema de definir height y div auto en divs en el foro de CSS en Foros del Web. Hola, veo que he escrito mal el título, y no se entiende nada, aunque la pregunta es muy sencilla. Pero no encuentro la solución. A ...
  #1 (permalink)  
Antiguo 25/07/2006, 08:52
 
Fecha de Ingreso: julio-2001
Ubicación: Barcelona
Mensajes: 922
Antigüedad: 16 años, 5 meses
Puntos: 1
definir height y div auto en divs

Hola,

veo que he escrito mal el título, y no se entiende nada, aunque la pregunta es muy sencilla. Pero no encuentro la solución. A ver si me podéis
ayudar. La cuestión es la siguiente:

tengo un div bien sencillo:

<div style="position: absolute; background-color: red">
<div style="position: relative; ">Texto de demostración</div>
</div>

Donde el background se dibuja solo donde encontramos texto. Ahora quiero darle un height al div interior, de manera que tengo:

<div style="position: absolute; background-color: red">
<div style="position: relative; height:20px">Texto de demostración</div>
</div>

El problema es que ahora en explorer me dibuja el background con un width de 100%, y yo quiero que siga dibujandose solo encima del texto.
La idea es que el texto será dinámico, por lo que desconozco el width que va a tener el div.

Alguna sugerencia?

Gracias
  #2 (permalink)  
Antiguo 25/07/2006, 09:21
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
no entiendo.. pero ojo que trabajar con posiciones absolutas y relativas en IE es un dolor de guevos, lo primero es que no se puede seleccionar el texto que esta dentro de un div absoluto.
__________________
Internet Explorer SuckS
Download FireFox
  #3 (permalink)  
Antiguo 25/07/2006, 09:40
 
Fecha de Ingreso: julio-2001
Ubicación: Barcelona
Mensajes: 922
Antigüedad: 16 años, 5 meses
Puntos: 1
Hola,

gracias por responder. Si quieres ver a lo que me refiero, coge los códigos que he puesto y verás la diferencia entre uno y otro. La cuestión es que el primer ejemplo te pinta de rojo solo la zona donde hay texto (el width se adapta al contenido del div interior). Pero si ves el segundo ejemplo, verás que se pinta de rojo no solo la zona del texto, sino que se pinta hasta el final de la página (supongo que se pinta el 100% del width).

Sabéis alguna solución para que aun definiendo el height siga cogiendo el width del contenido?

gracias
  #4 (permalink)  
Antiguo 25/07/2006, 10:34
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 1 mes
Puntos: 3
los divs por naturaleza son bloques.. por que no usas mejor elementos en linea y asi te quitas de broncas.. <span> y para definirle un width ? osea quieres que el tamaño del texto diga te que tamaño es tu div???

eso nunca lo avia visto definele: width: al contendedor..
__________________
Saludos
FT.
www.fernando.com.mx
  #5 (permalink)  
Antiguo 25/07/2006, 18:04
 
Fecha de Ingreso: julio-2001
Ubicación: Barcelona
Mensajes: 922
Antigüedad: 16 años, 5 meses
Puntos: 1
Hola,

os pongo un ejemplo de lo que quiero para que os hagáis una idea:

Código:
<style>
	 
.dialog{
	position: absolute;
}
	 
.dialog .dialog-head{
	position: relative;background-color: blue;height:25px;
}

.dialog .dialog-head-toolbar{
	position:absolute; right: 0px; background-color: yellow;
}

.dialog .dialog-body{
	position:relative;background-color: #4e7995; 
}
 
</style>

<div class="dialog">
	<div class="dialog-head">
		<div class="dialog-head-toolbar">
			<button>O</button>
			<button>O</button>
		</div>
		<div class="dialog-head-mid">Title</div>
	</div>
	<div class="dialog-body">
		Este texto no tiene ningún propósito razonable, ni aporta absolutamente<BR>
		ningún dato en especial, ya que es un simple relleno. Podría bromear un poco, y r<BR>
		eproducir el discurso de un político, un fragmento de la legisl<BR>
		ación educativa o cualquier otro texto del mismo nivel de erudición, pero, pensándomelo <BR>
		mejor, prefiero dejarlo en este inútil fluir de palabras huecas, que <BR>
		no tiene ningún propósito razonable.
	</div>
	
</div>
Si lo véis en Firefox veréis como funciona correctamente el código. En cambio en Explorer no funciona bien. El problema lo tiene el height:25 que hay en el head.
Lo que necesito es que funcione como lo hace con Firefox, es decir, que el div se adapte al tamaño del contenido.

No puedo colocar ningún width en ningún div, puesto que el contenido será dinámico y no puedo conocer el tamaño.

Gracias
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




La zona horaria es GMT -6. Ahora son las 05:59.