18041 sujets

Questions générales et questions de débutants

[Résolu] Plusieurs miniatures cote a cote

Bonjour

Je voudrais mettre plusieurs miniatures (petites images) sur ma page principale, et chaque miniature aura un lien vers une galerie photos.
J'aimerais en mettre 4 cote a cote... Sur plusieurs rangées.
Je voudrais aussi mettre un texte de présentation a coté ou dessous chaque miniature.

Je n'y arrive pas, elles ne sont pas bien alignées, j'ai aussi essayé avec un tableau...

Pouvez vous me donner des conseils svp?
Merci
marc
hello

Tout dépends, mais dans l'idéal, et en simplifiant :

un reset CSS :
*{
margin:0;
padding:0;
}

Ensuite tes images dans un conteneur (div ? ) en float : left;
Pour n'avoir que 4 images par rangée, tu contrôle la largeur de ton conteneur.
saajuck a écrit :

un reset CSS :
*{
margin:0;
padding:0;
}


Ce genre de reset css est très mauvais pour les performances du navigateur (à cause du sélecteur universel).

Pour le problème de notre ami:

		<ul id="liste-galeries">
			<li><a href="/galeries/oiseaux/"><img src="/galeries/images/oiseaux-petit.jpg" alt="galerie des oiseaux"/></a></li>
			<li><a href="/galeries/modeles/"><img src="/galeries/images/modeles-petit.jpg" alt="galerie des modèles"/></a></li>
		</ul>


		a img {
			border: none;
		}
		#liste-galeries, #liste-galeries li {
			margin: 0;
			padding: 0;
		}
		#liste-galeries li {
			float: left;
		}
Patidou a écrit :


Ce genre de reset css est très mauvais pour les performances du navigateur (à cause du sélecteur universel). 



html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
 
}


te semble plus correct ?
Si on élargie ta remarque, de façon générale il vaut mieux avoir les sélecteurs CSS les plus précis possible pour les perf du navigateur ?

@Mabal972, tu as testé nos pistes ?
Modifié par saajuck (28 Aug 2012 - 11:43)
<!DOCTYPE HTML>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Liste des galeries - Mon site à moi</title>
		<!-- activer html5 sur IE<=8  http://code.google.com/p/html5shiv/  -->
		<!--[if lt IE 9]>
		<script src="/js/html5shiv.js"></script>
		<![endif]-->
		<link href="/css/normalise.css" rel="stylesheet">
		<style>
			html {
				background-color: #666;
			}
			body {
				font-family:Arial, Helvetica, sans-serif;
				background-color: #fff;	
				width: 960px;
				margin: 2em auto 1em auto;
			}
			a img {
				border: none;
			}
			#liste-galeries, #liste-galeries li {
				margin: 0;
				padding: 0;
				text-align:center;
			}
			#liste-galeries li {
				float: left;
				width: 200px;
				height: 200px;
				min-height:200px;
				border: 1px #000 solid;
				list-style-type:none;
				list-style:none;
				margin: 3px;
			}
			#liste-galeries  {
				width: 832px;
				margin-left: auto;
				margin-right: auto;
			}
			
			#content footer {
				clear: both;				
			}
	
		</style>
	</head>

	<body>
		<header role="banner">
			<h1>Mon site à moi</h1>
		</header>
		<article id="content" role="main">
			<header>
				<h2>Liste des galeries</h2>
			</header>
			<ul id="liste-galeries">
					<li>
						Oiseaux
						<a href="/galeries/oiseaux/"><img src="/galeries/images/oiseaux-petit.jpg" alt="galerie des oiseaux"/></a>
					</li>
					<li>
						Modèles
						<a href="/galeries/modeles/"><img src="/galeries/images/modeles-petit.jpg" alt="galerie des modèles"/></a>
					</li>
					<li>
						Oiseaux
						<a href="/galeries/oiseaux/"><img src="/galeries/images/oiseaux-petit.jpg" alt="galerie des oiseaux"/></a>
					</li>
					<li>
						Modèles
						<a href="/galeries/modeles/"><img src="/galeries/images/modeles-petit.jpg" alt="galerie des modèles"/></a>
					</li>
					<li>
						Oiseaux
						<a href="/galeries/oiseaux/"><img src="/galeries/images/oiseaux-petit.jpg" alt="galerie des oiseaux"/></a>
					</li>
					<li>
						Modèles
						<a href="/galeries/modeles/"><img src="/galeries/images/modeles-petit.jpg" alt="galerie des modèles"/></a>
					</li>
					<li>
						Oiseaux
						<a href="/galeries/oiseaux/"><img src="/galeries/images/oiseaux-petit.jpg" alt="galerie des oiseaux"/></a>
					</li>
					<li>
						Modèles
						<a href="/galeries/modeles/"><img src="/galeries/images/modeles-petit.jpg" alt="galerie des modèles"/></a>
					</li>
			</ul>
			<footer>
				8 galeries
			</footer>
		</article>
		<footer role="contentinfo">
			Copyright ou Creative Commons
		</footer>
	</body>
</html>

Modifié par Patidou (28 Aug 2012 - 13:35)
Vraiment magique ce forum,
Merci vraiment à tous de votre aide

Merci PATIDOU, ton code est tout simplement parfait...

Bonne journée
Marc
Modifié par Mabal972 (30 Aug 2012 - 18:42)
Patidou a écrit :

je préfère un projet comme normalise.css.

Bonsoir Patidou
Le code que tu m'a donné est tout simplement magique Smiley smile
Mais voila mon nouveau soucis, je viens de refaire tout mon site avec WordPress que je viens de découvrir et ki est franchement très bien pour un débutant...

Seul hic, je ne sais pas comment mettre le code que tu m'as donné; dans une page wordpress?

Je ne sais pas si je peux poser cette question ici? ou si je dois créer un nouveau Post?

Merci encore
marc
Il faut aller voir du côté de wordpress: il existe sûrement des plugins pour gérer des galeries photos et des thèmes libres dont tu peux reprendre le code pour les retravailler. Ils ont une très bonne communauté francophone.
Patidou a écrit :
Il faut aller voir du côté de wordpress: il existe sûrement des plugins pour gérer des galeries photos et des thèmes libres dont tu peux reprendre le code pour les retravailler. Ils ont une très bonne communauté francophone.

Oui j'ai trouvé un forum wordpress en français, je vais leur poser la question.
Merci encore
Marc
Sujet clos
Aller à