Comment mettre 3 image a coté avec leur lien? [Fermé]
Signaler
zt5dsds
tryan44
- Messages postés
- 6
- Date d'inscription
- lundi 20 août 2012
- Statut
- Membre
- Dernière intervention
- 20 août 2012
tryan44
- Messages postés
- 1288
- Date d'inscription
- mardi 24 janvier 2012
- Statut
- Membre
- Dernière intervention
- 26 octobre 2014
A voir également:
- 3 images cote a cote css
- Mettre 3 images cote a cote html - Meilleures réponses
- Mettre 3 images cote a cote html - Forum - Webmaster
- Dans ce document, placez les 2 images côte à côte et donnez-leur la même hauteur. marie a gagné un lot à l’un des trois tirages. ✓ - Forum - Word
- Mettre des images cote a cote css - Forum - HTML
- Mettre cote à cote 3 images ✓ - Forum - Framework .NET
- Css mettre deux images cote à cote - Forum - CSS
10 réponses
zt5dsds
- Messages postés
- 6
- Date d'inscription
- lundi 20 août 2012
- Statut
- Membre
- Dernière intervention
- 20 août 2012
svp
moiced59
- Messages postés
- 1144
- Date d'inscription
- samedi 15 novembre 2008
- Statut
- Membre
- Dernière intervention
- 18 août 2014
J'ai fait ca vite fait :
CSS :
#Photo1{
padding-left : 15%;
display:inline;
}
#Photo2{
display:inline;
padding-left : 30%;
}
#Photo3{
display:inline;
padding-left : 30%;
}
HTML :
<head>
<link rel="stylesheet" href="photo.css" />
</head>
<p align = center ><img src = "sun.jpg" id = "ImageBan" width = 33%>
<img src = "sun.jpg" id = "ImageBan1" width = 33%>
<img src = "sun.jpg" id = "ImageBan2" width = 33%></p>
<div id = "Photo1" >Lien1</div><div id = "Photo2" >Lien2</div><div id = "Photo3" >Lien3</div>
CSS :
#Photo1{
padding-left : 15%;
display:inline;
}
#Photo2{
display:inline;
padding-left : 30%;
}
#Photo3{
display:inline;
padding-left : 30%;
}
HTML :
<head>
<link rel="stylesheet" href="photo.css" />
</head>
<p align = center ><img src = "sun.jpg" id = "ImageBan" width = 33%>
<img src = "sun.jpg" id = "ImageBan1" width = 33%>
<img src = "sun.jpg" id = "ImageBan2" width = 33%></p>
<div id = "Photo1" >Lien1</div><div id = "Photo2" >Lien2</div><div id = "Photo3" >Lien3</div>
tryan44
- Messages postés
- 1288
- Date d'inscription
- mardi 24 janvier 2012
- Statut
- Membre
- Dernière intervention
- 26 octobre 2014
Comme je le disais dans un poste plus haut, utilisez "float"....
Ajustez les dimensions du div en fonction de la taille de vos images.
.photo{
width:90px;
height:120px;
float:left;
border:1px solid black;
margin:5px;
padding:5px;
text-align:center;
}
<div class="photo"><img alt="image" src="image1.jpg"/><br/><a href="#">Lien</a></div> <div class="photo"><img alt="image" src="image2.jpg"/><br/><a href="#">Lien</a></div> <div class="photo"><img alt="image" src="image3.jpg"/><br/><a href="#">Lien</a></div>
Ajustez les dimensions du div en fonction de la taille de vos images.
moiced59
- Messages postés
- 1144
- Date d'inscription
- samedi 15 novembre 2008
- Statut
- Membre
- Dernière intervention
- 18 août 2014
Bonjour
Tes images on une largeur fixe ?
Tes images on une largeur fixe ?
zt5dsds
- Messages postés
- 6
- Date d'inscription
- lundi 20 août 2012
- Statut
- Membre
- Dernière intervention
- 20 août 2012
att je te fit un crokie
zt5dsds
- Messages postés
- 6
- Date d'inscription
- lundi 20 août 2012
- Statut
- Membre
- Dernière intervention
- 20 août 2012
https://www.imagup.com/data-recovery-solutions-for-small-businesses-of-san-francisco/
voilà le cookie en image
voilà le cookie en image
moiced59
- Messages postés
- 1144
- Date d'inscription
- samedi 15 novembre 2008
- Statut
- Membre
- Dernière intervention
- 18 août 2014
le lien ne fonctionne pas
moiced59
- Messages postés
- 1144
- Date d'inscription
- samedi 15 novembre 2008
- Statut
- Membre
- Dernière intervention
- 18 août 2014
La largeur des images varie ou pas ?
zt5dsds
- Messages postés
- 6
- Date d'inscription
- lundi 20 août 2012
- Statut
- Membre
- Dernière intervention
- 20 août 2012
voilà
tryan44
- Messages postés
- 1288
- Date d'inscription
- mardi 24 janvier 2012
- Statut
- Membre
- Dernière intervention
- 26 octobre 2014
Salut,
Il faut juste créer un "div" utilisant une class CSS comportant entre autre un "float:left;". Vous placez l'image dans ce "div" avec un retour à la ligne pour le lien. Selon les dimensions données au "div", ils s'aligneront les un à la suite des autres.
Il faut juste créer un "div" utilisant une class CSS comportant entre autre un "float:left;". Vous placez l'image dans ce "div" avec un retour à la ligne pour le lien. Selon les dimensions données au "div", ils s'aligneront les un à la suite des autres.
