Problème dans un Code HTML

Par Lens Durandisse, il y a 11 ans

Les bases HTML/CSS

Bonjour,

J'ai suivi votre video sur les deux checkbox personnalisables. Je me suis mis à l'oeuvre de les comprendre et les faire aussi de mon côté sans Compass ou Sass ou autre machin du style. J'ai réussi le 1er checkbox. Cependant, lors du 2e j'ai eu un petit problème lors de sa création : "https://www.youtube.com/watch?v=UsBBEE0Njzo#t=710s"

Voici mon code

Partie HTML :

<!DOCTYPE html> <html> <head> <title>Checkbox</title> <meta charset="utf-8"/> <link rel="stylesheet" href="checkbox2.css"> </head> <body> <div> <label for="test" class="checkbox"> <input type="checkbox" id="test" class="checkbox"> <span class="switch"> <span class="on">OUI</span> <span class="mid"></span> <span class="off">NON</span> </span> Hey salut coche cette case ! </label> </div> </body> </html>

Partie CSS :

.checkbox input{ display: none; } .switch{ display: inline-block; width: 130px; } .switch .on, .switch .off { display: inline-block; float: left; background-color: #27ae60; //couleur verte width: 50%; height: 20px; }

Le problème est le suivant : Je voulais styliser le span avec la classe switch et lui donner une largeur de 130px. Je voulais aussi que mes deux span : on et off puisse prendre 50% de la largeur de .switch .Seulement, lorsque j'applique ce code, les deux on et off prennent 50 % d'une largeur inconnue, j'ai mis 400px pour voir et rien n'y fait...

Au plaisir de vous entendre :)

Lens Durandisse

11 réponses

Bakar23, il y a 11 ans

Non, tes 2 éléments spans prendront 50% du width, mais ça ne changera rien à la disposition de leur contenu

Bakar23, il y a 11 ans

Tes 2 spans prennent 50% de la largeur du .switch, rien d'anormal . En gros ils ne dépassent pas les 65px. Tu as beau augmenter la taille du switch ça ne change rien.

Lens Durandisse, il y a 11 ans

C'est justement ce qui est anormal

Si cela prend 50% et que cela donne 65px sur les 130px

Donc si j'augmente le nombre de px dans l'élément parent, le 50% devrait changer non?

green68, il y a 11 ans

Bonjour,

Il manque sans doute le "vertical-align: middle" dans le css du ".switch" ;)

Lens Durandisse, il y a 11 ans

Je vais essayer la réponse de green68, merci pour ta réponse Bakar. Si je suis bien, c'est moi qui doit changer la disposition de leur contenu avec les marges ou position?

Autre question : Ca veut dire quoi content: '' ?

Bakar23, il y a 11 ans

Oui, en gros tu permets à tes spans d'occuper la moitié du width, en suite tu les disposes comme tu veux dans cet espace.

Lens Durandisse, il y a 11 ans

Merci beaucoup d'avoir donné ton temps pour me répondre!

Si je n'abuses de rien, j'aimerais en profiter pour poser une autre question

J'ai cru voir dans des codes CSS, une ligne

around.p {around content: '';around}around
Lens Durandisse, il y a 11 ans

Merci beaucoup d'avoir donné ton temps pour me répondre!

Si je n'abuses de rien, j'aimerais en profiter pour poser une autre question

J'ai cru voir dans des codes CSS, une ligne

p { content: ''; }

Que veut dire content et l'espace vide entre les deux apostrophes?

Bakar23, il y a 11 ans

Le content s'utilise avec les pseudos éléments before et after, et sert principalement à insérer du contenu (url, caractère, etc) avant ou après le sélecteur CSS. Le code que tu indiques est donc erroné.
Par exemple :

h1:before{ content: "Titre:"; }

Affichera "Titre:" avant tous les h1 de la page.

Lens Durandisse, il y a 11 ans

Bon, merci de tes réponses!

Lens Durandisse, il y a 11 ans

J'ai vu votre message Bakar, juste oublié d'y repondre. Merci mille fois!