28172 sujets

CSS et mise en forme, CSS3

[Résolu] Un :nth-child qui prend en compte un h1

Bonjour à toutes et à tous,

en voulant ajouter un h1 à une div qui englobe 3 divs flottantes avec un nth-child(3n+2) pour que toutes les deuxièmes divs de chaque rangée est un margin left et right, cela m'a décaler mon nth-child sur la première div.

J'utilise les nth-child depuis longtemps, mais ce n'est que récemment que j'ai ce problème. A moins que j'oubli quelque chose, je ne voit pas ou est le problème. Merci d'avance pour vos réponses.

Voici la page en question: http://kevinpy.fr/test/float.html

Et également le code:
<html>
	<head>
		<title>Bug float</title>
		<style>

			.clearfix:before, .clearfix:after { content: "."; display: block; height: 0; overflow: hidden; }
			.clearfix:after {clear: both;}
			.clearfix {zoom: 1;}

			body {
				width: 960px;
				margin: auto;
			}

			#global h1 {
				margin-bottom: 5rem;
			}

			.div {
				background: #fff;
				padding: 2rem;
				border: 1px solid #bbb;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				-ms-box-sizing: border-box;
				-o-box-sizing: border-box;
				box-sizing: border-box;
			}

			.third {
				float: left;
				width: 30%;
			}

			.third:nth-child(3n+2) {
				margin: 0 5%;
				background: red;
			}

		</style>
	</head>
	<body>

		<section id="global" class="clearfix">

			<h1>Services</h1>

			<article class="div third"></article>

			<article class="div third"></article>

			<article class="div third"></article>

		</section>

	</body>
</html>

Modifié par nova313 (30 Oct 2012 - 21:36)
Ben voila ^^, merci.

Par contre, je ne vois pas pourquoi il faudrait utilisé cette balise, alors que je défini bien la classe à utilisé.
nth-child renvoie la position de tout les éléments quels qu'ils soient.

donc , si machin:nth-child(n); existe a la position n, alors la règle à machin est applicable.

nth-of-type , ne compte que l’élément auquel la pseudo-class est accolé, en l'occurrence: si article:nth-of-child(n); ne compte que article en ignorant les autres balises.

++
Sujet clos
Aller à