Salut,

J'ai quelques problèmes sur le css et le positionnement, voici mon code :

http://jsfiddle.net/9j87yxfh/1/

C'est tout simple : je veux aligner chaque cercle au milieu des autres cercles. Donc le rouge au milieu du jaune qui est lui même au milieu du bleu qui est lui même au milieu de blanc... Pour le bleu, pas de souci, j'ai utilisé du margin, mais pour le reste, quand j'essaye d'augmenter le margin, les trois class se déplacent.

Du coup, comment faire ça proprement et simplement ? Aussi, est-ce que l'utilisation des margin est la meilleure méthode où il existe une autre beaucoup plus simple (comme vertical-align ou je ne sais pas)

Merci beaucoup

Heu première remarque, pourquoi avoir utiliser un 'id' pour le premier cercle, et des 'class' pour les autres cercles ?

Sinon il te suffit de rajouter ceci pour chacun des cercles, excepté le premier:

position: absolute;

Je pensais qu'il était préconisé de mettre un id pour les div "parents" ?

Sinon, merci pour le coup de main!

L'id c'est pour un objet unique alors que les class c'est pour plusieurs objets,quelque chose que tu vas répétés souvent dans la même page, comme par exemple dans un texte long ou tu veux mettre des mots ou des parties en rouges, gras, souligné ou encore des boutons avec toujours le même style.

De toutes façons on recommande de ne plus utiliser d'ID que pour les ancres et les éléments de formulaires (liés au label), ou pour le JS.

Bref, tu as plusieurs façons de faire. Par exemple en positionnement absolu, ou bien, comme dans l'exemple, en utilisant un padding sur le parent plutôt qu'un margin sur l'enfant : http://jsfiddle.net/7haz04Lw/1/