Foros del Web » Creando para Internet » CSS »

Problema para cuadrar caja dentro de otra con vertical-align

Estas en el tema de Problema para cuadrar caja dentro de otra con vertical-align en el foro de CSS en Foros del Web. Hola a todos. Tengo el siguiente problema: tengo una caja principal para una cabecera y quiero insertar otra caja para un menú dentro de la ...
  #1 (permalink)  
Antiguo 30/10/2007, 07:06
Avatar de franquero  
Fecha de Ingreso: julio-2005
Mensajes: 179
Antigüedad: 18 años, 9 meses
Puntos: 1
Problema para cuadrar caja dentro de otra con vertical-align

Hola a todos.

Tengo el siguiente problema: tengo una caja principal para una cabecera y quiero insertar otra caja para un menú dentro de la de cabecera alineada a la derecha y en la línea de fondo de la misma. Para ello tengo este código
Código HTML:
#cabecera {
	height:80px;
}

#menu {
	width:500px;
	float:right;
	vertical-align:baseline;
}


<!-- luego en el HTML: -->
<div id="cabecera>
Cabecera
<div id="menu"> Menu </div>
</div> 
He estado mirando www.w3schools.com, y la alineación a la derecha con float:right; me sale correctamente, pero la alineación vertical en la línea de base de la caja cabecera no me funciona.

En w3schools dice: Baseline : The element is placed on the baseline of the parent element "El elemento es colocado en la línea de fondo de su padre".
Yo creo que con este parámetro se debería conseguir lo que quiero, pero parece que la estoy cagando.

Seguro que es algo básico, pero estoy atrancado aquí. Os agradezco de antemano cualquier ayuda que podáis ofrecer.



Un saludo
__________________
Es una suerte que la sociedad libre sea más productiva, porque de no haberlo sido jamás se habría tolerado.
  #2 (permalink)  
Antiguo 01/11/2007, 19:19
Avatar de sty
sty
 
Fecha de Ingreso: octubre-2003
Mensajes: 116
Antigüedad: 20 años, 5 meses
Puntos: 1
Re: Problema para cuadrar caja dentro de otra con vertical-align

Hola franquero, esto quizás te pueda servir

Código HTML:
#cabecera {
	height:80px;
	position:relative
}

#menu {
	width:500px;
	float:right;
	position:absolute;
	bottom:0px;
	right:0px
}


<!-- luego en el HTML: -->
<div id="cabecera>
Cabecera
<div id="menu"> Menu </div>
</div> 
  #3 (permalink)  
Antiguo 02/11/2007, 00:44
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 19 años, 2 meses
Puntos: 5
Re: Problema para cuadrar caja dentro de otra con vertical-align

lo que menciona sty deberia funcionar.

Pero el problema vertical-align, no se que decir, ya intente pero tampoco me resulto, buscando en google parece ser que hay problemas, pero noe smuy especifico, si alguien sabe, pues comente, Saludos.
__________________

  #4 (permalink)  
Antiguo 05/11/2007, 18:24
Avatar de franquero  
Fecha de Ingreso: julio-2005
Mensajes: 179
Antigüedad: 18 años, 9 meses
Puntos: 1
Re: Problema para cuadrar caja dentro de otra con vertical-align

Gracias a los dos por el interés en el tema.

Sty, tu solución funciona perfectamente. He estado leyendo sobre posicionamiento. Tengo dos enlaces bastante buenos para comenzar con este tema:

http://www.ignside.net/man/css/posicionamiento.php
http://www.barelyfitz.com/screencast...s/positioning/ [inglés]

La verdad es que cuando empiezo a tenerlo un poco claro, los diferentes resultados en firefox e IE me traen de cabeza.

Ya os daré la brasa por aquí dentro de poco.

Un saludo y gracias de nuevo
__________________
Es una suerte que la sociedad libre sea más productiva, porque de no haberlo sido jamás se habría tolerado.
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 15:33.