Image en display:inline impossible!
Fermé
pinky-mango
Messages postés
29
Date d'inscription
samedi 5 septembre 2009
Statut
Membre
Dernière intervention
14 octobre 2022
-
28 août 2013 à 02:42
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 30 août 2013 à 12:12
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 30 août 2013 à 12:12
A voir également:
- Image en display:inline impossible!
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Display name traduction ✓ - Forum Mail
- Supprimez les composantes rouge et verte de cette image. quel mot apparaît ? ✓ - Forum Photoshop
- Faststone image viewer - Télécharger - Visionnage & Diaporama
3 réponses
BadGiirlZ
Messages postés
8
Date d'inscription
vendredi 11 mars 2011
Statut
Membre
Dernière intervention
29 août 2013
6
29 août 2013 à 20:58
29 août 2013 à 20:58
Une solution consiste à mettre tes images dans un tableau
Et de jouer avec cellspacing, cellpadding, width, valign, align.
<html> <head> </head> <body> <table width="800" align="center" valign="top" border="0" cellspacing="0" cellpadding="0" > <tr> <td width="200" align="center" valign="top"><img src="ton-image1.jpg"></td> <td width="200" align="center" valign="top"><img src="ton-image2.jpg"></td> <td width="200" align="center" valign="top"><img src="ton-image3.jpg"></td> <td width="200" align="center" valign="top"><img src="ton-image4.jpg"></td> </tr> </table> </body> </html>
Et de jouer avec cellspacing, cellpadding, width, valign, align.
pinky-mango
Messages postés
29
Date d'inscription
samedi 5 septembre 2009
Statut
Membre
Dernière intervention
14 octobre 2022
1
29 août 2013 à 22:51
29 août 2013 à 22:51
Merci beaucoup! Mais je cherchais plus quelque chose dans le css et non les tableaux car ce serais trop long quand j'aurais beaucoup de photos.
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
30 août 2013 à 12:12
30 août 2013 à 12:12
Salut,
Pour aligner les images horizontalement, je te conseil de faire comme ceci :
Ajoute un "float: left" sur la classe ".imagesportfolio"
et supprime le "display:inline" sur la classe ".imagesporfolio div.images"
Enfin pour que ton conteneur s'ajuste à la hauteur de son contenu, ajoute un div avec le style "clear: both" juste avant la balise de fermeture de ton conteneur.
Pour exemple :
Bonne journée
Pour aligner les images horizontalement, je te conseil de faire comme ceci :
Ajoute un "float: left" sur la classe ".imagesportfolio"
.imagesportfolio { float: left; }
et supprime le "display:inline" sur la classe ".imagesporfolio div.images"
Enfin pour que ton conteneur s'ajuste à la hauteur de son contenu, ajoute un div avec le style "clear: both" juste avant la balise de fermeture de ton conteneur.
Pour exemple :
<style>
.imagesporfolio div.images {
height: 150px;
width: 150px;
-webkit-transition:opacity 250ms ease-out;
-moz-transition:opacity 250ms ease-out;
-o-transition:opacity 250ms ease-out;
transition:opacity 250ms ease-out;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
box-shadow:#a3a3a3 1px 1px 5px;
display:inline;
}
.imagesportfolio div.images img {
width: auto;
height: 150px;
margin: 0 auto;
position:relative;
left:-50%;
}
.imagesportfolio img:hover {
opacity: 0.8;
}
.presentation .contact a {
display: block;
font-size: 1.3em;
margin-top: 10px;
margin-bottom: 10px;
text-decoration: none;
color: #292929 !important;
height: 25px;
}
</style>
<div style="border: solid 1px red;">
<div class="imagesporfolio">
<div class="images">
<a href="images/coverfb/coverfb.png"><img src="images/coverfb/coverfb.png" alt="cover facebook 01" /></a>
</div>
</div>
<div class="imagesporfolio">
<div class="images">
<a href="images/coverfb/coverfb1.png"><img src="images/coverfb/coverfb1.png" alt="cover facebook 01" /></a>
</div>
</div>
<div class="imagesporfolio">
<div class="images">
<a href="images/coverfb/coverfb3.png"><img src="images/coverfb/coverfb3.png" alt="cover facebook 01" /></a>
</div>
</div>
<div style="clear: both;"></div>
</div>
Bonne journée