On 12/10/06, Rodrigo Álvarez Virgós <[EMAIL PROTECTED]> wrote:
>
> Veréis, tengo que hacer un menú parecido a esto
> http://156.35.94.1/~i1640728/menu.jpg
>
no tuve tiempo de testearlo mucho. al menos en Firefox 2, IE7 e
IE5.5funciona bien:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
http://www.w3.org/1999/xhtml";>
#puzzlenav, #puzzlenav * { margin: 0; padding: 0; }
#puzzlenav {
position: relative;
background: blue; /* todos los elementos internos estan posicionados, este
fondo no se muestra */
}
#puzzlenav ul {
list-style: none;
background: red; /* todos los elementos internos estan posicionados,
este fondo no se muestra */
}
#puzzlenav ul li {
display: block;
width: 130px; height: 110px;
background: #ddd;
color: #111;
text-align: center;
}
/* posicionamiento de las piezas */
#puzzlenav ul li { position: absolute; }
#puzzlenav ul li.item1 { left: 325px; top: 32px; }
#puzzlenav ul li.item2 { left: 195px; top: 142px; }
#puzzlenav ul li.item3 { left: 325px; top: 142px; }
#puzzlenav ul li.item4 { left: 455px; top: 142px; }
#puzzlenav ul li.item5 { left: 585px; top: 142px; }
#puzzlenav ul li.item6 { left: 600px; top: 252px; }
#puzzlenav ul li a {
display: block;
font-weight: bold;
line-height: 110px; vertical-align: middle; /* reemplazar esto
por height: 110px; si los links tienen textos de mas de una linea */
text-decoration: none;
}
/* colores de las piezas */
#puzzlenav ul li a { background: #ccf; color: #000; }
#puzzlenav ul li.item1 a { background: #fff500; color: #444; }
#puzzlenav ul li.item2 a { background: #e05222; color: #eee; }
#puzzlenav ul li.item3 a { background: #9ecd29; color: #fff; }
#puzzlenav ul li.item4 a { background: #e05222; color: #eee; }
#puzzlenav ul li.item5 a { background: #a32179; color: #eee; }
#puzzlenav ul li.item6 a { background: #007cc2; color: #eee; }
#puzzlenav ul li a:hover { background: none; color: inherit; }
http://156.35.94.1/~i1640728/menu.jpg";>Primer
itemhttp://google.com/";>Segundo
itemhttp://yahoo.com/";>Tercer itemhttp://del.icio.us/";>Cuarto itemhttp://www.mozilla.org/products/firefox/start/";>Quinto itemhttp://www.opera.com/";>Sexto item
espero sirva.
--
inti castro
[EMAIL PROTECTED]
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
