Amélioration de galerie d'images

Invité · 02/01/2014, 15h28

Bonjour, à toutes et à tous,

Mon problème je veux des flèches pour faire défiler les petites images et je veux mettre plein de petites images sans qui sorte du cadre du site et qui dépasse pas la longueur de la grande photo.

Mon 2 ème mettre mon logo qu'est en noir, je voudrais qui prenne toute la longueur du site sans déformer le logo

Code HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!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" xml:lang="fr" >
<head>
	<title>LAMY C'reation</title>
	<script type="text/javascript" src="jquery-1.6.2.min.js" ></script>
	<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>	
<body>
 
<div id="banniere">
<center><img src="logolamy.jpg"></center>
 
</div>
 
<ul id="onglet">
<li><a href="Contact.html">Contact</a></li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="Index.html">Accueil</a></li>
</ul>
</div>
<br>
<hr>
<center><h1>Portfolio</h1></center>
 
                <script language="JavaScript" type="text/javascript"> 
function AFFICHE(mon_texte){ 
document.getElementById('resultat').innerHTML ="<img src='" + mon_texte + "'/>"; 
} 
</script>
 
 
<center>
<div class="vignette"><a href="" onmouseover="javascript:AFFICHE('logo toucan.jpg');" onmouseout="javascript:AFFICHE('logo toucan.jpg');"><img src="logo toucan.jpg" alt="Unreal Tournament" /></a></div> 
<div class="vignette"><a href="" onmouseover="javascript:AFFICHE('logo Game.jpg');" onmouseout="javascript:AFFICHE('logo Game.jpg');"><img src="logo Game.jpg" alt="Lanfeust de Troy : Hebus" /></a></div> 
<div class="vignette"><a href="" onmouseover="javascript:AFFICHE('pomme.jpg');" onmouseout="javascript:AFFICHE('pomme.jpg');"><img src="pomme.jpg" alt="Décor héroïc fantasy" /></a></div> 
</center>
 
 
 
<div id="resultat"></div> 
 
<center><img src="logo copyright.jpg"></center>				
 
        </body>
</html>

Code CSS:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
body {
 
margin:auto;
padding:auto;
border:1px solid black;
width:1000px;
height:1099px;
}
#onglet{
margin: 0;
padding: 0;
list-style: none;
}
 
 
 
#onglet li a {
 
float:right;
padding: 5px 20px;
margin-left:2px;
background: black;
color: #fff;
 
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
}
 
}
li {
margin: 0px;
padding:20px;
list-style:none;
float: right;
font-size: 20px;
 
}
 
#banniere img {
margin: 5px;
height:200px;
width: 500px;
background-color:black;
top: 80px;
.vignette { 
margin: auto; 
width:150px; 
height: auto; 
display:inline-block; 
 
} 
 
.vignette img { 
width: 40%; 
height:10%; 
 
}
#resultat { 
margin: 20px auto; 
width:auto; 
height: auto; 
text-align:center;
} 
 
}

**NoSmoking** · 03/01/2014, 18h03

Bonjour,
que n'arrives tu pas à mettre en place ?

Amélioration de galerie d'images

HTML

Discussions similaires

Partager

Partager