Bonjour,
j'ai cree une petite gallerie photo (en chantier), je voulais presenter toutes mes photos en miniatures qui lors d'un clic lancent un slideshow ect ect..
Ca marche bien, mais j'aimerais avoir un espacement vertical entre les images, c'est ok pour l'espacement horizontal, mais j'aimerais que ca soit un peu plus aere.
Et le truc c'est que je ne sais pas comment gerer ca, alors j'ai bien tente une methode certainement peu orthodoxe qui est d'atribuer une certaine taille de police , ca fonctionne mais uniquement sous firefox, auriez vous une idee please?
le site : http://absalone.kegtux.org/trucs/imagesGallery/Portraits.html
le code :
<html>
<head>
<title>MathieuGallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<!--script src="js/jquery.lint.js" type="text/javascript" charset="utf-8"></script-->
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<!-- Save for Web Styles (Mathieu (45)slice2.psd) -->
<style type="text/css">
<!--
body {
background-color: #7C7C7C;
text-align: center
}
#container {
width: 770px;
margin: 0 auto;
text-align: left
}
#Header {
width:915px;
height:124px;
background-image: url(../images/Header.jpg);
position: absolute;
top: 0px;
}
#Menu {
width:915px;
height:47px;
background-image: url(../images/Menu.jpg);
position: absolute;
top: 124px;
text-decoration: none;
}
#MainContent {
width:915px;
height:auto;
background-image: url(../images/MainContent.jpg);
position: absolute;
top: 171px;
background-repeat: no-repeat;
background-color: #FFFFFF;
z-index:1;
font-family: "Courier New", Courier, monospace;
letter-spacing: 35px;
}
a img {
border: none;
}
h1 {
font-family: "Lucida Sans";
font-size: 13px;
font-weight: normal;
text-align: left;
padding-left: 45px;
letter-spacing: 2px;
font-variant: normal;
color: #4E4E4E;
text-decoration: none;
}
h2 {
font-family: "Lucida Sans";
font-size: 9px;
font-weight: normal;
text-align: left;
padding-left: 45px;
letter-spacing: 2px;
font-variant: normal;
color: #030303;
text-decoration: none;
}
h3 {
font-family: "Lucida Sans";
font-size: 9px;
font-weight: normal;
text-align: right;
letter-spacing: 2px;
font-variant: normal;
color: #787878;
text-decoration: none;
padding-right: 12px;
}
h4 {
font-family: "Lucida Sans";
font-size: 13px;
font-weight: normal;
text-align: left;
padding-left: 165px;
letter-spacing: 2px;
font-variant: normal;
color: #4E4E4E;
text-decoration: none;
}
h5 {
font-family: "Courier New", Courier, monospace;
font-size: 16px;
font-weight: bolder;
text-align: left;
padding-left: 108px;
letter-spacing: 2px;
font-variant: normal;
color: #4E4E4E;
text-decoration: none;
}
h6 {
text-align: left;
padding-left: 70px;
letter-spacing: 60px;
line-height: 210px;
\vspace{2cm};
}
a:link {
color: #393939;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #363636;
}
a:hover {
text-decoration: none;
color: #707070;
}
a:active {
text-decoration: none;
color: #363636;
}
body {
background-color: #E8E8E8;
}
#footer {
position:absolute;
width:915px;
height:auto;
z-index:2;
background-color: #FFFFFF;
}
.style5 {
font-family: "Adobe Arabic";
font-size: 24px;
}
.style6 {
font-family: "Adobe Arabic";
font-size: 36px;
}
-->
</style>
<!-- End Save for Web Styles -->
</head>
<!-- Save for Web Slices (Mathieu (45)slice2.psd) -->
<body>
<div id="container">
<div id="Header"> </div>
<div id="Menu">
<h1><a href="../index.html">Home</a> I <a href="../Gallery2.html">Gallery</a> I <a href="../Events.html">Events</a> I<a href="../Aboutme.html"> About me</a><a href="../Aboutme.html"></a> I <a href="../Contact.html">Contact</a></h1>
</div>
<div id="MainContent">
<div id="Content">
<p> </p>
<h5>Portraits</h5>
<p> </p>
<p> </p>
<h4> </h4>
<h6>
<ul class="gallery clearfix">
<p><a href="images/grandformat/lamazarine.jpg" rel="prettyPhoto[gallery1]" title="La Mazarine">
<img src="images/mini/lamazarinemini.jpg" width="120" height="120" alt="Et la le titre" /> </a>
<a href="images/grandformat/lecri.jpg" rel="prettyPhoto[gallery1]" title="C'est le titre encore">
<img src="images/mini/lecrimini.jpg" width="120" height="120" alt="" /></a>
<a href="images/grandformat/fillette.jpg" rel="prettyPhoto[gallery1]">
<img src="images/mini/filletteMini.jpg" width="120" height="120" alt="" /></a>
<a href="images/grandformat/nuque.jpg" rel="prettyPhoto[gallery1]">
<img src="images/mini/nuquemini.jpg" width="120" height="120" alt="" /></a>
<a href="images/grandformat/champs.jpg" rel="prettyPhoto[gallery1]">
<img src="images/mini/champs.jpg" width="120" height="120" alt="" /></a> </p>
<p> </p>
</ul>
</h6>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="Footer">
<table width="915" border="0">
<tr>
<td><h2>Mathieu Copyright genial</h2></td>
<td><h3>Site created by Mathieu</h3></td>
</tr>
</table>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("area[rel^='prettyPhoto']").prettyPhoto();
$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'slow',theme:'light_square',slideshow:3000,autoplay_slideshow: false, social_tools: false});
$(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'slow',slideshow:10000, hideflash: true});
$("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
changepicturecallback: function(){ initialize(); }
});
$("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
changepicturecallback: function(){ _bsap.exec(); }
});
});
</script>
</div>
</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
Afficher la suite
