Meter una tabla dentro de otra en CSS

varuk #1 Sep '10

Hola.

Tengo este código CSS que lo que hace es que crea una tabla grande (#header_menu) y dentro creo 4 tablas pequeñas. El caso es que cuando hago que la tabla grande, la de color rojo en la foto, tenga una altura menor, reduzco el height, las que están dentro no se "van" con ella, sino que se quedan donde están. Con este dibujo lo vais a ver mejor:

#header_menu {
    width: 700px;
    height: 50px;
    float:right;
    margin-top: 0px;
    font-size:25px;
    background:#ff0000;}
    

#header_menu a:link {text-decoration:none;}
#header_menu a:visited {text-decoration:none;}
#header_menu a:hover {color: #FFF;}
#header_menu a:active {text-decoration:none;}


#header_menu_inicio {
    width: 100px;
    height: 50px;
    position:absolute;
    margin-top: 50px;
    padding: 20px 0px 0px 50px;
    background: url('../img/icono-inicio.png') no-repeat;
    }
    


#header_menu_contacto {
    width: 100px;
    height: 50px;
    position:absolute;
    margin-top: 60px;
    margin-left: 135px;
    padding: 10px 0px 0px 55px;
    background: url('../img/icono-contacto.png') no-repeat;
    }
    

#header_menu_cuenta {
    width: 150px;
    height: 50px;
    position:absolute;
    margin-top: 50px;
    margin-left: 315px;
    padding: 20px 0px 0px 52px;
    background: url('../img/icono-cuenta.png') no-repeat;
    }
    

#header_menu_carrito {
    width: 150px;
    height: 50px;
    position:absolute;
    margin-top: 50px;
    margin-left: 500px;
    padding: 20px 0px 0px 52px;
    background: url('../img/icono-carrito.png') no-repeat;
    }

El código de la página es

<div id="header_menu">
<div id="header_menu_inicio">
<a href="index.php">Inicio</a>
</div>
<div id="header_menu_contacto">
<a href="contact-form.php">Contacto</a>
</div>
<div id="header_menu_cuenta">
<a href="my-account.php">Mi cuenta</a>
</div>
<div id="header_menu_carrito">
<a href="order.php">Carrito</a>
</div>
</div>

¿Por qué si encojo la tabla roja no se mueven los demás elementos hacia arriba con ella?

NeB1 #2 Sep '10

#2 los elementos tienen un height definido y fijo, no sé que comportamiento esperabas. Prueba a ponerle a las tablas hijas height:100%; para que cojan la altura de la tabla padre.

(o sea, cambia de:

    

#header_menu_inicio {
    width: 100px;
    height: 50px;
    position:absolute;
    margin-top: 50px;
    padding: 20px 0px 0px 50px;
    background: url('../img/icono-inicio.png') no-repeat;
    }

a:

[code]

#header_menu_inicio {
width: 100px;
height: 100%;
position:absolute;
margin-top: 50px;
padding: 20px 0px 0px 50px;
background: url('../img/icono-inicio.png') no-repeat;
}
[/code]
y lo mismo en las otras tablas

varuk #3 Sep '10

Gracias ^^

Crawler #4 Sep '10

veo que llevas bastante lio encima!

Por partes:

Los hijos los tienes con position absolute y el padre sin position, asi que los hijos se posicionan desde el ascendiente más cercano que tenga posicion definida (probablemente ninguno, asi que se posicionará desde el body)

Los hijos tienen margin-top: 50px. Aunque su padre mida 10 o 100px de alto, los hijos estarán siempre a 50px del contenido del padre (que por lo que veo está vacio, asi que será desde el borde superior)

No necesitas positions ni margins para hacer esto.

Puedes usar:

#header_menu {
background:#ff0000;
overflow: hidden;
width: 700px;
}

#header_menu div{ /*aunque mejor si les pones una clase comun, algo tipo ".hijo" */
float: left;
}

Y son capas, no tablas!

NeB1 #5 Sep '10

#4 ni me había parado a mirar que estaba usando divs xDDDD

Meter una tabla dentro de otra en CSS

Usuarios habituales

Tags