Créer un site tout simple avec lightbox

pierre2503 -  
bonjour,

je viens de me creer un site tout simple d'image en html en utilisant SLIMBOX, qui creer un effet quand on clique sur l'image

https://www.000webhost.com/migrate?static=true

mon soucis c'est que tout n'est pas très bien "rangé" que c'est un peu le désordre...

j'ai besoin de votre aide pour organiser tout cela...

j'aimerais que cela ne dépasse pas 4 images de largeur

est dans la partie "print" j'ai mis pas mal d'images, est il y a donc 5 images de largeur

qu'elle parti de code faut il modifier ?

d'avance merci beaucoup

voici le fichier HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Slimbox 2 example page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/slimbox2.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
<style type="text/css">
body {
background-color: #fff;
font-family: arial, helvetica, sans-serif;
color: #d1d1d1;
}
h1, p {
text-align: center;
}
p {
margin-top: 20px;
}
a {
font-weight: bold;
color: #f00;
}
</style>
</head>
<body>
<h1>Illustrations</h1>
<p>
<a href="music.jpg" rel="lightbox" title="L'arbre a music"><img src="music2.jpg" alt="image"></a>
<a href="crétins.jpg" rel="lightbox" title="Lapin crétin"><img src="crétins2.jpg" alt="image"></a>
<a href="oiseaux.jpg" rel="lightbox" title="petits oiseaux sur un arbre"><img src="oiseaux2.jpg" alt="image"></a>
<a href="vache.jpg" rel="lightbox" title="vache sur un scooter !"><img src="vache2.jpg" alt="image"></a>

</p>
<h1>Print</h1>
<p>
<a href="summer.jpg" rel="lightbox" title="Summer 2009 vintage"><img src="summer2.jpg" alt="image"></a>
<a href="audi.jpg" rel="lightbox" title="audi"><img src="audi2.jpg" alt="image"></a>
<a href="converse.jpg" rel="lightbox" title="affiche converse"><img src="converse2.jpg" alt="image"></a>
<a href="writen.jpg" rel="lightbox" title="WRITEN"><img src="writen2.jpg" alt="image"></a>
<a href="rock.jpg" rel="lightbox" title="affiche festival de rock"><img src="rock2.jpg" alt="image"></a>
<a href="color.jpg" rel="lightbox" title="COLOR"><img src="color2.jpg" alt="image"></a>
<a href="peroquet.jpg" rel="lightbox" title="péroquet"><img src="peroquet2.jpg" alt="image"></a>
<a href="dj.jpg" rel="lightbox" title="D.J"><img src="dj2.jpg" alt="image"></a>
<a href="a.jpg" rel="lightbox" title="A - effet métal"><img src="a2.jpg" alt="image"></a>
<a href="feu.jpg" rel="lightbox" title="liquide doré"><img src="feu2.jpg" alt="image"></a>

</body>
</html>
Configuration: Mac OS X
Safari 532.5

7 réponses

  1.  avion-f16
    Pour n'avoir que 4 images par lignes, il suffit de mettre "<br />" toutes les 4 images ...
    0
    1. pierre2503
      d'accord merci ;) je vais faire sa

      je vous tiens au courant si j'ai d'autres problemes
      0
      1. pierre2503
        merci sa marche

        j'ai un autre probleme, j'aimerais mettre plus d'espace entres chaques images (en se moment 2 millimetres) j'aimerais mettre 1 cm entre chaques images , comment ?

        d'avance merci
        0
        1. pierre2503
          enfaite j'aimerais faire ceci :

          mettre une image juste au dessus des petites vignettes, en gros mettre une image a la place du texte "ILLUSTRATIONS" et "PRINT"

          d'avance merci
          0
          2. avion-f16
            Il faut utiliser du CSS.
            img {
    margin: 5px;
}
            --
            Ton ordinateur ne fait pas ce que tu veux ... mais ce que tu lui dis de faire.
            0
            1. pierre2503
              img {
              margin: 5px;
              }

              on insert/modifie sa ou ? et on insert sa dans le fichier CSS ou dans le fichier HTML ?

              merci
              0