Div se desajusta si redimensiono el explorador?

chefnelone · #1 (**permalink**) 03/12/2008, 05:01

Hola

Tengo un problema con el ancho de un div cuando hago mas estrecho el ancho del explorador (sucede solo en Firefox y IE7)

Es un div que no tiene width definido por lo tanto el ancho será 100%. como se ve esta imagen:

Funciona bien pero si hago el explorador más estrecho y luego muevo la barra de desplazamiento el div ya no ocupa el ancho total de la página como muestra esta imagen:

este es el codigo real de ese ejemplo:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title></title>
</head>
<body>

<div style="text-align:center;background-color: #000000;" >	
	<div style="width:960px;margin:0px auto 0px auto;color:white;">hola</div>
</div>

</body>
</html>

y esta página es ese mismo código funcionando:
http://www.diegorosenbergtherapy.com/este.php

gracias <saludos>

willyfc · #2 (**permalink**) 03/12/2008, 07:43

hola:

podrías ponerlo de esta manera:

Código HTML:

<div style="background-color:#00CC33; width:100%; height:50px; margin:0 auto;"></div>
<div style="text-align:center;background-color: #000000; width:100%; height:auto;" >	
	<div style="width:100%;margin:0 auto;color:white;">hola</div>
</div>

espero te sirva...

masterojitos · #3 (**permalink**) 03/12/2008, 07:55

ps creo que eso te sucede por que al primer div el cual contiene a la frase... ps no le estas dando un ancho como mencionas...... y al mas pequeño si se lo das y predeterminado....

y claro, a la primera instancia del explorador toma el total (o 960px), pero si este se redimensiona que ayi... por que el ancho ya fue asignado...........

y para ello, seria mejor y la solucion exacta..... que al div contenedor (al de afuera, el mayor) le dieras un ancho..... y el mas apropiado oviamente el 100%.... y por ultimo quitarle el ancho predeterminado al pequeño.

y ps sin rodeos..... tu codigo quedaria asi:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title></title>
</head>
<body>

<div style="text-align:center;background-color: #000000;width:100%" >	
	<div style="margin:0px auto 0px auto;color:white;">hola</div>
</div>

</body>
</html>

chefnelone · #4 (**permalink**) 03/12/2008, 09:12

Cita:

Iniciado por masterojitos

ps creo que eso te sucede por que al primer div el cual contiene a la frase... ps no le estas dando un ancho como mencionas...... y al mas pequeño si se lo das y predeterminado....

y claro, a la primera instancia del explorador toma el total (o 960px), pero si este se redimensiona que ayi... por que el ancho ya fue asignado...........

y para ello, seria mejor y la solucion exacta..... que al div contenedor (al de afuera, el mayor) le dieras un ancho..... y el mas apropiado oviamente el 100%.... y por ultimo quitarle el ancho predeterminado al pequeño.

y ps sin rodeos..... tu codigo quedaria asi:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title></title>
</head>
<body>

<div style="text-align:center;background-color: #000000;width:100%" >	
	<div style="margin:0px auto 0px auto;color:white;">hola</div>
</div>

</body>
</html>

entiendo, pero si hago eso el div anidado no tendría sentido porque tendria el mismo ancho que el div que lo contiene. Debo darle ancho 960px, eso no lo puedo cambiar.

seguro que hay algún error basico que no estoy viendo....

willyfc · #5 (**permalink**) 03/12/2008, 09:22

entonces también tendrás que darle medida al div contenedor por que si lo dejas sin medidas este se encojera y encojera el que esta anidado

masterojitos · #6 (**permalink**) 03/12/2008, 10:35

ya ps...... pero entonces dejale como estaba pero agregale el ancho 100% al contenedor.

<div style="text-align:center;background-color: #000000;width:100%" >
<div style="width:960px;margin:0px auto 0px auto;color:white;">hola</div>
</div>

chefnelone · #7 (**permalink**) 03/12/2008, 10:40

Cita:

Iniciado por masterojitos

ya ps...... pero entonces dejale como estaba pero agregale el ancho 100% al contenedor.

<div style="text-align:center;background-color: #000000;width:100%" >
<div style="width:960px;margin:0px auto 0px auto;color:white;">hola</div>
</div>

lo he hecho pero sigue igual: http://www.diegorosenbergtherapy.com/este.php

willyfc · #8 (**permalink**) 03/12/2008, 10:48

por eso te dije que tienes que darle medida al contenedor, mira:

