Discussion :

[fredericmarcel]

J'ai dessiné les éléments qui composent la cible.
Je ne sais pas comment les centrer les cercles par taille à l'intérieur du plus grand cercle.

http://jsfiddle.net/fredericmarcel/k9nzowko/13/

Merci de votre aide.

[Invité]

Bonjour,

1/ pour qu'ils se superposent, il faut déjà les définir en position: absolute;.
Le div englobant étant en position: relative;.
puis faire les décalages en fonctions des diamètres top: xxx; left: yyy;.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div class="cible">
  <div class="cercle cercle1"></div>
  <div class="cercle cercle2"></div> 
  <div class="cercle cercle3"></div> 
  <div class="cercle centre"></div>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.cible { position:relative; }
.cercle {
 position:absolute;
 border-radius: 50%;
 background: #00FF00;
 border: 2px solid black;
}
.cercle1 {
 top:0; left:0;
  width:150px; height:150px;
}
.cercle2 {
 top:25px; left:25px;
 width: 100px; height: 100px;
}
.cercle3 {
 top:50px; left:50px;
 width: 50px; height: 50px;
}
.centre {
 top:70px; left:70px;
 width: 10px; height:10px;
}

2/ Qu'on peut encore simplifier :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div class="cible">
  <div></div>
  <div></div> 
  <div></div> 
  <div></div>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.cible { position:relative; }
.cible div {
 position:absolute;
 border-radius: 50%;
 background: #00FF00;
 border: 2px solid black;
}
.cible div:nth-child(1) {
 top:0; left:0; width:150px; height:150px;
}
.cible div:nth-child(2) {
 top:25px; left:25px; width: 100px; height: 100px;
}
.cible div:nth-child(3) {
 top:50px; left:50px; width: 50px; height: 50px;
}
.cible div:nth-child(4) {
 top:70px; left:70px; width: 10px; height:10px;
}

3/ on peut aussi définir les dimensions en pourcentages :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="cible">
  <div></div>
  <div></div> 
  <div></div> 
  <div></div>
  <div></div>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.cible { position:relative; width:150px; height:150px; }
.cible div {
 position:absolute;
 border-radius: 50%;
 background: #00FF00;
 border: 2px solid black;
}
.cible div:nth-child(1) {
 top:0; left:0; width:100%; height:100%;
}
.cible div:nth-child(2) {
 top:12.5%; left:12.5%; width: 75%; height: 75%;
}
.cible div:nth-child(3) {
 top:25%; left:25%; width: 50%; height: 50%;
}
.cible div:nth-child(4) {
 top:37.5%; left:37.5%; width: 25%; height:25%;
}
.cible div:nth-child(5) {
 top:49%; left:49%; width: 2%; height:2%;
}

N.B. j'ai rajouté le rond central

Et si je veux une cible plus grande (ou plus petite), je n'ai qu'à modifier cette ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.cible { position:relative; width:300px; height:300px; }

3/ aleternet les couleurs de fonds ? No problemo :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.cible div:nth-child(even) {
 background: yellow;
}

4/ On peut mêm y placer des flechettes ! http://jsfiddle.net/zybz5u89

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div class="cible">
  <div></div>
  <div></div> 
  <div></div> 
  <div></div>
  <div></div>
  <span style="top:32%; left:71%;"></span>
  <span style="top:56%; left:37%;"></span>
  <span style="top:63%; left:82%;"></span>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.cible span { /* fléchette */
 position:absolute;
 border-radius: 50%;
 background: red;
 border: 2px solid black;
 width: 4%; height:4%;
}

[NoSmoking]

Bonjour,
une autre approche
• Structure imbriquée:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div id="cercle">
  <div>
    <div>
      <div>
      </div>
    </div>
  </div>
</div>

• CSS à développer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
#cercle,
#cercle div {
  width: 13em;
  height: 13em;
  box-sizing: border-box;
  border-radius: 50%;
  padding: .75em;
  border: .75em solid black;
}
#cercle div {    /* reset height et width */
  height:100%;
  width:100%;
}

[fredericmarcel]

Cette cible est presque parfaite :

http://jsfiddle.net/fredericmarcel/cwms8pwp/1/

Est-il possible de

1- colorer le centre en noir ?

2- diminuer le diamètre du centre

2- espacer régulièrement les centres avec un fond vert

J'ai essayé d'insérer une image de la cible que j'utiisais sur flash, mais le téléchargement ne semble pas fonctionner sur mon pc.

[Invité]

Oui.

[fredericmarcel]

C'est vrai

http://jsfiddle.net/fredericmarcel/9f8acjpr/7/