Capa centrada

[neodani]

Buenas de nuevo!

Que resulta que no se hacer una capa centrada en el navegador y que se adapte a la ventana.

He visto esta pagina
http://kindcompany.cmail1.com/confirm/emailAddress.html

Pero esta hecha con tablas, me gustaría hacerla con CSS pero no hay manera.

He leido por ahi
Este codigo que te centra una capa en la ventana

div.contenedor {
width: 700px;
height: 500px;
position:absolute;
left:50%;
top:50%;
margin-left:-350px;
margin-top:-250px; }


Pero el problema es que el tamaño es fijo.

Y si miráis en la pagina de ejemplo que os paso arriba, cuando reduces la ventana la ventana de error siempre permanece en el centro de la pantalla.

Muchas gracias por adelantado!

[alexblue]

Hola neodani:

Prueba esto:

Código:

div.contenedor {
  width: 700px;
  height: 500px;
  margin: 0 auto;
}

Suerte!

[neodani]

Iniciado por alexblue

Hola neodani:

Prueba esto:

Código:

div.contenedor {
  width: 700px;
  height: 500px;
  margin: 0 auto;
}

Suerte!

Sí así tb lo probé pero si te fijas solo se centra "horizontalmente"

Verticalmente queda pegada arriba.

La gracia es que esté centrada tanto vertical como horizontalmente, dificil?

[alexblue]

Perdona, no entendí que quieras centrar el div contenedor verticalmente en tu exposición inicial.

Esto es lo que he empleado en alguna ocasión:

El marcado:

Código HTML:

<div id="distance"></div>
<div id="contenedor">
  Contenidos.
</div> 

Los estilos:

Código:

* {
	margin:0;
	padding:0;
}

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

#distance { 
	width:1px;
	height:50%;
	margin-bottom:-303px; /* la mitad de la altura del div contenedor */
	float:left;
}

#contenedor {
	width:866px;
	height:606px;
	margin:auto;
	position:relative;
	clear:left;
}

Ya me dirás si te ha funcionado.

[neodani]

Iniciado por alexblue

Perdona, no entendí que quieras centrar el div contenedor verticalmente en tu exposición inicial.

Esto es lo que he empleado en alguna ocasión:

El marcado:

Código HTML:

<div id="distance"></div>
<div id="contenedor">
  Contenidos.
</div> 

Los estilos:

Código:

* {
	margin:0;
	padding:0;
}

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

#distance { 
	width:1px;
	height:50%;
	margin-bottom:-303px; /* la mitad de la altura del div contenedor */
	float:left;
}

#contenedor {
	width:866px;
	height:606px;
	margin:auto;
	position:relative;
	clear:left;
}

Ya me dirás si te ha funcionado.

No funciona

:(

[alexblue]

Yo lo he probado en esta página que estoy haciendo y me ha funcionado.

http://cavamicrouniverso.com/

Tienes alguna URL para que podamos ver tu código?

[neodani]

Iniciado por alexblue

Yo lo he probado en esta página que estoy haciendo y me ha funcionado.

http://cavamicrouniverso.com/

Tienes alguna URL para que podamos ver tu código?

Si te fijas tienes un alto defenido, ponlo como en el ejemplo de pequeña

http://kindcompany.cmail1.com/confirm/emailAddress.html

Lo estoy haciendo en una hoja nueva, tal y como me pones el codigo, sin nada más.

Y el problema sigue estando.
Imagina que tienes una capa de 300x100 y quieres centrarla en el medio de la pantalla y (y aquí la parte chula) te interesa que se desplace segun se redimensiona la pantalla. Pero que siga estando centrada.

Intentalo con una capa de ese tamaño y me dices si lo consigues con ese codigo

Saludos!

PD: Será que no se podrá hacer esto con CSS y tendremos que irnos a las TABLAS? como en el ejemplo???

[alexblue]

He creado el ejemplo con las medidas que dices (300x100) y lo he subido a la siguiente dirección:

http://www.alexamine.co.uk/capa-centrada/

Es esto lo que pides?

[neodani]

Iniciado por alexblue

He creado el ejemplo con las medidas que dices (300x100) y lo he subido a la siguiente dirección:

http://www.alexamine.co.uk/capa-centrada/

Es esto lo que pides?

Perdona la demora, estuve fuera estos días :)

Sí, exacto eso era lo que buscaba! muchas gracias alexblue