Bonjour
en préambule, je suis totalement novice...
voilà j'ai trouvé une galerie photo qui correspond à mes attentes, j'ai déjà inversé sa position (right pour left) et sa présentation. j'aimerai savoir comment faire pour, qu'à la place du rollover sur les thumbnails, ce soit par clic... je ne vois pas comment faire dans mon CSS, dois-je ajouter d'autres lignes de codes ?
enfin si qu'un peut m'aider ce serait adorable.
voici le CSS :
body {
text-align:center;
font: 11px Verdana, Arial, Helvetica, sans-serif, arial, sans-serif;
letter-spacing:0.05em;
}
/*container
#container {
position: relative;
width: 650px; /*diminutions de la largeur*/
height: 407px;
margin: 20px auto 0;
border: 1px solid #aaa;
background: #fff url(../images/back.jpg) no-repeat 75px 10px;
}
/* size - and position
#container ul {
float:left;
width:280px;
height:386px;
padding:0;
margin:5px;
list-style:none;
}
#container li {float:left;}
/* Remove the images and text from sight
#container a.gallery span {
position:absolute;
overflow:hidden;
width:1px;
height:1px;
top:5px;
left:5px;
background:#fff;
}
/* Adding the thumbnail images */
#container a.gallery, #container a.gallery:visited {
display:block;
color:#666666;
text-decoration:none;
border:1px solid #000;
margin:1px 2px 1px 2px;
text-align:left;
cursor:default;
}
#container a.slidea, #container a.slideb, #container a.slidec, #container a.slided, #container a.slidee,
#container a.slidef, #container a.slideg, #container a.slideh, #container a.slidei {
background: url(p1.jpg);
height:80px;
width:80px;
}
/* styling the hovers */
#container a.gallery:hover {border:1px solid #fff;}
#container a.gallery:hover span {
position:absolute;
width:300px; /*valeur modifiée > trop étroit*/
height:400px;
top:0px;
left:340px;
color:#666666;
background:#fff;
border: 1px solid #00FF00
}
#container a.gallery:hover img {
float:left;
margin-right:5px;
border:1px solid #fff;
}
#container a.slideb:hover img, #container a.slidei:hover img {float:right;}
en préambule, je suis totalement novice...
voilà j'ai trouvé une galerie photo qui correspond à mes attentes, j'ai déjà inversé sa position (right pour left) et sa présentation. j'aimerai savoir comment faire pour, qu'à la place du rollover sur les thumbnails, ce soit par clic... je ne vois pas comment faire dans mon CSS, dois-je ajouter d'autres lignes de codes ?
enfin si qu'un peut m'aider ce serait adorable.
voici le CSS :
body {
text-align:center;
font: 11px Verdana, Arial, Helvetica, sans-serif, arial, sans-serif;
letter-spacing:0.05em;
}
/*container
#container {
position: relative;
width: 650px; /*diminutions de la largeur*/
height: 407px;
margin: 20px auto 0;
border: 1px solid #aaa;
background: #fff url(../images/back.jpg) no-repeat 75px 10px;
}
/* size - and position
#container ul {
float:left;
width:280px;
height:386px;
padding:0;
margin:5px;
list-style:none;
}
#container li {float:left;}
/* Remove the images and text from sight
#container a.gallery span {
position:absolute;
overflow:hidden;
width:1px;
height:1px;
top:5px;
left:5px;
background:#fff;
}
/* Adding the thumbnail images */
#container a.gallery, #container a.gallery:visited {
display:block;
color:#666666;
text-decoration:none;
border:1px solid #000;
margin:1px 2px 1px 2px;
text-align:left;
cursor:default;
}
#container a.slidea, #container a.slideb, #container a.slidec, #container a.slided, #container a.slidee,
#container a.slidef, #container a.slideg, #container a.slideh, #container a.slidei {
background: url(p1.jpg);
height:80px;
width:80px;
}
/* styling the hovers */
#container a.gallery:hover {border:1px solid #fff;}
#container a.gallery:hover span {
position:absolute;
width:300px; /*valeur modifiée > trop étroit*/
height:400px;
top:0px;
left:340px;
color:#666666;
background:#fff;
border: 1px solid #00FF00
}
#container a.gallery:hover img {
float:left;
margin-right:5px;
border:1px solid #fff;
}
#container a.slideb:hover img, #container a.slidei:hover img {float:right;}
