Foros del Web » Creando para Internet » CSS »

Alinear div en la parte inferior de otro div

Estas en el tema de Alinear div en la parte inferior de otro div en el foro de CSS en Foros del Web. Hola: Estoy intentando alinear un div con una imagen en la parte inferior de otro div con un float:left, pero no encuentro la forma. La ...
  #1 (permalink)  
Antiguo 22/05/2009, 05:01
Avatar de pangeacb  
Fecha de Ingreso: mayo-2009
Mensajes: 30
Antigüedad: 8 años, 6 meses
Puntos: 0
Alinear div en la parte inferior de otro div

Hola:
Estoy intentando alinear un div con una imagen en la parte inferior de otro div con un float:left, pero no encuentro la forma.

La idea es la siguiente:

<div id="pagina">
<div id="encabezado"></div>
<div id="menu"></div>
<div id="contenido"></div>
<div id="bajomenu">
<div id="degsup"></div>
<div id="deginf"></div>
</div>
<div id="pie"></div>
</div>



#pagina{
width: 711px;
overflow:auto;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

#encabezado{
width:711px;
float:left;
}
#menu{
width:200px;
float:left;
}

#bajomenu{
width:200px;
float:left;
clear:left;
background-image:url(imag/arabesco.png);
background-repeat: repeat-y;
}

#contenido{
width:500px;
float:right;
}
#pie{
width:711px;
float:left;
}

Lo que quiero hacer con esto es que, como cuando el contenido es muy grande, queda mucho espacio bajo el menú, quiero meter una imagen que se repita desde que termina el menú hasta llegar al pie, con dos div, una en la parte superior de la capa, y otra en la parte inferior, que contienen un imagen con un degradado de transparente a blanco, para la que imagen que se repite comience con un degradado, y termine con otro.


Pues el primer problema que me he encontrado es que el height del div #bajomenu no llega hasta el pie, y el segundo es que, el div que contiene la imagen con el degradado que va en la parte inferior(#deginf) no lo puedo alinear en la parte de abajo del div #bajomenu.

Gracias
  #2 (permalink)  
Antiguo 22/05/2009, 22:41
 
Fecha de Ingreso: noviembre-2006
Ubicación: Evergreen Street
Mensajes: 239
Antigüedad: 11 años, 1 mes
Puntos: 2
Respuesta: Alinear div en la parte inferior de otro div

Pues en la hoja de estilos no veo las reglas para #degsup ni para #deginf
  #3 (permalink)  
Antiguo 23/05/2009, 04:09
Avatar de pangeacb  
Fecha de Ingreso: mayo-2009
Mensajes: 30
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Alinear div en la parte inferior de otro div

Cita:
Iniciado por otto1303 Ver Mensaje
Pues en la hoja de estilos no veo las reglas para #degsup ni para #deginf


Por eso digo que no encuentro la forma, porque lo he intentado hacer de diferentes formas, y no funciona, entonces, para poner algo que no funciona, he optado por no poner nada. Aunque si creeis conveniente que ponga algo, lo pongo.
un saludo
  #4 (permalink)  
Antiguo 23/05/2009, 06:51
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Alinear div en la parte inferior de otro div

Cita:
Iniciado por pangeacb Ver Mensaje
Hola:

Lo que quiero hacer con esto es que, como cuando el contenido es muy grande, queda mucho espacio bajo el menú, quiero meter una imagen que se repita desde que termina el menú hasta llegar al pie, con dos div, una en la parte superior de la capa, y otra en la parte inferior, que contienen un imagen con un degradado de transparente a blanco, para la que imagen que se repite comience con un degradado, y termine con otro.

Pues el primer problema que me he encontrado es que el height del div #bajomenu no llega hasta el pie, y el segundo es que, el div que contiene la imagen con el degradado que va en la parte inferior(#deginf) no lo puedo alinear en la parte de abajo del div #bajomenu.

Gracias

Si no lo entiendo mal, lo que quieres es una estructura con "pie siempre abajo", ¿cierto?
Mira esta otra consulta, también de ayer.
El hacer el degradado de color, sólo es cuestión de asignar los tamaños a las cajas contenedoras y sus fondos.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 25/05/2009, 06:13
Avatar de pangeacb  
Fecha de Ingreso: mayo-2009
Mensajes: 30
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Alinear div en la parte inferior de otro div

Cita:
Iniciado por kseso? Ver Mensaje
Si no lo entiendo mal, lo que quieres es una estructura con "pie siempre abajo", ¿cierto?
Mira esta otra consulta, también de ayer.
El hacer el degradado de color, sólo es cuestión de asignar los tamaños a las cajas contenedoras y sus fondos.

