Créer un site tout simple avec lightbox

pierre2503 -  
avion-f16 Messages postés 19255 Date d'inscription   Statut Contributeur Dernière intervention   -
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>
A voir également:

7 réponses

Réponse 1 / 7
avion-f16 Messages postés 19255 Date d'inscription   Statut Contributeur Dernière intervention   4 507
 
Pour n'avoir que 4 images par lignes, il suffit de mettre "<br />" toutes les 4 images ...
0
Réponse 2 / 7
pierre2503
 
d'accord merci ;) je vais faire sa

je vous tiens au courant si j'ai d'autres problemes
0
Réponse 3 / 7
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
Réponse 4 / 7
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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
avion-f16 Messages postés 19255 Date d'inscription   Statut Contributeur Dernière intervention   4 507
 
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
Réponse 6 / 7
pierre2503
 
img {
margin: 5px;
}


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


merci
0
Réponse 7 / 7
avion-f16 Messages postés 19255 Date d'inscription   Statut Contributeur Dernière intervention   4 507
 
Dans le fichier CSS
0