28172 sujets

CSS et mise en forme, CSS3

Css et galerie photo

Bonsoir, j'ai crée sur mon site une galerie photo avec l'aide d'un plugin...

http://alternlassoc.go1.cc/agenda (tout en haut) ...

J'aimerais que les thumbnails s'affichent l'une à côté de l'autre... ou du moins deux par deux... pour ne pas s'étirer en longueur...

Je dois vous avouer que je n'ai aucune idée de comment faire...

Pour les afficher comme elles y sont, j'ai modifié

.txpThumb{
float:left;
}

Mais ça affiche le tout un peu n'importe comment...

Merci de votre aide

Ps : si vous avez besoin de plus d'infos... n'hésitez pas !

Merci à vous
Bonsoir kisscool,

je n'ai pas très bien compris ton problème mais j'ai peut-être une idée à te proposer.

Ne chercherais tu pas à reproduire un positionnement semblable à celui-ci :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Bienvenue sur mon site !</title>
	<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>
<body>
   
		<div id="page">
			<ul class="emplacement_images">
			<li><img src="images/ton_images.extension" width="150" title="Test" alt="Test" /></li>
			<li><img src="images/ton_images.extension" width="150" title="Test" alt="Test" /></li>
			<li><img src="images/ton_images.extension" width="150" title="Test" alt="Test" /></li>
			<li><img src="images/ton_images.extension" width="150" title="Test" alt="Test" /></li>
			</ul>
		</div>
   
</body>
</html>

Ici, j'ai utilisé la propriété width afin de donner la même taille à toutes mes images, libre à toi de l'utiliser ou non.

Voilà pour le XHTML, et maintenant le CSS :


/* CSS by jQz */

ul.emplacement_images {
	padding: 20px 40px;
}

ul.emplacement_images li {
	list-style-type: none;
	display: inline;
	padding: 5px;
}


Test ce code et dis nous si c'est ce que tu cherches à reproduire ou pas.
Modifié par jQz (21 Jul 2009 - 19:17)
ou alors , voir a appliquer un min-height et une marge pour les decoller les uns des autres :
ex:
.txpThumb{
	float:left;
min-height:300px; /* voir pour englober l'image la plus haute de la gallerie */
display:inline;/* corrige un defaut de certaine version de IE */
margin:2px;
}


Le display:inline n'est peut-etre pas approprier , il ne peut en principe pas "contenir"(retenir) des elements de type block. un display:inline-block; serait en principe approprié et etanche Smiley smile .
GC
Modifié par gc-nomade (21 Jul 2009 - 19:52)
Sujet clos
Aller à