28172 sujets

CSS et mise en forme, CSS3

[ Résolu] Gérer les marges dans une succession d'images

Bonjour,
J'ai un petit souci. Je souhaite me faire un petit portfolio simplissime avec juste une succession d'images de mes travaux. Il y a 4 images par ligne et chaque image fait la même largeur. Normalement, dans la deuxième ligne, chaque image devrait venir se placer en dessous de la précédente, seulement séparée par la marge que j'ai définie (comme la première image de la seconde ligne dans l'aperçu). Mais ça n'est pas le cas des autres :
http://nsa31.casimages.com/img/2012/11/20/121120023613997887.jpg

Voici ma page html (je travaille avec Dreamweaver)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Pompiere' rel='stylesheet' type='text/css'>
</head>

<body>
<div class="contenu">
  <div id="header">IT CAN FLY ?!
  </div>
  <div class="contenubis">
    <img src="images/2.jpg" width="330" />
    <img src="images/aéroport-billet-clubbing.jpg" width="330" />
    <img src="images/affiche-film.jpg" width="330" />
    <img src="images/age-illu2-2.jpg" width="330" />
    <img src="images/culbuto-homme.jpg" width="330" />
    <img src="images/macbeth.jpg" width="330" />
    <img src="images/fille-CD.jpg" width="330" />
    <img src="images/nickel1.jpg" width="330" />
  </div>
</div>


</body>
</html>


Et voici mon css

#header {
	height: 100px;
	width: 850px;
	padding-top: 15px;
	padding-left: 10px;
	font-family: 'Pompiere', cursive;
	color: #666;
	font-size: 33px;
}

body {
	background-color: #000;
	margin: 0;
}

img {
	margin : 4px;
	vertical-align: text-top;
	float: right;
	}

.contenu {
	width: 1380px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.contenubis {
	text-align: center;

}



Auriez vous une idée? Merci par avance Smiley lol
Modifié par Bulledesavon (21 Nov 2012 - 12:51)
Quand tu inspectes le site que tu mentionnes, tu vois qu'ils ont créé 4 div=column. Ça pourrait simplifier ton problème. Smiley smile

Si tu as des difficultés, je peux t'aider.
Modifié par rodolpheb (20 Nov 2012 - 15:51)
Sujet clos
Aller à