Image en display:inline impossible!
pinky-mango
Messages postés
29
Date d'inscription
Statut
Membre
Dernière intervention
-
Pitet Messages postés 2845 Statut Membre -
Pitet Messages postés 2845 Statut Membre -
Bonjour,
j'ai un jolie code qui fais afficher mes images sur mon site perso mais je suis incapable de les mettres les images une a coté des autres. Elle sont une en dessus de l'autre et c'est pas cela que je veux.
Voilà mon code html pour les images:
Voilà ce que ca donne les images sont une de dessus de l'autre mais je veux qu'elle sois une a coté de l'autre! :
http://img15.hostingpics.net/pics/189044Capturede769cran20130827a768203538.png
J'ai essayer pleins de choses. La seule qui a "marché" est le float:left; sur
http://img15.hostingpics.net/pics/489259Capturede769cran20130827a768203936.png
Merci a ceux qui m'aideront :)
j'ai un jolie code qui fais afficher mes images sur mon site perso mais je suis incapable de les mettres les images une a coté des autres. Elle sont une en dessus de l'autre et c'est pas cela que je veux.
Voilà mon code html pour les images:
<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>
.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;
}
Voilà ce que ca donne les images sont une de dessus de l'autre mais je veux qu'elle sois une a coté de l'autre! :
http://img15.hostingpics.net/pics/189044Capturede769cran20130827a768203538.png
J'ai essayer pleins de choses. La seule qui a "marché" est le float:left; sur
.imagesporfolio div.imagesmais le cadre ou ce trouve les images a perdu sa hauteur et ça donner ceci:
http://img15.hostingpics.net/pics/489259Capturede769cran20130827a768203936.png
Merci a ceux qui m'aideront :)
3 réponses
-
Une solution consiste à mettre tes images dans un tableau
<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. -
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.
-
Salut,
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
