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:
Código:
#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
Código:
<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>