Ci sarebbe anche una quarta possibilità, se hai la galleria di immagini strutturata come una lista (<ul>, <dl> o - ).
E' una cosa abbastanza complessa rispetto a quello che devi fare (non so se ne valga la pena...), cmq si tratta di questo codice XHTML:
codice:
<div id="container">
<ul>
- [img]immagine.jpg[/img]
- [img]immagine.jpg[/img]
- [img]immagine.jpg[/img]
- [img]immagine.jpg[/img]
- [img]immagine.jpg[/img]
e di questo CSS:
codice:
#container {
width: 510px;
float: left;
}
ul {
padding: 0;
margin: 0;
}
ul li {
width: 160px;
height: 90px;
text-align: center;
list-style-type: none;
background-image: url(sfondoimmagine.gif);
background-repeat: no-repet;
background-position: 50% 50%;
padding: 0;
margin: 5px 10px 5px 0;
float: left;
}
ul li img {
border: none;
width: 140px;
height: 70px;
margin: 10px;
}
Dove ho impostato sfondoimmagine.gif come un'immagine di sfondo per gli elementi[*] (e sarà l'immagine con i 4 angoli smussati), una distanza tra gli elementi[*] di 10px (sopra e sotto di 5px visto che i margini non collassano) e un "bordo" per ogni immagine di 10px su tutti i lati (creato con un margin). Ricorda solo che l'elemento #container deve avere una larghezza pari al numero di immagini che vuoi che stiano su una "riga" (comprensivo dei loro margini e dei margini dei[*]).
L'ho testato su IE5 e Firefox e funziona (non so su IE6...).
L'unica "controindicazione" è che hai la distanza tra due elementi[*] impostata tramite il solo margine destro...se imposti il sinistro (sia sui[*] che sul #container) incorri nel fastidioso bug di IE che ti raddoppia questo margine, essendo applicato ad un elemento float: left.
Ciao!
Rispondi quotando