Un saludo
Gracias por el interés. En efecto, la parte de llevar #deginf hasta abajo la he resuelto por ese método, pero no consigo que #bajomenu se repita desde que termina el menú hasta abajo.

¿como puedo hacer ésto?
  #6 (permalink)  
Antiguo 25/05/2009, 10:26
Avatar de pangeacb  
Fecha de Ingreso: mayo-2009
Mensajes: 30
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Alinear div en la parte inferior de otro div

Pongo una imagen en
...icreativity.es/imag/bajoizquierda.JPG

la pagina web está colgada en ...emch.es, anque no tiene puesto #bajomenu (se llama bajoizquierda en la pagina), pero se puede ver la estructura css.

#bajozquierda está contenida en div #contenedor, que está centrado en el body.

He leído en varios foros que para que un div contenido en otro tenga se agrande al 100% del contendor, hay que poner el height a todos los objetos en los que está contenido, incluido en html y el body. De hecho, lo he haciendo un página en blanco con el height al 100% de html, body, y funciona a la perfección, pero hay algo en ese código que no lo permite, y no logro verlo. Ruego que alguien le eche un vistazo, para ver que es lo que puede hacer que no funcione.

Gracias

Última edición por pangeacb; 25/05/2009 a las 10:32
  #7 (permalink)  
Antiguo 29/05/2009, 07:31
Avatar de pangeacb  
Fecha de Ingreso: mayo-2009
Mensajes: 30
Antigüedad: 8 años, 6 meses
Puntos: 0
No consigo que el div se expanda al 100% de la altura

Os mando el css completo, por si veis el error que provoca que no se expanda:




