Sujet Précédent Sujet Suivant

Probleme d'espacement vertical des images

Fermé
absalone - 24 mars 2012 à 02:21
 ReDLoG - 24 mars 2012 à 11:11
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>



2 réponses

Réponse 1 / 2
Rodolphe_ Messages postés 1498 Date d'inscription samedi 7 mai 2005 Statut Membre Dernière intervention 20 décembre 2014 285
24 mars 2012 à 10:52
en gérant le padding top et bottom de chaque a contenant une img, en fixant une hauteur à chaque a qui seront declarés en display: block 

<a ... class="photo"><img ..../></a>

a.photo {
   display: block;
   height: 125px; /* taille de l'image*/
   padding-top: 10px;
   pading-bottom: 10px;
   

}
0
Réponse 2 / 2
ReDLoG
24 mars 2012 à 11:11
Bonjour,
Normalement, une image comporte des marges horizontales et verticales définies par margin-top, margin-right, margin-bottom et margin-left ou variante si toutes les marges sont identiques avec margin+ta valeur
0

Discussions similaires

calcule nombre des pixels "noir" dans un image (noir/blanc)
neji55 -
nath84150 -

3 réponses
Barre verticale droite sur clavier
k_lou -
Leuide -

41 réponses
le signe " | " dans excel
zed -
Utilisateur anonyme -

4 réponses
Touche du clavier barre verticale
k_lou -
Architecte_300 -

6 réponses
svp faire une barre verticale avec clavier
momomomo13 -
minitoul_290 -

24 réponses