Image en display:inline impossible!
pinky-mango -  
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: 
<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.images
mais 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

  1. Pitet
    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
    1. pinky-mango Auteur
      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.
      1. BadGiirlZ
        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.

        Discussions similaires

        display name ?
        nggrosbidou

        8 réponses
        Qu'est ce que Nvidia Display Container LS ?
        Senku

        4 réponses
        Retrouver l'image originale d'une photo modifiée
        Raven

        10 réponses