Ho provato a fare un esperimento, tratto dalle gallerie fotografiche di cui al precedente post, con HTML e CSS (quindi non so se sono più nella sezione giusta).
Comunque posto il codice ma chiedo aiuto per dei problemi da risolvere:
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="description" content=" " />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="" />
<title>
prova lista
</title>
<style rel="stylesheet" type="text/css">
ul#lista{
position: relative;
margin:0;
padding:0;
}
ul#lista li{
margin:0;
padding:0;
list-style: none;
}
ul#lista a span{
display: none;
}
ul#lista a{
text-decoration: none;
}
ul#lista a:hover{
text-decoration: none
}
ul#lista a:hover span{
display: block;
width: 300px;
float: right;
position: fixed;
left: 40%;
top: 5%;
border: 1px solid #fff;
}
ul#lista a:hover span img{
border: none;
margin: 10px;
}
ul#lista a:hover span p{
padding: 0;
margin: 2px;
color: #000;
}
div#contenitore{
position: relative;
height: 120px;
overflow: auto;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="contenitore">
<ul id="lista">
[*]
<a href="">MARIO ROSSI
<span style="background: yellow;">[img]foto/mario_rossi.png[/img]
nato in Italia il 15/02/78</p>
</span>
</a>
[*]
<a href="">PAOLO VERDI
<span style="background: pink;">[img]foto/paolo_verdi.png[/img]
nato in Cile il 26/03/52</p>
</span>
</a>
[*]
<a href="">MARIO ROSSI
<span style="background: brown;">[img]foto/mario_rossi.png[/img]
nato in Italia il 15/02/78</p>
</span>
</a>
[*]
<a href="">PAOLO VERDI
<span style="background: black;">[img]foto/paolo_verdi.png[/img]<p style="color: white;">nato in Cile il 26/03/52</p>
</span>
</a>
[*]
<a href="">MARIO ROSSI
<span style="background: white;">[img]foto/mario_rossi.png[/img]
nato in Italia il 15/02/78</p>
</span>
</a>
[*]
<a href="">PAOLO VERDI
<span style="background: grey;">[img]foto/paolo_verdi.png[/img]
nato in Cile il 26/03/52</p>
</span>
</a>
[*]
<a href="">MARIO ROSSI
<span style="background: blue;">[img]foto/mario_rossi.png[/img]
nato in Italia il 15/02/78</p>
</span>
</a>
[*]
<a href="">PAOLO VERDI
<span style="background: green;">[img]foto/paolo_verdi.png[/img]
nato in Italia il 26/03/52</p>
</span>
</a>
[*]
<a href="">MARIO ROSSI
<span style="background: red;">[img]foto/mario_rossi.png[/img]
nato in Italia il 15/02/78</p>
</span>
</a>
[/list]
</div>
</body>
</html>
I miei problemi sono:
1) con IE lo span con la descrizione non sta fisso dove voglio io, ma si comporta come se fosse un normale float. Infatti, se non ci metto float: right, si posiziona sotto il list item.
2) se tolgo il href sui selettori a, con FF perdo la manina ma l'hover funzione come deve, con IE invece non ci sono più i link, quindi non funziona niente. A queto punto decido di rimettere l'href, è anche più bello vedere la manina, ma se clicco mi torna all'inizio pagina e non voglio.
So che sono un po' complicato, ma chiedo aiuto, grazie ciao.
Permessi di invio
Rispondi quotando