Problème positionnement

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Hello,

je suis en train de mettre au propre tous les css que j'utilise depuis plusieurs années et je me retrouve avec un problème d'alignement que je n'arrive pas à résoudre. En image :

Image utilisateur

Comme vous le voyez la puce de la checkbox est parfaitement aligné, ce qui n'est pas le cas des boutons radio.

Voici le css concerné :

 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
28
29
30
31
32
33
34
35
input[type="checkbox"],
input[type="radio"]
    display none

input[type="checkbox"] + label:before
    background-color #fff
    border 1px solid form-input-textarea-border-color
    content ""
    display inline-block
    width 1.35em
    height 1.25em
    vertical-align middle
    margin -2px 6px 0 0
    font-size .75em
    line-height 1.25em
    text-align center

input[type="radio"] + label:before
    background-color #fff
    border 1px solid form-input-textarea-border-color
    border-radius 1.25em
    content ""
    display inline-block
    width .6em
    height .6em
    margin -2px 6px 0 0
    font-size 1.65em
    line-height .6em
    text-align center

input[type="checkbox"]:checked + label:before
    content "\2713"

input[type="radio"]:checked + label:before
    content "\2022"

Une idée ?

Édité par #VK

Auteur du sujet

Euh j'utilise Stylus et donc il n'y a ni accolade, ni double point, ni point virgule etc …

À quoi correspond vertical-align: baseline; ?

EDIT; je viens de regarder ton lien, en fait tu n'as pas compris le problème, mon alignement c'est pas avec le texte mais le petit bouton noir qui indique que le bouton est selectionné

Édité par #VK

Salut,
Le décalage vient de la "div.fields-group" qui a un "margin-bottom: 1.45em;" définit à la ligne 623 du fichier "cow.css".

Astuce : utilise les outils de développement de ton navigateur. Sur Firefox tu peux faire clique droit sur un élément puis "Inspect Element". (il doit y avoir la même chose sur les autres navigateurs)

+0 -0
Auteur du sujet
1
2
3
4
5
  width: 0.7em;
  height: 0.7em;
  margin: -2px 6px 0 0;
  font-size: 1.65em;
  line-height: 0.6em;

Ca fait la même chose sous FF

Pour le fond d'écran, j'avais déjà lu ça quelque part, j'avais bien aimé :)

MaxK

ça ne change rien, par contre je viens de remarquer que quand mon radio est check le label (qui dessine le radio button) remonte (cf le screen) du coup c'est encore plus incompréhensible :s

Image utilisateur

Sous FF : Radio

CSS :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
form .fields-group input[type="radio"] + label:before {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 1.25em;
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin: -2px 6px 0 0;
  font-size: 1.65em;
  line-height: 0.6em;
  text-align: center;
}

Je n'ai modifié que le width et height.

Cette réponse a aidé l'auteur du sujet

Alors, effectivement on s'était mal compris ^^

Pour le décalage entre le point et la bordure grise, il faut que tu joues sur le "line-height" (0.5 em, par exemple rend mieux).
Pour le décalage quand ton radio est cliqué, cela vient du fait que le navigateur ne réagit pas de la même façon quand il y a du texte et quand il n'y en a pas (le texte prend de la place et "pousse" le reste). Pour régler cela, tu peux mettre ton caractère "\2022" tout le temps et changer sa couleur de "transparent" vers "black" quand le label est cliqué ;)

+3 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte