Bonjour,
en préambule je voudrais signaler que suis absolument débutante en CSS.
Voici ma/mes questions :
J'ai réalisé, avec un tutorial glané, une petite galerie photo avec description des images qui correspond exactement à ce que je veux. J'ai bien compris le principe général, mais je bute sur des points essentiels (ce qui est normal, puisque je me suis mise au CSS il y a 3 jours).
Ma galerie se compose des éléments suivants :
1) 9 vignettes de 80 x 80px en bloc de 3 x 3
2) ces vignettes agrandissent les images par rollover avec une description.
sur le tutorial, les vignettes sont placées à droite, l'agrandissement des images et leurs descriptions à gauche[/b] donc...
Comme je souhaite que les vignettes [b]soient placées à gauche et la description à droite, j'ai simplement changé le container ul, float : right pour float left.
mais c'est avec avec la description que je me retrouve coincée... j'ai beau entrer des valeurs correspondant au nombre de pixels vers la droite, mais rien n'y fait...
j'aurais vraiment besoin de votre aide... je me permets de mettre la feuille de style
PS : par ailleurs, le container est trop grand, mais si je change sa taille, le container li empiète sur les vignettes...
+ ce qui m'échappe c'est que la description soit : tantôt à droite, tantôt à gauche... bon c'est tout pour l'instant
Si qq'un a la patience de regarder ceci et me dire comment faire ce changement, je l'en remercie chaleureusement
source : http://www.cssplay.co.uk/articles/gallery/index.html
en préambule je voudrais signaler que suis absolument débutante en CSS.
Voici ma/mes questions :
J'ai réalisé, avec un tutorial glané, une petite galerie photo avec description des images qui correspond exactement à ce que je veux. J'ai bien compris le principe général, mais je bute sur des points essentiels (ce qui est normal, puisque je me suis mise au CSS il y a 3 jours).
Ma galerie se compose des éléments suivants :
1) 9 vignettes de 80 x 80px en bloc de 3 x 3
2) ces vignettes agrandissent les images par rollover avec une description.
sur le tutorial, les vignettes sont placées à droite, l'agrandissement des images et leurs descriptions à gauche[/b] donc...
Comme je souhaite que les vignettes [b]soient placées à gauche et la description à droite, j'ai simplement changé le container ul, float : right pour float left.
mais c'est avec avec la description que je me retrouve coincée... j'ai beau entrer des valeurs correspondant au nombre de pixels vers la droite, mais rien n'y fait...
j'aurais vraiment besoin de votre aide... je me permets de mettre la feuille de style
<style type="text/css">
/* choose a suitable font and center the #container div in Internet Explorer */
body {text-align:left; font-family: Verdana, Arial, Helvetica, sans-serif; arial, sans-serif; font-size:11px; letter-spacing:0.05em;}
/* The containing box for the gallery. */
#container {position:relative; width:770px; height:396px; margin:20px auto 0 auto; border:1px solid #aaa; background:#fff url(../images/back.jpg) 75px 10px no-repeat;}
/* Removing the list bullets and indentation - add size - and position */
#container ul {width:280px; height:386px; padding:0; margin:5px; list-style-type:none; float:right;}
#container li {float:left;}
/* Remove the images and text from sight */
#container a.gallery span {position:absolute; width:1px; height:1px; top:5px; left:5px; overflow:hidden; background:#fff;}
/* Adding the thumbnail images */
#container a.gallery, #container a.gallery:visited {display:block; color:#000; text-decoration:none; border:1px solid #000; margin:1px 2px 1px 2px; text-align:left; cursor:default;}
#container a.slidea {background:url(p1.jpg); height:80px; width:80px;}
#container a.slideb {background:url(p1.jpg); height:80px; width:80px;}
#container a.slidec {background:url(p1.jpg); height:80px; width:80px;}
#container a.slided {background:url(p1.jpg); height:80px; width:80px;}
#container a.slidee {background:url(p1.jpg); height:80px; width:80px;}
#container a.slidef {background:url(p1.jpg); height:80px; width:80px;}
#container a.slideg {background:url(p1.jpg); height:80px; width:80px;}
#container a.slideh {background:url(p1.jpg); height:80px; width:80px;}
#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:372px; height:372px; top:10px; left:75px; color:#000; background:#fff;}
#container a.gallery:hover img {border:1px solid #fff; float:left; margin-right:5px;}
#container a.slideb:hover img, #container a.slidei:hover img {float:right;}
</style>
</head>
<!--[if lte IE 6]>
<style>
#ads {display:none;}
#adsie {clear:both; text-align:center; width:750px; margin-top:10px;}
</style>
<![endif]-->
<body>
<h2> </h2>
<div id="container">
<ul>
<li><a class="gallery slidea" href="#nogo"><span><img src="p1.jpg" alt="Alpha" title="Alpha" /><br />ALPHA<br />Photographed by Dorota Mrowka, courtesy of the stock.xchng</span></a></li>
<li><a class="gallery slideb" href="#nogo"><span><img src="p3.jpg" alt="Minie" width="240" height="372" title="Minie" /><br />
MINIE<br />Photographed by José Antonio Assis, courtesy of the stock.xchng</span></a></li>
<li><a class="gallery slidec" href="#nogo"><span><img src="p3.jpg" alt="Megan" title="Megan" /><br />MEGAN<br />Photographed by Rob Waterhouse, courtesy of the stock.xchng</span></a></li>
<li><a class="gallery slided" href="#nogo"><span><img src="p3.jpg" alt="Nancy" title="Nancy" /><br />NANCY<br />Photographed by Philip Keller, courtesy of the stock.xchng</span></a></li>
<li><a class="gallery slidee" href="#nogo"><span><img src="p3.jpg" alt="Missy" title="Missy" /><br />MISSY & PANDA<br />Photographed by Kat Shurtz, courtesy of the stock.xchng</span></a></li>
<li><a class="gallery slidef" href="#nogo"><span><img src="p3.jpg" alt="Stray pup" title="Stray pup" /><br />STRAY PUP<br />Photographed by Bethan Hazell, courtesy of the stock.xchng</span></a></li>
<li><a class="gallery slideg" href="#nogo"><span><img src="p10.jpg" alt="Rolo" title="Rolo" /><br />ROLO<br />Photographed by Paul Leach, courtesy of the stock.xchng</span></a></li>
<li><a class="gallery slideh" href="#nogo"><span><img src="p8.jpg" alt="Gigio" title="Gigio" /><br />GIGIO<br />Photographed by Davide Guglielmo, courtesy of the stock.xchng</span></a></li>
<li><a class="gallery slidei" href="#nogo"><span><img src="p9.jpg" alt="Westy pup" title="Westy Pup" /><br />WESTY PUP<br />Photographed by Rob Waterhouse, courtesy of the stock.xchng</span></a></li>
</ul>
</div>PS : par ailleurs, le container est trop grand, mais si je change sa taille, le container li empiète sur les vignettes...
+ ce qui m'échappe c'est que la description soit : tantôt à droite, tantôt à gauche... bon c'est tout pour l'instant
Si qq'un a la patience de regarder ceci et me dire comment faire ce changement, je l'en remercie chaleureusement
source : http://www.cssplay.co.uk/articles/gallery/index.html
