Foros del Web » Creando para Internet » CSS »

Div se desajusta si redimensiono el explorador?

Estas en el tema de Div se desajusta si redimensiono el explorador? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/12/2008, 05:01
 
Fecha de Ingreso: diciembre-2005
Ubicación: Barcelona
Mensajes: 1.428
Antigüedad: 12 años
Puntos: 15
Div se desajusta si redimensiono el explorador?

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>
  #2 (permalink)  
Antiguo 03/12/2008, 07:43
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Div se desajusta si redimensiono el explorador?

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...
  #3 (permalink)  
Antiguo 03/12/2008, 07:55
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: Div se desajusta si redimensiono el explorador?

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> 
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #4 (permalink)  
Antiguo 03/12/2008, 09:12
 
Fecha de Ingreso: diciembre-2005
Ubicación: Barcelona
Mensajes: 1.428
Antigüedad: 12 años
Puntos: 15
Respuesta: Div se desajusta si redimensiono el explorador?

Cita:
Iniciado por masterojitos Ver Mensaje
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....
  #5 (permalink)  
Antiguo 03/12/2008, 09:22
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Div se desajusta si redimensiono el explorador?

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
  #6 (permalink)  
Antiguo 03/12/2008, 10:35
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: Div se desajusta si redimensiono el explorador?

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>
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #7 (permalink)  
Antiguo 03/12/2008, 10:40
 
Fecha de Ingreso: diciembre-2005
Ubicación: Barcelona
Mensajes: 1.428
Antigüedad: 12 años
Puntos: 15
Respuesta: Div se desajusta si redimensiono el explorador?

Cita:
Iniciado por masterojitos Ver Mensaje
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
  #8 (permalink)  
Antiguo 03/12/2008, 10:48
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Div se desajusta si redimensiono el explorador?

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
  #9 (permalink)  
Antiguo 03/12/2008, 11:00
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: Div se desajusta si redimensiono el explorador?

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>
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #10 (permalink)  
Antiguo 03/12/2008, 11:06
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Div se desajusta si redimensiono el explorador?

Cita:
Iniciado por masterojitos Ver Mensaje
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
  #11 (permalink)  
Antiguo 03/12/2008, 11:17
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: Div se desajusta si redimensiono el explorador?

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.
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #12 (permalink)  
Antiguo 03/12/2008, 16:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Div se desajusta si redimensiono el explorador?

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.
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 04/12/2008, 03:10
 
Fecha de Ingreso: diciembre-2005
Ubicación: Barcelona
Mensajes: 1.428
Antigüedad: 12 años
Puntos: 15
Respuesta: Div se desajusta si redimensiono el explorador?

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 Ver Mensaje
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.
  #14 (permalink)  
Antiguo 04/12/2008, 04:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Div se desajusta si redimensiono el explorador?

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.
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 04/12/2008, 11:48
 
Fecha de Ingreso: diciembre-2005
Ubicación: Barcelona
Mensajes: 1.428
Antigüedad: 12 años
Puntos: 15
Respuesta: Div se desajusta si redimensiono el explorador?

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
  #16 (permalink)  
Antiguo 04/12/2008, 11:56
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Div se desajusta si redimensiono el explorador?

¿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.
__________________
Visita mi nueva web idplus.org
  #17 (permalink)  
Antiguo 05/12/2008, 03:37
 
Fecha de Ingreso: diciembre-2005
Ubicación: Barcelona
Mensajes: 1.428
Antigüedad: 12 años
Puntos: 15
Respuesta: Div se desajusta si redimensiono el explorador?

Es cierto, no me había dado cuenta que el ejemplo se ve bien.
Lo haré de esta forma.
Gracias. Saludos
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 21:43.