* {
padding: 0;
margin: 0;
}
html, body {
padding: 0;
margin: 0;
min-height:100%;
}
body{
background-color:#838281;
text-align:center;

}
* html body{
height:100%;
}
#contenedor{
position:relative;
text-align:left;
background-image:url(../images/sombracontenedor.png);
background-repeat: repeat-y;
width: 711px;
padding-top:10px;
min-height:100%;
overflow:auto;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
* html body #contenedor{
height:100%;
}
#header #imagencabecera {
width:100%;
display:block;
text-align:center;
float:left;
}
#header #titulocabecera {
display:block;
float:right;
margin-top:5px;
margin-right:auto;
margin-left:auto;
margin-right:6%;
}
#navegacion {
float:right;
width:100%;
}
#navegacion .moduletable{
padding:10px 0px 10px 40px;
}
#navegacion h3 {
font-family:"Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:11pt;
font-weight:normal;
}
#navegacion .pathway{
font-family:"Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:8pt;
font-weight:bold;
}
#navegacion .pathway a:link{
color:#999999;
font-weight:normal;
text-decoration:none;
}
#navegacion .pathway a:visited{
color:#999999;
font-weight:normal;
text-decoration:none;
}
#navegacion .pathway a:hover{
color:#666666;
font-weight:normal;
text-decoration:none;
}
#izquierda {
overflow:auto;
float: left;
width: 200px;
padding-left: 40px;
padding-bottom:0px;
margin:auto;
color:#666666;
height:100%;
}
#izquierda a:link{
color:#666666;
text-decoration:none;
}
#izquierda a:visited{
color:#666666;
text-decoration:none;
}
#izquierda a:hover{
color:#999999;
text-decoration:none;
}
#izquierda .module_menu div{
background-image:url(../images/sombramenu_alto.png);
background-position:0px top;
background-repeat:no-repeat;
padding-bottom:0px;
padding-top:3px;
margin-top:10px;
}
#izquierda .module div{
background-image:url(../images/sombramenu_alto.png);
background-position:0px top;
background-repeat:no-repeat;
padding-bottom:0px;
padding-top:3px;
margin-top:10px;
}
#izquierda .module_menu div div{
padding-bottom:0px;
margin-bottom:0px;
background-image:url(../images/sombramenu_bajo.png);
background-position:bottom right;
background-repeat:no-repeat;
}
#izquierda .module div div{
padding-bottom:0px;
margin-bottom:0px;
background-image:url(../images/sombramenu_bajo.png);
background-position:bottom right;
background-repeat:no-repeat;
}
#izquierda .module_menu{
background-image:url(../images/sombramenu_centro.png);
background-repeat:repeat-y;
background-position:top right;
padding-left:0px;
}
#izquierda .module {
background-image:url(../images/sombramenu_centro.png);
background-repeat:repeat-y;
background-position:top right;
padding-left:0px;
}
#izquierda #form-login div{
background-image:none;
padding-bottom:30px;
}
#izquierda div div div{
padding-left:10px;
}
#izquierda h3 {
font-family:"Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:11pt;
font-weight:bold;
color:#000000;
padding-bottom:10px;
}
#izquierda ul{
padding-bottom:30px;
font-family:"Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:10pt;
text-align:left;
list-style-image:url(../images/bullet.png);
}
#izquierda li{
margin-top:10px;
}
#izquierda .parent ul{
margin-left:10px;
padding-bottom:0px;
padding-bottom:0px;
}
#izquierda fieldset{
border:none;
padding-bottom:10px;
font-family:"Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:12pt;
}
#bajoizquierda{
position:relative;
overflow:auto;
background:url(../images/arabesco.png) repeat-y top left;
float:left;
clear:left;
margin-left:40px;
width:200px;
min-height:100%;
}
#degsup{
border:thin solid #000000;
height:50px;
width:100%;
}
#deginf{
border:thin solid #000000;
position:relative;
top:100%;
height:50px;
width:100%;
margin-top:-100px;
}
#contenido {
height:100%;
float: right;
padding-right:40px;
padding-bottom:0px;
width:400px;
margin:auto;
font-family:"Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:11pt;
text-align:justify;
}
.imagentexto{
padding:5px;
}
#contenido .sitemap ul {
list-style-image:url(../images/bullet.png);
}
.tool-tip{
font-family:"Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:11pt;
}
#contenido a:link{
text-decoration:none;
color:#999999;
}
#contenido #component-contact{
float:left;
width:400px;
}
#contenido#searchForm{
width:400px;
float:left;
}
#contenido a:visited{
text-decoration:none;
color:#999999;
}
#contenido a:hover{
text-decoration:none;
color:#666666;
}
#contenido img{
border:none;
}
#contenido .componentheading{
font-family:"Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:18pt;
text-align:left;
}
#contenido .contentheading{
font-family:"Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:18pt;
text-align:right;
padding-right:10px;
}
#contenido .lineabajotitulo{
background-image:url(../images/subrayado.png);
background-repeat:no-repeat;
background-position:95%;
height:14px;
}
#contenido .small, #contenido .createdate, #contenido .modifydate, #contenido .mxcdefault_dotted{
font-size:8pt;
text-transform:uppercase;
font-weight:bold;
}
#contenido #relateditemlist{
list-style-type:none;
}
#contenido hr{
color:#FFFFFF;
}
#contenido #relateditemtitle{
text-transform:uppercase;
font-size:12px;
}
#contenido #poweredby{
color:#FFFFFF;
font-size:0pt;
}
#contenido #JOSC_formpos{
color:#000000;
font-family:"Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:8pt;
height:100%;
background:none;
}
#contenido #JOSC_formpos .onlyregistered{
color:#000000;
}
#contenido .small, .createdate{
padding-bottom:10px;
}
#contenido .modifydate{
padding-top:10px;
}
#contenido .article_column{
padding:0 5px;
}
#contenido .readon {
font-size:8pt;
text-align:center;
}
#espaciobanner {
overflow:hidden;
font-family:"Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:11pt;
font-weight:normal;
float:left;
width:100%;
text-align:center;
padding-bottom:20px;
padding-top:20px;
}
#footer {
bottom:0px;
font-family:"Arial", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:10pt;
font-weight:bold;
color:#000000;
width: 100%;
clear: both;
background-image: url(../images/hierba.png);
background-repeat: no-repeat;
background-position: 3px bottom;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top:0px;
overflow:hidden;
}
#footer #altominimo {
height:70px;
width:1px;
float: left;
clear:none;
}
#footer #copyright {
float:right;
clear:none;
padding-right:10px;
padding-top:35px;
text-align:left;
width:auto;
overflow:auto;
background:url(../images/transparente_der.png) no-repeat;
background-position:right bottom;
margin-right:30px;
}
#footer #contenidopie {
float:right;
clear:none;
padding-top:33px;
text-align:right;
width:auto;
overflow:hidden;
}
#footer #contenidopie .moduletable{
text-align:right;
padding-left:10px;
background-image:url(../images/transparente_izq.png);
background-repeat:no-repeat;
background-position:right bottom;
}
#footer #contenidopie .mainlevel{
padding-right:10px;
}
#footer a:link, a:visited{
color:#000000;
text-decoration:none;
}
#footer a:hover{
color:#666666;
text-decoration:none;
}
#firma{
text-align:right;
background-image:url(../images/sombrafirma.png);
background-repeat:no-repeat;
background-position: 2px top;
width: 711px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
height: 50px;
}
#firma img {
margin-top:10px;
border:none;
}
  #8 (permalink)  
Antiguo 29/05/2009, 10:13
Avatar de pangeacb  
Fecha de Ingreso: mayo-2009
Mensajes: 30
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Alinear div en la parte inferior de otro div

he abierto un tema nuevo para este último punto, podeis cerrar éste. Gracias
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 07:45.