Discussion :

[lokomass]

Bonjour à tous,

J'ai créé en css une îcone de type grid : https://jsfiddle.net/zuaj77g4
Mais je ne comprend pas pourquoi quand avec Firebug je survol l’élément ".action-news", celui-ci n'est pas exactement au-dessus... Comme l'image ci-dessous... Du coup le clique est décalé...

[NoSmoking]

Bonjour,
pour commencer parlons de la structure

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<span class="action-news">
    <div>
        <span></span><span></span><span></span>
    </div>
    <div>
        <span></span><span></span><span></span>
    </div>
    <div>
        <span></span><span></span><span></span>
    </div>
</span>

celle ci n'est pas conforme, on ne met pas d'élément block (DIV) dans des éléments inline (SPAN).

Parlons du CSS
• pour les DIV il te faut non pas mettre une height:5px mais une line-height:5px.
• pour les SPAN il te faut mettre un vertical-align:top, par défaut ils sont en baseline.

Continuons de parler CSS
• ton motif n'est cependant pas centré dans son conteneur du fait du rajout d'un margin-right:3px sur le dernier SPAN de chaque ligne.
• Tu peux limiter cela en ne mettant un margin-left:3px qu'à partir du 2^éme élément et idem pour le vertical, en ciblant les DIV cette fois, et ainsi ton motif sera centré

Si on résume
• la structure devient

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<span class="action-news">
    <div>
        <span></span><span></span><span></span>
    </div>
    <div>
        <span></span><span></span><span></span>
    </div>
    <div>
        <span></span><span></span><span></span>
    </div>
</span>

• et le CSS

Code :

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
24
25
26
27
.action-news {
  position: absolute;
  padding: 10px;
  left: 50%;
  top: 20px;
  background:#eef;        /* juste pour le voir */
}
.action-news div {
/*  height: 5px;          /* SUPPRIMER */
  line-height: 5px;       /* AJOUT */
/*  margin-bottom: 3px;   /* SUPPRIMER */
}
.action-news div +div {
  margin-top: 3px;        /* AJOUT */
}
.action-news span {
  background: #999;
  display: inline-block;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
/*  margin-right: 3px;     /* SUPPRESSION */
  height: 5px;
  width: 5px;
  vertical-align:top;      /* AJOUT */
}
.action-news span +span {
  margin-left: 3px;
}

Tu aurais également pu réaliser cela en utilisant les pseudo-éléments :before et :after ou encore...