Foros del Web » Creando para Internet » CSS »

¿Es posible centrar una caja contenedora verticalmente y con margen inferior?

Estas en el tema de ¿Es posible centrar una caja contenedora verticalmente y con margen inferior? en el foro de CSS en Foros del Web. Hola, me gustaría realizar una página principal que abriese a modo "pantalla de cine" o como quiera que se pueda denominar el efecto de tener ...
  #1 (permalink)  
Antiguo 20/08/2009, 11:57
 
Fecha de Ingreso: agosto-2009
Mensajes: 70
Antigüedad: 15 años, 3 meses
Puntos: 0
¿Es posible centrar una caja contenedora verticalmente y con margen inferior?

Hola, me gustaría realizar una página principal que abriese a modo "pantalla de cine" o como quiera que se pueda denominar el efecto de tener un rectángulo, muy sutil, conteniendo la web.

El efecto aproximado, en versión algo precaria, lo sabría conseguir con una tabla y un iframe, pero no sé si los iframes se recomiendan para estos casos o son solo una solución desesperada; sería algo así:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Bla, bla, bla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#cfcfcf" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFCCCC">
<tr>
<td align="center">
<iframe align="middle" height= "425" width= "775" style="border: solid 1px #000000;" frameborder="" scrolling="no"></iframe>

</td>
</tr>
</table>
</body>
</html>



Sin embargo, siguiendo muy buenos consejos de este foro, estoy determinada a no usar tablas nunca más y dominar las CSS, así que allá va mi pregunta:

Si en la hoja de estilos pusiese:

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

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

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;
}


¿No se supone que tendría que conseguir una caja contenedora sobre fondo blanco diferenciada del fondo por márgenes en los 4 costados? Lo que me resulta correcto menos en el margen inferior.

¿Es quizás imposible hacer un margen inferior para una caja contenedora? es decir ¿hay algo así como un atributo "margin-low" o similar o tendría que buscar otra forma de conseguir el efecto deseado?

Os agradeceria tanto una respuesta "for dummies", ¡qué soy novata! jeje

MIL GRACIAS!!!!
  #2 (permalink)  
Antiguo 20/08/2009, 12:23
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 5 meses
Puntos: 539
Respuesta: ¿Es posible centrar una caja contenedora verticalmente y con margen inferi

Hola Lorelopez
¿a qué llamas margen? ¿no lo estarás confundiendo con border?
Aquí tienes las propiedades (y diferencias).
Pero tanto una como la otra admiten valores para top | right | bottom | left y se pueden definir de forma independiente o conjuntamente en una solo declaración:
"margin: 2px 5px 10px 0px"

Sobre tus selector:
Cita:
#contenedor {
margin: 0 auto;
width: 90%;
height: 90%;
margin-left: auto;
margin-right: auto;
margin: 2em auto;
vertical-align: middle;
background-color: #FFCCCC;
}
Como verás, repites varias veces la declaración del borde, así que la que prevalece es la última (resaltada en negrita).

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 20/08/2009, 13:17
 
Fecha de Ingreso: agosto-2009
Mensajes: 70
Antigüedad: 15 años, 3 meses
Puntos: 0
Respuesta: ¿Es posible centrar una caja contenedora verticalmente y con margen inferi

Vaya vaya lio de márgenes que tengo...

Entonces, ahora he puesto:

#contenedor {

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

y ya tengo el efecto deseado, mi duda es si el tamaño de la caja contenedora y de sus bordes/margenes (aun estoy pez en esto) variará dependiendo del contenido o tendré ese efecto "pantalla de cine" independientemente de lo que le incluya, no sé si me explico...


Muchas gracias KSESO?

Última edición por Lorelopez; 20/08/2009 a las 13:17 Razón: ERROR
  #4 (permalink)  
Antiguo 20/08/2009, 13:43
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.698
Antigüedad: 15 años, 4 meses
Puntos: 137
Respuesta: ¿Es posible centrar una caja contenedora verticalmente y con margen inferi

