Re: [Ovillo] Navegación con pestañas verticales

Tue, 05 Sep 2006 01:57:46 -0700 

From: "Reynier Perez Mira"
<[EMAIL PROTECTED]>
Subject: [Ovillo] Navegación con pestañas verticales

>>Bueno el caso es que tengo que hacer algo como un
menú de navegación vertical.

El ejemplo que mandaba Gonzalo Alonso es muy ingenioso
y básicamente se puede resumir en lo siguiente:

La estructura es un div invisible dentro de un li. Hay
que crear una regla que haga visible el div y que sea
aplicable a un div que esté dentro de un li:hover.

Mando un ejemplo parecido:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<html>
<head>
<title>MouseOver con CSS</title>
<style>
img {
        display: none;
        position: absolute;
        top: 70px;
        left: 200px;
        width: 300px;
}
div:hover img {
        display: inline;
}
div:hover {
        background-color: yellow;
}
</style>
</head>

<body>
<h1>MouseOver con CSS</h1>

<table>
        <tr><td><div class="titulo">Paul Newman<img
src="http://i.imdb.com/Photos/Mptv/1396/0070_2352.jpg";></div></td></tr>
        <tr><td><div class="titulo">Marylin Monroe<img
src="http://i.imdb.com/Photos/Mptv/1385/0758_0995.jpg";></div></td></tr>
        <tr><td><div class="titulo">Clark Gable <img
src="http://i.imdb.com/Photos/Mptv/1396/0025_2348.jpg";></div></td></tr>
</table>
</body>
</html>

Sólo lo he hecho funcionar en Firefox 2 y en Opera 8.
Para IE supongo que bastará con cambiar los <div> por
<a>.

¡Buen trabajo de grado!

Santiago.



                
______________________________________________ 
LLama Gratis a cualquier PC del Mundo. 
Llamadas a fijos y móviles desde 1 céntimo por minuto. 
http://es.voice.yahoo.com
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo

Responder a