Foros del Web » Creando para Internet » CSS »

Ayuda con vertical-align

Estas en el tema de Ayuda con vertical-align en el foro de CSS en Foros del Web. Hola, estoy tratando de ordenar una capa dentro de otra.. lo que yo quiero es que la capa de adentro, se alinie verticalmente en el ...
  #1 (permalink)  
Antiguo 15/01/2007, 16:47
 
Fecha de Ingreso: febrero-2002
Mensajes: 503
Antigüedad: 15 años, 9 meses
Puntos: 0
Ayuda con vertical-align

Hola, estoy tratando de ordenar una capa dentro de otra.. lo que yo quiero es que la capa de adentro, se alinie verticalmente en el medio de la otra capa, en el css le puse vertical-align:middle, pero no funciona.

Como veo medio dificil que me ayuden a lo ciego, les paso los archivos.

http://download.yousendit.com/213D4A393848B9F9

Mi otra pregunta, es si hay alguna manera de que la pagina se vea igual en firefox y en explorer (miren y comprueben que no se ven igual)

Estoy empezando con CSS, disculpen mi ignorancia, les agradeceria su ayuda!

saludos
__________________
WwW.oasisforo.CoM.ar
  #2 (permalink)  
Antiguo 18/01/2007, 10:51
Avatar de bhagat  
Fecha de Ingreso: julio-2002
Ubicación: Granada
Mensajes: 469
Antigüedad: 15 años, 4 meses
Puntos: 7
Re: Ayuda con vertical-align

Hola Tomillo

Cita:
en el css le puse vertical-align:middle, pero no funciona.
Es que no exsiste ese atributo para CSS, eso es código para tablas.

para lograr eso tienes que insertar margin-top: auto; margin:bottom:auto puesto que auto es lo que hace centrarse.

Tambien se puede escribir en una sola linea, como ya lo tienes en el div contenedor de tu CSS.
por ejemplo

margin: auto 10px auto 15px; ( lo lee en este orden top, right, bottom, left) ,así por ejemplo quedaría centrado verticalmente (top y bottom auto) , 10 px de margen derecho y 15 px de margen izquierdo.

Se puede simplificar aun mas pero si lo escribes así funcionará siempre y podras manejar mejor los diferentes margenes.

espero que te sirva
__________________
Por prudencia, la palabra SIEMPRE,
no la deberiamos usar NUNCA

Bhagat Dominguez
www.percusioncreativa.com
  #3 (permalink)  
Antiguo 18/01/2007, 11:19
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Ayuda con vertical-align

La forma que yo uso para centrar algo verticalmente, suponiendo que se conozca el tamaño exacto de la caja, es la siguiente:

- se asigna a la caja interior un desplazamiento superior del 50%, con lo que conseguimos que el borde superior de esa caja quede en el centro exacto.
- ahora le damos un margen superior negativo igual a la mitad del tamaño de la caja interior, de manera que se deplaza hacia arriba la mitad de su tamaño, con lo que tenemos el centro de la caja interior situado en el centro de la caja exterior (contenedora).
Te pongo un ejemplo de centrado horizontal y vertical al mismo tiempo:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />
  <title>Caja interior centrada</title>
  <style type="text/css">
  #caja1 { width: 200px;
    height: 200px;
    position: relative;
    background-color: rgb(51, 153, 153);
    }

  #caja2 { width: 100px;
    height: 100px;
    top: 50%;
    margin-top: -50px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    background-color: rgb(102, 204, 204);
    }
  </style>
</head>
<body>
<div id="caja1">Caja exterior
<div id="caja2">Elemento interior</div>
</div>
</body>
</html>
Mikel.
  #4 (permalink)  
Antiguo 18/01/2007, 12:12
Avatar de bhagat  
Fecha de Ingreso: julio-2002
Ubicación: Granada
Mensajes: 469
Antigüedad: 15 años, 4 meses
Puntos: 7
Re: Ayuda con vertical-align