al estar sin medida el contenedor adopta ancho=100%, al tener porcentajes es flexibles si encojes la ventana ese 100% significará digamos ahora en px 700, mientras que maximizada significa digamos como 1000px, pero el div que esta dentro seguirá midiendo 960px de ancho por que esa es una medida fina no flexible, y yo creo que tienes 2 opciones:

Opción 1 : ponerle medidas fijas a ambos

Código HTML:

<div style="text-align:center;background-color: #000000; width:960px; height:auto;" >	
	<div style=" width:960px;margin:0 auto;color:white;">hola</div>
</div>

Opción 2 : hacer el diseño flexible:

Código HTML:

<div style="text-align:center;background-color: #000000; width:100%; height:auto;" >	
	<div style=" width:80%;margin:0 auto;color:white;">hola</div>
</div>

avisas como te va

masterojitos · #9 (**permalink**) 03/12/2008, 11:00

varon no se que estes haciendo........ pero ya te di la solucion y la posteo una vez mas.....
sino sale la verdad..... me mato ya que la pruebo y ami si me sale........

<div style="text-align:center;background-color:#000000; width:100%;" >
<div style="width:960px;margin:0 auto;color:white;">hola</div>
</div>

willyfc · #10 (**permalink**) 03/12/2008, 11:06

Cita:

Iniciado por masterojitos

varon no se que estes haciendo........ pero ya te di la solucion y la posteo una vez mas.....
sino sale la verdad..... me mato ya que la pruebo y ami si me sale........

<div style="text-align:center;background-color:#000000; width:100%;" >
<div style="width:960px;margin:0 auto;color:white;">hola</div>
</div>

lo que pasa es que tu estas probando en el ie y ahí si funciona de esa manera pero los otros navegadores no lo respetan entonces eso no va a funcionar

masterojitos · #11 (**permalink**) 03/12/2008, 11:17

a disculpa....... tiene razon willyfc....... solo me funca en ie y como no lo probe en firefox.......

pero vale....... entonces cambialo asi, y ps te queda rechido.

<table align="center" bgcolor="#000000" width="100%"><tr><td align="center">
<div style="width:960px;color:white;">hola</div>
</td></tr></table>

Suerte.

Mikmoro · #12 (**permalink**) 03/12/2008, 16:23

Se trata de que cuando pones el 100% de ancho se refiere al 100% del área de visualización, por lo que si hay un elemento que fuerza el scroll horizontal, eso está fuera del área de visualización y por tanto fuera de ese 100%.

De todas maneras, chefnelone, ¿puedes decir qué es lo que estás queriendo hacer? ¿qué te gustaría conseguir? quizá así te podamos ayudar mejor, en lugar de darle vueltas a algo sin un objetivoreal claro.

chefnelone · #13 (**permalink**) 04/12/2008, 03:10

gracias por las ideas.

@masterojitos:yo ya lo había solucionado con una tabla, pero mi cliente no quiere que usemos tablas.

Cita:

Iniciado por Mikmoro

De todas maneras, chefnelone, ¿puedes decir qué es lo que estás queriendo hacer? ¿qué te gustaría conseguir? quizá así te podamos ayudar mejor, en lugar de darle vueltas a algo sin un objetivoreal claro.

Que otros datos puedos mostrar, postee imagenes, el código y el código funcionando ?

El objetivo es que el div contenedor ocupe todo el ancho. Es que no hay más.

De todas formas gracias por la ideas.

Mikmoro · #14 (**permalink**) 04/12/2008, 04:16

Bueno, lo que quería decir es que no acabo de entender la intención del diseño: un contenedor con fondo negro que ocupe el 100%, y dentro de él un contenedor para el texto con un ancho determinado.

Si no hay una buena razón, no sé si será la forma más lógica de maquetar. A eso me refería con "qué quieres conseguir exactamente", porque quizá según lo que sea es más o menos acertado hacerlo de esa manera.

chefnelone · #15 (**permalink**) 04/12/2008, 11:48

lo que estoy buscando hacer es una estructura como esta:
http://www.diegorosenbergtherapy.com/este.php

de esa forma puedo darle color de fondo al div anidado(960px ancho) y al que lo anida(100% ancho) por separado

no se de que otra forma podría hacerse (sin usar tablas)

saludos

Mikmoro · #16 (**permalink**) 04/12/2008, 11:56

¿Y no te va bien cómo está hecho ahí, en ese ejemplo?

La única diferencia es que en tu código del principio no le estás poniendo un fondo al div interior, y en el ejemplo sí. Si se lo pones verás que se arregla.

chefnelone · #17 (**permalink**) 05/12/2008, 03:37

Es cierto, no me había dado cuenta que el ejemplo se ve bien.
Lo haré de esta forma.
Gracias. Saludos