Imprimer la Page

Forum-webmaster

Technique - programmation => HTML / CSS / XHTML => Message commencé par: fenneck le le 02-01-2014 a 15:34:17

Titre: galerie en cours de creation
Posté par: fenneck le le 02-01-2014 a 15:34:17

Bonjour, à toutes et à tous,

Mon problème, j'ai fait 4 petites vignettes et je voudrais rajouté des petites vignettes qui défilent avec des flèches.

Mon 2 ème , que quand je clique sur la petite vignette que la grande s'affiche.

Code HTML:
Code:

<!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" lang="fr">
<head>
<title>galerie photo</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
@import url(galerie.css);
</style>
</head>
<body>
<div id="page">
<div id="galerie">
                  <table class="vignette">
<tr>
<td><a href=""><img src="logo toucan.jpg" alt="Unreal Tournament" /></a></td>
<td><a href=""><img src="logo Game.jpg" alt="Lanfeust de Troy : Hebus" /></a></td>
<td><a href=""><img src="pomme.jpg" alt="Décor héroïc fantasy" /></a></td>
<td><a href=""><img src="pomme.jpg" alt="Les simpsons : le film" /></a></td>
</tr>
</table>
                         <div id="fond">Passez votre souris sur les vignettes pour agrandir les images dans ce cadre</div>

                            <table class="vignette">
<tr>
</tr>
</div>
</div>
</div>
</div>
</body>
</html>

Code CSS:
Code:

body{
font-family: verdana;
background-color: #333;
}

#galerie {
position: relative;
width: 700px;
margin: auto;
}

.vignette {
margin: auto;
}

.vignette a {
display: block;
width: 145px;
height: 112px;
border: solid 3px #999;
}

.vignette a img {
width: 145px;
height: 112px;
border: 0;
}

.vignette a:hover {
border-color: #ccc;
}

#fond{
width: 600px;
height: 250px;
margin: auto;
margin-top: 20px;
padding-top: 200px;
text-align: center;
color: #f60;
border: solid 3px #999;
margin-bottom: 40px;

}

Titre: Re:galerie en cours de creation
Posté par: deadmix le le 17-01-2014 a 19:15:17

Première chose a régler :

@import url(galerie.css);
</style>

Doit être :

<style type="text/css">
@import url("galerie.css");
</style>

Puis peut on voir le contenu de galerie.css !?

Titre: Re:galerie en cours de creation
Posté par: deadmix le le 22-01-2014 a 19:16:36

Voici un tutoriel pour créer facilement une galerie photos :

Galerie Photo Avec Jquery (http://blueseodesign.com/web-design/creer-galerie-photo-avec-jquery/)

Bonne Chance