Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Cómo conseguir que una capa no se mueva al restaurarse la ventana del navegador en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/08/2009, 13:13
 
Fecha de Ingreso: agosto-2009
Mensajes: 70
Antigüedad: 8 años, 4 meses
Puntos: 0
Cómo conseguir que una capa no se mueva al restaurarse la ventana del navegador

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>&nbsp;</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!!
  #2 (permalink)  
Antiguo 21/08/2009, 13:19
 
Fecha de Ingreso: agosto-2009
Mensajes: 70
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Cómo conseguir que una capa no se mueva al restaurarse la ventana del nave

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!!

Última edición por Lorelopez; 21/08/2009 a las 13:21 Razón: info extra
  #3 (permalink)  
Antiguo 21/08/2009, 13:42
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Cómo conseguir que una capa no se mueva al restaurarse la ventana del nave

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
  #4 (permalink)  
Antiguo 21/08/2009, 15:02
 
Fecha de Ingreso: agosto-2009
Mensajes: 70
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Cómo conseguir que una capa no se mueva al restaurarse la ventana del nave

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í...
  #5 (permalink)  
Antiguo 21/08/2009, 15:56
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Cómo conseguir que una capa no se mueva al restaurarse la ventana del nave

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)
  #6 (permalink)  
Antiguo 21/08/2009, 19:51
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: Cómo conseguir que una capa no se mueva al restaurarse la ventana del nave

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
  #7 (permalink)  
Antiguo 22/08/2009, 03:44
 
Fecha de Ingreso: agosto-2009
Mensajes: 70
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Cómo conseguir que una capa no se mueva al restaurarse la ventana del nave

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!!!!

Última edición por Lorelopez; 22/08/2009 a las 03:45 Razón: error
  #8 (permalink)  
Antiguo 22/08/2009, 10:25
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Cómo conseguir que una capa no se mueva al restaurarse la ventana del nave

Hola:

Cita:
Iniciado por Lorelopez Ver Mensaje
¿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.

  #9 (permalink)  
Antiguo 22/08/2009, 13:27
 
Fecha de Ingreso: agosto-2009
Mensajes: 70
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Cómo conseguir que una capa no se mueva al restaurarse la ventana del nave

No si todo eso ya me lo he leido, pero la caja sigue moviendose...
  #10 (permalink)  
Antiguo 22/08/2009, 16:31
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Cómo conseguir que una capa no se mueva al restaurarse la ventana del nave

Hola:

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

Saludos.


Última edición por jomaruro; 23/08/2009 a las 05:02
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 23:33.