photogallery

**gnato** · 05-12-2010, 21:58

Ciao a tutti.

sto realizzando una semplice photogallery ecco i codici:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>prova</title>
    <meta http-equiv="Content-Language" content="Italian" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="css.css" media="screen" />
</head>
<body>

<div id="gallery">
[img]Ida 006.jpg[/img]
[img]Ida 006.jpg[/img]
[img]Ida 006.jpg[/img]
</div>
</body>
</html>

e:

codice:

#gallery {
width:750px;
}

#gallery a {
list-style:none;
padding:0;
width:180px;
position:relative;
display:inline;
width: 100px;
height:100px;
float:left;
margin:0 0 5px 5px;
text-decoration:none;
border:1px solid #000;
}

#gallery a img {
display:block;
width:99px;
height:99px;
border:0;
}

#gallery a:hover {
white-space:normal;
border-color:#ddd;
}

#gallery a:hover img {
position : absolute;
top : 110px;
left : 0;
width:auto;
height:auto;
border:1px solid #000;
}

quando vado con il mouse sopra all'immagine link giustamente viene visualizzata l'immagine originale poco sotto. Non riesco a far si che l'immagine originale venga visualizzata sempre nelle stesse coordinate (praticamente prende come coordinata x l'inizio dell'immagine link) quindi rischio di andare fuori pagina.

Suggerimenti?

Grazie mille a tutti

**Mich_** · 06-12-2010, 10:06

Dovresti togliere il position:relative al tag <a>, ed inseriscilo invece nel tag <div id="gallery">.

Il problema specificato si risolve, ma sorgono altri problemi di usabilita`, per cui non credo che la soluzione ti piacera`.

Credo che ti convenga lasciare il comportamento originale, (eventualmente puoi ridurre il valore di top del :hover img), ed invece metti un'immagine molto chiara (tipo sfondo quasi trasparente) alla fine della galleria in modo da riservare un po' di posto per l'espansione.

E potresti invece definire il left:0 per le immagini che restano a sinistra (come adesso) e fissare al suo posto un right:0 per le immagini che si posizionano a destra nella galleria.

Discussione: photogallery

Strumenti discussione

Ricerca discussione

Visualizza

photogallery

Permessi di invio