Foros del Web » Creando para Internet » CSS »

Ayuda: maximizar cambia la posicion del los box model

Estas en el tema de Ayuda: maximizar cambia la posicion del los box model en el foro de CSS en Foros del Web. Cuando restauro y maximizo la ventana cambia la posición de los div Restaurado img3.uploadhouse.com/fileuploads/3770/37701331db1be3a39f54773e354ad10225690c7.jpg Maximizado img9.uploadhouse.com/fileuploads/3770/3770132665be302c48e1695f6a5f258c525b5db.jpg Mi CSS div#top{ width:100%; overflow:hidden; position:absolute; top:0; left:0; background:white; ...
  #1 (permalink)  
Antiguo 15/04/2009, 19:55
 
Fecha de Ingreso: abril-2009
Ubicación: Santa Fe, Capital
Mensajes: 38
Antigüedad: 8 años, 7 meses
Puntos: 0
Ayuda: maximizar cambia la posicion del los box model

Cuando restauro y maximizo la ventana cambia la posición de los div

Restaurado

img3.uploadhouse.com/fileuploads/3770/37701331db1be3a39f54773e354ad10225690c7.jpg

Maximizado

img9.uploadhouse.com/fileuploads/3770/3770132665be302c48e1695f6a5f258c525b5db.jpg

Mi CSS

div#top{
width:100%;
overflow:hidden;
position:absolute;
top:0;
left:0;
background:white;

}


div#left{
width:20%;
height:70%;
overflow:none;
position:absolute;
float:left;
top:18%;
left:0%;
background:#90EE90;
}
div#right{
width:80%;
height:60%;
overflow:auto;/*Scroll automatico*/
position:absolute;
float:right;
top:18%;
right:0%;
}

div#bottom{
width:100%;
/*height:20%;*/
overflow:hidden;/*Scroll automatico*/
position:absolute;
left:0%;
bottom:0%;
background:white;

}
  #2 (permalink)  
Antiguo 15/04/2009, 21:04
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: Ayuda: maximizar cambia la posicion del los box model

lo que pasa es que estas utilizando absolutos creo yo sin ningún motivo, lo que haces es solo una estructura a 2 columnas, mira este ejemplo para ver si te sirve para guiarte:

Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Documento sin t&iacute;tulo</title>
  5. <!--[if IE 6]><style>#contenedor {width:expression(
  6. (document.documentElement.clientWidth < 770)? "770px" : "auto"
  7.   );}</style><![endif]-->
  8. #cabecera{ min-width:770px;width:100%; height:80px; background:#CCC;}
  9. #contenedor{ min-width:770px;width:100%;}
  10. #col_izq{width:200px; min-height:300px; height:auto!important; height:300px; float:left; background:#999}
  11. #col_der{overflow:hidden; background:#336699;min-height:300px; height:auto!important; height:300px }
  12. #pie{ min-width:770px;width:100%; height:25px; background:#333}
  13. </head>
  14.  
  15. <div id="cabecera"></div>
  16. <div id="contenedor">
  17.     <div id="col_izq"></div>
  18.     <div id="col_der"></div>
  19. </div>
  20. <div id="pie"></div>
  21. </body>
  22. </html>
__________________
WFC
codigo82
  #3 (permalink)  
Antiguo 16/04/2009, 11:59
 
Fecha de Ingreso: abril-2009
Ubicación: Santa Fe, Capital
Mensajes: 38
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Ayuda: maximizar cambia la posicion del los box model

Ya corregí el código, cambie los porcentajes por px, y saque la position

Este es el resultado

div#top{
min-width:770px;
width:100%;
height:80px;
background:white;
borde-top:1 solid black;
}

#contenedor{
min-width:770px;
width:100%;
}

div#left{
width:180px;
height:400px;
min-height:300px;
overflow:hidden;
float:left;
background:#90EE90;/*Verde claro*/
}
div#right{
height:400px;
min-height:300px;
overflow:none;
background:#999;
}

div#bottom{
min-width:770px;
width:100%;
height:50px;
background:white;
borde-bottom:1 solid black;
}

Código HTML

<div id="top">
<jsp:include page="Encabezado.html"></jsp:include>
</div>
<div id="contenedor">
<div id="left">
<jsp:include page="Menu.jsp"></jsp:include>
</div>
<div id="right">
<jsp:include page="Inicio.html"></jsp:include>
</div>
</div>
<div id="bottom">
<jsp:include page="Pie.html"></jsp:include>
</div>
  #4 (permalink)  
Antiguo 16/04/2009, 12:58
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Ayuda: maximizar cambia la posicion del los box model

Saludos!!

Tengo una pregunta... Esto solucionó tu problema?
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #5 (permalink)  
Antiguo 16/04/2009, 14:02
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: Ayuda: maximizar cambia la posicion del los box model

Cita:
Iniciado por CaLiZzZ Ver Mensaje
Saludos!!

Tengo una pregunta... Esto solucionó tu problema?
exactamente lo mismo iba a preguntar yo.
__________________
WFC
codigo82
  #6 (permalink)  
Antiguo 17/04/2009, 15:30
 
Fecha de Ingreso: abril-2009
Ubicación: Santa Fe, Capital
Mensajes: 38
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Ayuda: maximizar cambia la posicion del los box model

Disculpen si logre solucionar el problema.

Dejo la solución.

Usaba float en dos div uno para colocar un bloque de texto a la izquierda y otro a la derecha, eso me producía que al maximizar se me separen los bloques del medio.

div#left{float:left;}
div#right{float:right;}

La posicion absolute y top, right, bottom, left, me producía que se separara la parte del medio con respecto a la parte superior e inferior, porque no se alineaban los bloque con respecto a un punto sino se alineaban en base a las partes de la página.

div#top{
position:absolute;
top:0;
left:0;
}

div#left{
position:absolute;
top:18%;
left:0%;
}
div#right{
position:absolute;
top:18%;
right:0%;
}

div#bottom{
position:absolute;
left:0%;
bottom:0%;
}

Última edición por PanchoJ; 17/04/2009 a las 15:33 Razón: Correción
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:36.