28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de positionnement d'un <aside>

Bonjour à tous !

Je me permets de poser une question qui, sur le fond, a déjà été abordée.
Cependant, de mon coté, ça donne quelque chose que je n'arrive pas a piger.

Le problème initial : J'ai ma section, contenant mes articles (en float left) et mon aside (float right).

Sauf que mon aside vient se positionner en bas, au niveau du dernier article.

Vous pouvez voir le résultat ici

J'ai bien pensé à mettre le <aside> tout en haut des articles, sauf que ça me met une bordure disgracieuse (un :before qui n'est pas censé s'afficher).

Un bug d'affichage ?

Merci à tous et n'hésitez pas à me dire si vous considérez que j'explique très mal mon souci !
Modérateur
Bonjour,

Que ton aside se mettent après le dernier article c'est le comportement normal vu qu'il est après les articles dans le dom comme tu l'as deviné.
Pour éviter ça la solution peut effectivement être de placer le aside juste avant le premier article dans le bloc section (j'ai testé à la volée sous firebug et je ne vois pas de quelle bordure disgracieuse ou bug d'affichage tu veux parler...)
Modérateur
Ah finalement je crois que je viens de voir le "bug" du before. C'est juste une maladresse dans la facon de sélectionner les articles à partir du second ici :
#content section article:first-child::before {
    display: none;
}
#content section article::before {
    background: none repeat scroll 0 0 #fff;
    content: "";
    display: block;
    height: 1px;
    margin: 0 auto 4rem;
    position: relative;
    width: 40%;
}

Je te conseille la lecture de cet article : http://www.alsacreations.com/article/lire/1312-selectionner-les-freres-d-un-element-en-css-nth-child.html
Pour arriver à un truc plus compact et qui ne ciblera que les articles du genre :

#content article + article::before {
    background: none repeat scroll 0 0 #fff;
    content: "";
    display: block;
    height: 1px;
    margin: 0 auto 4rem;
    position: relative;
    width: 40%;
}
Ah mais ouais, c'est parfaitement génial ça tiens. Merci de ton aide !
Un sélecteur dont j'ai carrément oublié l'existence tant je l'utilise peu ... Bien fait pour moi !

Du coup, comme ça, ça passe carrément mieux, en effet :

		article {
			padding: 4rem 2rem 0;
			&+:before {
				display:block;
				content:'';
				position:relative;
				width:40%;
				margin:0rem auto 4rem auto;
				height:1px;
				background: @blanc;
			}			
		}


Autant je comprends l'utilité des "nth-child" pour cibler un élement N, autant, du coup, je me demande à quoi sert le pseudo-élément :first-child, puisque tu peux sélectionner les frères (dont le frère direct) d'un élement avec le selecteur "+" ?

Merci pour tes lumières ! J'ai plus qu'à rebosser mon bouquin "CSS Avancées" Smiley lol
Modérateur
Bah du coup :first-child va cibler le premier élément. Le sélecteur + va cibler le second élément d'un adjacence. Dans un cas comme ça :
<div>
   <p>1</p>
   <p>2</p>
   <p>3</p>
   <p>4</p>
</div>

le code
p:first-child{}

va sélectionner le 1er "p" alors que
p + p{}

va sélectionner les "p" qui suivent un "p" donc le 2eme (qui suis le premier), le 3eme (qui suis le 2eme) et le 4eme (qui suis le 3eme)

:)
Ouais. Logique ouais.
Non mais moi je crois qu'il faut que j'arrête de parler en fait Smiley mur

Merci Laurent Smiley cligne
Sujet clos
Aller à