el tamaño (width), se suma... con su margin, padding y border... como dice la URL que te envia kseso? asi que no te preocupes por tu contenido... el tamaño de tu div siempre sera el mismo... (el ancho) podrias agregarle un "overflow:auto;" para que te saque el scroll... cuando sea mucho contenido (altura) pero no se me lo estoy imaginando supongo que si funciona... chao y suerte
  #5 (permalink)  
Antiguo 20/08/2009, 14:25
 
Fecha de Ingreso: agosto-2009
Mensajes: 70
Antigüedad: 15 años, 3 meses
Puntos: 0
Respuesta: ¿Es posible centrar una caja contenedora verticalmente y con margen inferi

Osea ALEXK, que si hago

#contenedor {

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

en teoría tengo una página de inicio con scroll si los contenidos de la caja contenedora superan el tamaño de la misma, ¿no es así?

Pues ahora que tengo la página de inicio que buscaba, ¿como diantres consigo er mardito efecto de los marcos de un cuerpo cambiante y la estructura básica de la caja contenedora fija?

Creo que IM BACK TO BASICS, poc a poc...
  #6 (permalink)  
Antiguo 20/08/2009, 14:36
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.698
Antigüedad: 15 años, 4 meses
Puntos: 137
Respuesta: ¿Es posible centrar una caja contenedora verticalmente y con margen inferi

mmmm... ya me lie... jeje... aver... tienes la ULR?...

Cita:
en teoría tengo una página de inicio con scroll si los contenidos de la caja contenedora superan el tamaño de la misma, ¿no es así?
si... (en teoria alex mind)

Cita:
efecto de los marcos de un cuerpo cambiante y la estructura básica de la caja contenedora fija?
aqui me perdi...
  #7 (permalink)  
Antiguo 20/08/2009, 14:49
 
Fecha de Ingreso: agosto-2009
Mensajes: 70
Antigüedad: 15 años, 3 meses
Puntos: 0
Respuesta: ¿Es posible centrar una caja contenedora verticalmente y con margen inferi

Jaja, es que si te soy sincera, ni yo sé lo que digo (lore´s mind ;)

Link por ahora ná de ná porque ando trabajando casi "sobre papel".

El caso es que estoy pez, como ya te habrás dado cuenta, y de CSS ya es un logro para mi haber conseguido reflejar la portada que quería conferir.
La historia es que yo tenía un diseño previo con marcos y tablas, obsoleto por lo visto, en el que el encabezado, menu lateral y pie permanecian mientras que una seccion (uno de los frames) cambiaba, y estoy intentando una solución práctica mediante CSS.

Pero claro, con esto de CSS me quedo por ahora en la página de inicio y no sé qué se supone qué tengo que hacer a posteriori, ya, lo sé, estoy leyéndome millones de guías y links a threads, pero hay cosas que se me escapan, como por ejemplo sabes si también puedo poner como targets de enlaces a cajas que estén incluídas dentro del interior de la caja contenedora a modo de marco...

Qué alguien me exorcice ya mismo porque no sé ni lo que digo, jaaaaaaaaa

GRACIAS ALEXK!!!!
  #8 (permalink)  
Antiguo 20/08/2009, 19:02
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.698
Antigüedad: 15 años, 4 meses
Puntos: 137
Respuesta: ¿Es posible centrar una caja contenedora verticalmente y con margen inferi

jeje buena actitud... huy la unica manera es usar jquery y otra libreria... para hacer una navegacion con tabs... ya que por ahora solo con CSS no se puede hacer esto... pero si el CSS te da problemas creo que aun no estas lista para librerias JS (ni yo), pero bueno puedes ver esta opcion pero no funciona en crhome ni en safari ya que no reconosen la propiedad "a:focus"
http://araudi.net/ejemplos/tabs_activo.html#
chao y suerte!...
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:54.