Image en display:inline impossible!

pinky-mango Messages postés 29 Date d'inscription   Statut Membre Dernière intervention   -  
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   -
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 :)
A voir également:

3 réponses

Réponse 1 / 3
BadGiirlZ Messages postés 8 Date d'inscription   Statut Membre Dernière intervention   6
 
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.
0
Réponse 2 / 3
pinky-mango Messages postés 29 Date d'inscription   Statut Membre Dernière intervention   1
 
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.
0
Réponse 3 / 3
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
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
0

Discussions similaires

Caster tv edenwood
Camaleo03 -
CCMBot -

1 réponse
PIX
plart -
jordane45 -

1 réponse
display name ?
nggrosbidou -
Carré -

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

4 réponses
Comment recadrer une image avec Inkscape
infofeet -
TELLIEZ -

13 réponses