Foros del Web » Creando para Internet » CSS »

Capa centrada

Estas en el tema de Capa centrada en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/03/2008, 08:25
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Capa centrada

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!
  #2 (permalink)  
Antiguo 20/03/2008, 09:53
Avatar de alexblue  
Fecha de Ingreso: enero-2006
Ubicación: Londres
Mensajes: 71
Antigüedad: 11 años, 10 meses
Puntos: 0
Re: Capa centrada

Hola neodani:

Prueba esto:

Código:
div.contenedor {
  width: 700px;
  height: 500px;
  margin: 0 auto;
}
Suerte!
__________________
Alex
alexamine.co.uk
Mi profile en Linked In
  #3 (permalink)  
Antiguo 20/03/2008, 10:44
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Re: Capa centrada

Cita:
Iniciado por alexblue Ver Mensaje
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?
  #4 (permalink)  
Antiguo 20/03/2008, 10:52
Avatar de alexblue  
Fecha de Ingreso: enero-2006
Ubicación: Londres
Mensajes: 71
Antigüedad: 11 años, 10 meses
Puntos: 0
Re: Capa centrada

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.
__________________
Alex
alexamine.co.uk
Mi profile en Linked In
  #5 (permalink)  
Antiguo 20/03/2008, 10:59
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Re: Capa centrada

Cita:
Iniciado por alexblue Ver Mensaje
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

:(
  #6 (permalink)  
Antiguo 20/03/2008, 11:06
Avatar de alexblue  
Fecha de Ingreso: enero-2006
Ubicación: Londres
Mensajes: 71
Antigüedad: 11 años, 10 meses
Puntos: 0
Re: Capa centrada

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?
__________________
Alex
alexamine.co.uk
Mi profile en Linked In
  #7 (permalink)  
Antiguo 20/03/2008, 11:28
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Re: Capa centrada

Cita:
Iniciado por alexblue Ver Mensaje
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???
  #8 (permalink)  
Antiguo 20/03/2008, 11:40
Avatar de alexblue  
Fecha de Ingreso: enero-2006
Ubicación: Londres
Mensajes: 71
Antigüedad: 11 años, 10 meses
Puntos: 0
Re: Capa centrada

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?
__________________
Alex
alexamine.co.uk
Mi profile en Linked In
  #9 (permalink)  
Antiguo 23/03/2008, 13:24
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Re: Capa centrada

Cita:
Iniciado por alexblue Ver Mensaje
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
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 17:20.