Sujet Précédent Sujet Suivant

Créer un site tout simple avec lightbox

Fermé
pierre2503 - 13 janv. 2010 à 17:51
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 - 13 janv. 2010 à 23:17
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 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 500
13 janv. 2010 à 18:17
Pour n'avoir que 4 images par lignes, il suffit de mettre "<br />" toutes les 4 images ...
0
Réponse 2 / 7
pierre2503
13 janv. 2010 à 18:29
d'accord merci ;) je vais faire sa

je vous tiens au courant si j'ai d'autres problemes
0
Réponse 3 / 7
pierre2503
13 janv. 2010 à 21:52
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
13 janv. 2010 à 22:28
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 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 500
13 janv. 2010 à 23:02
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
13 janv. 2010 à 23:15
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 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 500
13 janv. 2010 à 23:17
Dans le fichier CSS
0

Discussions similaires

créer une adresse gmail pour une autre personne
Emma33000 -
Emma33000 -

2 réponses