18041 sujets

Questions générales et questions de débutants

Adapter galerie photos css

Je viens de trouver mon bonheur, une galerie en css simple, néanmoins je souhaite qu'une image de fond soir affichée à droite des vignettes des l' ouverture de la page, j'ai "trituré le code" mais sans résultat ...!
Si vous avez une idée ? Merci

Page essai : http://www.larressore.net/dp2/slides.htm

Code css :
<style type="text/css">
.photo {padding:20px; background:#222; width:600px; height:330px; text-align:left;}
.photo h1 {font-size:14px; font-weight:normal; color:#fc0; margin:0 0 0 5px; padding:0;}
.photo ul {list-style:none; padding:0; margin:0; width:216px; background:#333; border:1px solid #666; position:relative; height:144px;}
.photo ul li {display:inline; width:24px; height:24px; float:left; margin:6px;}
.photo ul li a {display:block; width:24px; height:24px; cursor:default; background:url(pics/arrow.gif) no-repeat; text-decoration:none;}
.photo ul li a b {display:none;}
.photo ul li a img {display:block; width:22px; height:22px; border:1px solid #666; border-top-color:#ccc;}

.photo ul li a:hover {white-space:normal;position:relative;}

.photo ul li a.vert:hover img {position:absolute; left:-12px; top:-20px; width:48px; height:64px; border-color:#fc0;}
.photo ul li a.hor:hover img {position:absolute; left:-20px; top:-12px; width:64px; height:48px; border-color:#fc0;}

.photo ul li a:active, .photo ul li a:focus {position:static; outline:0;}

.photo ul li a:focus.vert img, .photo ul li a:active.vert img {background-color:#000; position:absolute; left:260px; top:0; width:240px; height:320px; border:1px solid #fc0; padding:5px 45px;}
.photo ul li a:focus.hor img, .photo ul li a:active.hor img {background-color:#000;position:absolute; left:260px; top:0; width:320px; height:240px; border:1px solid #fc0; padding:45px 5px;}
.photo ul li a:focus b, .photo ul li a:active b {display:block; position:absolute; width:204px; height:150px; border:1px solid #666; top:165px; left:0; color:#ddd; font-weight:normal; padding:6px;}
</style>


Code html :
<div class="photo">
<ul>
<li><a href="#nogo1" class="hor"><img src="slides_fichiers/pic_1h.jpg" alt="" title=""><b>essai<br> 200 €<br>07/08/04 Cambo les bains</b></a></li>
<li><a href="#nogo2" class="vert"><img src="slides_fichiers/pic_1v.jpg" alt="" title=""><b>Model</b></a></li>
<li><a href="#nogo" class="hor"><img src="slides_fichiers/pic_2h.jpg" alt="" title=""><b>A fly</b></a></li>
<li><a href="#nogo" class="vert"><img src="slides_fichiers/pic_2v.jpg" alt="" title=""><b>An eagle</b></a></li>
<li><a href="#nogo" class="hor"><img src="slides_fichiers/pic_3h.jpg" alt="" title=""><b>Tubes of paint</b></a></li>
<li><a href="#nogo" class="vert"><img src="slides_fichiers/pic_3v.jpg" alt="" title=""><b>Flowers on a table</b></a></li>
<li><a href="#nogo" class="hor"><img src="slides_fichiers/pic_4h.jpg" alt="" title=""><b>A clown</b></a></li>
<li><a href="#nogo" class="vert"><img src="slides_fichiers/pic_4v.jpg" alt="" title=""><b>Painted lady</b></a></li>
<li><a href="#nogo" class="hor"><img src="slides_fichiers/pic_5h.jpg" alt="" title=""><b>Boat on a river</b></a></li>
<li><a href="#nogo" class="vert"><img src="slides_fichiers/pic_5v.jpg" alt="" title=""><b>Underneath the arches</b></a></li>
</ul>
<h1>Agnes DP </h1>
</div>

Modifié par africa (20 Jun 2007 - 16:54)
Sujet clos
Aller à