también tienes esta opción

http://www.webmasterlibre.com/2006/0...ss-2-vertical/
__________________
Por prudencia, la palabra SIEMPRE,
no la deberiamos usar NUNCA

Bhagat Dominguez
www.percusioncreativa.com
  #5 (permalink)  
Antiguo 25/01/2007, 23:03
 
Fecha de Ingreso: febrero-2002
Mensajes: 503
Antigüedad: 15 años, 9 meses
Puntos: 0
Re: Ayuda con vertical-align

Muchas gracias Mikmoro, me funciono con tu manera

Gracias de todos modos bhagat, tambien me sirvio de ayuda!
__________________
WwW.oasisforo.CoM.ar
  #6 (permalink)  
Antiguo 26/01/2007, 13:37
 
Fecha de Ingreso: febrero-2002
Mensajes: 503
Antigüedad: 15 años, 9 meses
Puntos: 0
Re: Ayuda con vertical-align

Y ahora como puedo hacer para que cuando achico el navegador, que la caja (las dos segun el ejemplo de Mikmoro) quede fija, y no se mueva, probe con todas las posiciones de "position" pero no logro arreglar eso.

Aqui les paso el codigo..

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>

<style type="text/css">
#banner_fondo1 {
	float:right;
	width: 498px;
    height: 100px;
	position:absolute;
    background-image:url(../images/banner_fondo.gif);
	right: 50px;
	top: 6px;
}

#banner_fondo2 {
	width: 468;
    height: 60;
    top: 50%;
    margin-top: -30px;
    position: absolute;
    left: 50%;
    margin-left: -235px;
}

#logo {
	float:left;
	width:98px;
	height:105px;
	padding-left:100px;
	position:absolute;
}
</style>
</head>

<body>
<div id="logo">
<img src="images/logo.gif" width="98" height="105" /></div>
<div id="banner_fondo1">
<div id="banner_fondo2">
<img src="images/banner_c_unit3.gif" width="468" height="60" /></div>
</div>
</body>
</html> 
Prueben achicar el navegador y veran que la caja se va a superponer al logo, yo lo que quiero es que en ningun momento se mueva la caja al achicar el navegador.


Saludos
__________________
WwW.oasisforo.CoM.ar
  #7 (permalink)  
Antiguo 26/01/2007, 15:27
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Ayuda con vertical-align

Es sencillo: si marcas una distancia del lado derecho y esa distancia es fija, cuando reduces el navegador la caja siempre se mantiene a la misma distancia de la derecha, y por eso es empujada.
Sin embargo, si marcas la distancia de la izquierda, esa también será fija, y aunque reduzcas el navegador siempre se mantendrá, por lo que nunca se acercará al logo.
Prueba con esto:

#banner_fondo1 { width: 498px;
height: 100px;
position: absolute;
background-image: url(../images/banner_fondo.gif);
top: 6px;
background-color: rgb(102, 204, 204);
left: 450px;
}

Al estar en posición absoluta el float right no le hace nada, así que lo he eliminado, y he cambiado el right: 50px por left: 450px, que viene a ser muy parecido en tu caso (prueba hasta encontrar el sitio a tu gusto).

Ya me dirás qué tal.

Mikel.
  #8 (permalink)  
Antiguo 28/10/2011, 19:58
 
Fecha de Ingreso: octubre-2011
Mensajes: 4
Antigüedad: 6 años, 1 mes
Puntos: 0
Respuesta: Ayuda con vertical-align

Hola a todos, despues de quemar pestañas, llege a la solucion
1.- dentro del cuadro de dialogo de editar la regla, la primera opcion es TYPE (TIPO) y dentro de esta opcion hay un casillero que dice LINE -HEIGHT, ahi escribes el MISMO ALTO QUE PUSISTE A TU DIV y listo sea texto o imagen se centrara , es decir funcionara tu VERTICAL-ALIGN:MIDDLE
suerte a todos
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:41.