Bonsoir Isa,
Bon, ce n'est pas grave on s'y remet...
J'ai repris le tuto initiale de Mammouthland, pour essayer de comprendre ce qui n'allait pas...
Je crois qu'on arrive au but, j'ai rajouté un commentaire conditionnel pour IE6 ( juste pour remonter le menu photos qui était trop bas, même sans ce commentaire, la galerie fonctionne sur IE6...en tout cas chez moi
)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>NenesDelMundo.org</title>
<!--[if lte IE 6] >
<style type="text/css">
#menu-photos {background-color:#000; position: relative; height: 25px; margin-top: 0px; color:#fff;}
</style>
<![endif]-->
<style type="text/css">
<!--
body {
background-color:#000;color:#000; font-family: Arial, Verdana, Geneva, sans serif; font-size: medium; line-height: 180%; }
h5 {
color:#888;
font-family: Arial, Verdana, Geneva, sans serif;
font-size: small;
line-height: 180%
}
#navigation {
background-color:#000;
position: relative;
height: 30px;
margin-top: -10px;
}
#menu0 a {display:block; width:72px; height:150px; float:left; background: url(Statue-detoure72-150-logo.jpg) no-repeat; }
#menu1 a {display:block; width:163px; height: 30px; float:left; background: url(bout-qui-on.png) no-repeat;}
#menu2 a {display:block;width:163px; height: 30px; float:left; background: url(bout-interets-on.png) no-repeat;}
#menu3 a {display:block;width:145px; height: 30px; float:left; background: url(bout-actions-on.png) no-repeat; }
#menu4 a {display:block; width:163px; height: 30px; float:left; background: url(bout-aide-on.png) no-repeat;}
#menu5 a {display:block; width:163px; height: 30px; float:left; background: url(bout-photos-on.png) no-repeat;}
#menu1 a:visited, #menu2 a:visited, #menu3 a:visited, #menu4 a:visited, #menu5 a:visited {text-decoration: none;}
#menu1 a:hover { background: url(bout-qui-off.png) no-repeat;}
#menu2 a:hover { background: url(bout-interets-off.png) no-repeat;}
#menu3 a:hover { background: url(bout-actions-off.png) no-repeat;}
#menu4 a:hover { background: url(bout-aide-off.png) no-repeat;}
#menu5 a:hover { background: url(bout-photos-off.png) no-repeat;}
#menu-photos {background-color:#000; position: relative; height: 25px; margin-top: 120px; color:#fff;}
#nav-photos {
background-color:#000; position: relative; height: 35px;}
.texte-menu-photo {
color:#fff;
font-family: Arial, Verdana, Geneva, sans serif;
font-size: x-small; font-weight: 700; text-align: center;margin-top:0;
}
.texte-titre {
color:#fff;
font-family: Arial, Verdana, Geneva, sans serif;
font-size: small; font-weight: 700; text-align: center;
}
#vignette-haut {
border:0; float:left;
}
#centre-diaporama {
background-color:#000;
margin-top: 0px;
float:left;
width: 100%;
}
img {
border:0 }
.thumb {
position:relative;
top:0;
left:0;
}
.thumb a {
margin:0;
text-decoration:none;
}
.thumb a:hover {
background-color:black; /*indispensable, sinon, pas de zoom */
}
.thumb a .grand {
display:block;
position:absolute;
width:0px;
}
.thumb a:hover .grand {
position:absolute;
top:60px;
left:200px;
width:400px;
height:254px;
}
-->
</style>
</head>
<body>
<div id="navigation" >
<div id="menu0"><a href="index.html"></a></div>
<div id="menu1"><a href="qui.html"></a></div>
<div id="menu2"><a href="interets.html"></a></div>
<div id="menu3"><a href="actions.html"></a></div>
<div id="menu4"><a href="aide.html"></a></div>
<div id="menu5"><img src="bout-photos-off.png" alt="bouton photos"></div>
</div>
<div id="menu-photos" >
<!-- <p class="texte-menu-photo">Voyage juin > équipe cubaine > Voyage mars 07 > liste des fichiers images </p> -->
</div>
<div id="nav-photos" >
<div class="texte-titre">
Quelques photos de La Havane
<a href="photos1.html"><img src="fleched.png" alt="fleche droite"> </a>
</div>
</div>
<div id="centre-diaporama">
<div class="thumb">
<a href="#">
<img src="havane01-75.jpg" alt="ambiance">
<img src="havane01-400.jpg" alt="ambiance" class="grand">
</a>
<a href="#">
<img src="havane02-75.jpg" alt="fillettes" >
<img src="havane02-400.jpg" alt="fillettes" class="grand">
</a>
<a href="#">
<img src="havane03-75.jpg" alt="ados">
<img src="havane03-400.jpg" alt="ados" class="grand">
</a>
<a href="#">
<img src="havane04-75.jpg" alt="drapeaux">
<img src="havane04-400.jpg" alt="drapeaux" class="grand">
</a>
<a href="#">
<img src="havane05-75.jpg" alt="enfants de la havane">
<img src="havane05-400.jpg" alt="enfants de la havane" class="grand">
</a>
<a href="#">
<img src="havane06-75.jpg" alt="le port">
<img src="havane06-400.jpg" alt="le port" class="grand">
</a>
<a href="#">
<img src="havane07-75.jpg" alt="piano" >
<img src="havane07-400.jpg" alt="piano" class="grand">
</a>
<a href="#">
<img src="havane08-75.jpg" alt="la rue" >
<img src="havane08-400.jpg" alt="la rue" class="grand" >
</a>
<a href="#">
<img src="havane09-75.jpg" alt="Contrebasse" >
<img src="havane09-400.jpg" alt="Contrebasse" class="grand" >
</a>
<a href="#">
<img src="havane10-75.jpg" alt="Clandestins" >
<img src="havane10-400.jpg" alt="Clandestins" class="grand" >
</a>
</div>
</div>
</body>
</html>
J'espère que cette fois-ci c'est la bonne
Sinon, nous recommencerons
Modifié par 6l20 (15 Nov 2007 - 20:31)
