Cómo conseguir que una capa no se mueva al restaurarse la ventana del navegador

Lorelopez · #1 (**permalink**) 21/08/2009, 12:13

Hola, no consigo crear una caja contenedora que no se mueva al restaurar el tamaño de la ventana del navegador.

Con los siguientes datos en la hoja de estilos:

* {margin: 0; padding: 0;}

html, body {
width: 100%;
height: 100%;
text-align: center;
}

body {
background-color: white;
font-family: Georgia, "Times New Roman", sans-serif;
color: black;
font-weight: normal;
text-align: justify;
font-style: normal;
font-size: 16px;}

#contenedor {
width: 90%;
height: 90%;
margin: 2em auto;
vertical-align: middle;
background-color: #FFCCCC;
overflow:auto
}

#main {
position:absolute;
left:425px;
top:181px;
width:458px;
height:183px;
z-index:1;
font-family: Georgia, "Times New Roman", sans-serif;
font-size: 24px;
font-weight: bold;
color: #990000;
text-align: center;
}

Y el código:

<body>

<div id="contenedor">
<div id="main">
<div align="center">
<p><img src="blablabla.gif" alt="blablabla" width="160" height="120" /></p>
<p> </p>
<p>blablabla</p>
</div>
</div>
</div>
</body>
</html>

Obtengo una caja contenedora que al hacer el RESTORE de la ventana del explorador se me descuajeringa, lo curioso es que el contenido de la caja que le he plantado en el medio se queda estática, con lo que entiendo que estoy haciendo algo mal.

Por favor, ¿sabéis cómo hacer para mantenerla estáticaal igual que la caja y elementos que contiene?, ¿con qué maravillosa propiedad puedo conseguir esto?, porque ¿lo normal no es que la caja contenedora se mueva verdad?

Gracias!!

Lorelopez · #2 (**permalink**) 21/08/2009, 12:19

Se me olvidaba, ademas he intentado cambiarle el color al background del body, buscando el efecto de una especie de "cama inferior" para la caja principal, y mi sorpresa ha sido cuando solo se ha coloreado la parte superior del background que no cubre la caja, como si los bordes de la caja contenedora fuesen un "falso espejismo" y ya estuviesen cubiertos por algún elemento invisible, ¿se podría conseguir un background de color por los 4 costados con este código que tanto esfuerzo me ha costado?

;)

Muchas gracias!!

alexk · #3 (**permalink**) 21/08/2009, 12:42

Hola
no entiendo quieres que la capa main no se mueva?....
pues agregale esto
#main{
left:50%;
/*luego la mitad del ancho de tu capa, relativamente agregale un margin-left negativo es decir,*/
margin-left:-234px;
}
y ya esto aplica tambien para "top" y de igual manera restale en margin la mitad del alto del mismo y listo.

PD: lo del background no lo entendi... bueno ya me lie

Lorelopez · #4 (**permalink**) 21/08/2009, 14:02

no, no, me he explicado fatal! Lo que quiero es que el contenedor no me baile al cambiar el tamaño de la ventana del navegador, es decir, que todo lo que lo contiene se quede quieto, y no se vea como se deforman los márgenes y el resto del diseño, pero la #main está perfecta así...

alexk · #5 (**permalink**) 21/08/2009, 14:56

mmm es que tienes tu sitio por %... por eso ocurre tendrias que usar tamaños minimos y maximos para implementar...
(min-width y max-width)

deirdre · #6 (**permalink**) 21/08/2009, 18:51

Hola Lorelopez

No me acabo de enterar muy bien de lo estás buscando hacer (este es el problema de no conocer la totalidad del proyecto y sus funcionalidades), pero te dejo una hoja de estilo, con cambios, para que pruebes tu diseño y nos comentes algo:

Código HTML:

* {margin: 0; padding: 0;}

html, body {
width: 100%;
height: 100%;
text-align: center;
}

body {
background-color:#800000;
font-family: Georgia, "Times New Roman", sans-serif;
color: black;
font-weight: normal;
text-align: justify;
font-style: normal;
font-size: 16px;}

#contenedor {
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
/*margin: 2em auto;*/
/*vertical-align: middle;*/
background-color: #FFCCCC;
overflow:auto
}

#main {
position:absolute;
left:47%;
top:33%;
width:458px;
height:183px;
z-index:1;
font-family: Georgia, "Times New Roman", sans-serif;
font-size: 24px;
font-weight: bold;
color: #990000;
text-align: center;
background-color:aqua; /*para testar*/
}

A mi modo de ver, el problema está en combinar medidas en porcentaje (contenedor) con medidas de posicionamiento en px (main).

Naturalmente, esto es una simple aproximación a lo que yo entiendo que es tu problema. Ajusta las medidas y haz una prueba.

Espero comentarios.

Bye

Lorelopez · #7 (**permalink**) 22/08/2009, 02:44

Gracias ALEXK / DEIRDRE, lo siento chicos, si no me explico mejor es porque realmente me faltan muchos conocimientos para hacerlo por ahora... :(

Ok, me daba a mi que eso de los tamaños me traería problemas, ¿existe algún thread en el que se haya comentado esto en plan recomendaciones ABC?

DEIRDRE, he probado el nuevo código, te comento:

He añadido position:absolute, top: 5%, y left 5% como me decías, y retirado el margin y vertical-align, y nada, NO consigo que la caja contenedora deje de moverse cuando hago el restore de la ventana, además me surge una pregunta con respecto a lo que decía ALEXK: "es que tienes tu sitio por %... por eso ocurre tendrias que usar tamaños minimos y maximos para implementar..."
Entonces, % o no? Debe de der que no porque si no me funciona... ¿alternativas pa una pobre de conocimientos please?

GRACIAS!!!!

jomaruro · #8 (**permalink**) 22/08/2009, 09:25

Hola:

Cita:

Iniciado por Lorelopez

¿alternativas pa una pobre de conocimientos please?

Existen un par de manuales sobre css en www.librosweb.es

Además tienes en las FAQ de este mismo foro las guias de Mikmoro:

Pequeña guía de migración de HTML+tablas a XHTML+CSS (Parte I).
Pequeña guía de migración de HTML+tablas a XHTML+CSS (Parte II).

Saludos.

Lorelopez · #9 (**permalink**) 22/08/2009, 12:27

No si todo eso ya me lo he leido, pero la caja sigue moviendose...

jomaruro · #10 (**permalink**) 22/08/2009, 15:31

Hola:

En el id main debes quitar el position:absolute, es lo que hace que el contenido del medio se quede estático.

Saludos.