Exercice 7/7

  • Dans le fichier stylesheet.css, attribuez à l'élément "meilleur ami" la bordure 4px solid #CC0000;
  • Cliquez sur soumettre ma réponse pour vérifier vos résultats;

Leçon 7/7

Dans cet exercice, vous allez appliquer un style particulier pour le div qui contient votre meilleur ami.

Note :
Par défaut, les div sont vides dans le fichier index.html. N'oubliez pas de récupérer leur contenu et leur attribut class et id selon ce que vous avez inséré à l'exercice précédent. Un simple copier-coller fera l'affaire.

Commentaires les mieux notés

53 Commentaires

  • maya.hadjali-77

    maya.hadjali-77

    sur cet exercice, je suis bloquée, je ne retrouve pas la réponse

    le 06/11/2021 à 22h47

  • meriam

    meriam Admin

    Bonjour, vous devez corriger le dernier sélecteur par #meilleur_ami { }

    le 08/11/2021 à 00h57

  • meriam

    meriam Admin

    Ajouter la propriété border pour le dernier sélecteur.

    le 08/11/2021 à 00h58

  • florian.v59-23

    florian.v59-23

    Bonjour, pour validez l'exercice il ne faut pas oublier le _ entre meilleur et ami qui sont indiquer dans les guillemets de l'éxercice

    le 14/07/2021 à 15h22

  • meriam

    meriam Admin

    Oui, il faut respecter le nom de l'di demandé par l'énoncé.

    le 20/07/2021 à 00h53

  • iulianaviolettacarare-40

    iulianaviolettacarare-40

    bonjour, je n'arrive pas la validation de l'exercice; mon code ne fonctionne pas pouvez vous me dire l'erreur?

    le 28/04/2021 à 10h43

  • meriam

    meriam Admin

    Bonjour, il vous manque l'accolade fermante du sélecteur .ami { }

    le 28/04/2021 à 11h40

  • ugo.trapuzzano-26

    ugo.trapuzzano-26

    .ami { border: 2px dashed #008000; } #meilleur_ami{ 4px solid #CC0000; } .famille { border: 2px dashed #0000ff; } .travail { border: 2px dashed #ff0000; } mais ca ne fonctionne pas :(

    le 04/11/2020 à 21h54

  • meriam

    meriam Admin

    Bonjour, pour le sélecteur #meilleur_ami, vous devez utiliser la propriété "border" et la valeur "2px dashed #0000ff".

    le 05/11/2020 à 07h56

  • samir_A.

    samir_A.

    Bonjour on aurait pu ajouter text-align : center, parce que visuellement le nom n'est pas centrer

    le 17/06/2020 à 08h22

  • meriam

    meriam Admin

    Bonjour, oui vous pouvez mais essayez d'appliquer uniquement ce qui est demandé par l'énoncé (il s'agit de la correction automatique).

    le 17/06/2020 à 08h28

  • bruno.neumann-34

    bruno.neumann-34

    Mon code à l'air pas mal, je pense obtenir le résultat voulu, mais je ne parviens pas à valider, j'ai vérifier les espaces etc, mais je dois passer à coté de quelque chose ?

    le 24/09/2018 à 10h26

  • meriam

    meriam Admin

    Bonjour, le problème est au niveau du dernier sélecteur, ligne 17 supprimez les : aprés #meilleur_ami, ligne18 il manque une espace entre solid et la couleur de la bordure.

    le 05/10/2018 à 11h34

  • ou.broly-83

    ou.broly-83

    Bonjour, je ne comprends pas le message :"Vérifiez la syntaxe du sélecteur pour l'id "meilleur_ami".

    le 21/07/2018 à 18h46

  • mram

    mram Admin

    Bonjour c'est un id et non une class donc ce n'est pas le point . qu'il faut utiliser devnt son nom dans le CSS ...

    le 01/08/2018 à 01h09

  • mike.jeanphilippe-39

    mike.jeanphilippe-39

    bonjour je ne vois pas mon erreur

    le 15/04/2018 à 10h32

  • mram

    mram Admin

    Bonjour, il manque des guillemets autour des noms de classes dans le HTML.

    le 18/04/2018 à 00h37

  • v.tatu-49

    v.tatu-49

    un petit coup de main svp

    le 27/03/2018 à 19h58

  • mram

    mram Admin

    Bonjour, le sélecteur CSS (.ami > #meillieur_ami) n'était pas bon . En faisant ça vous sélectionner un élément HTML qui a l'id "meilleur_ami" ET qui se trouve dans un autre élément HTML qui a la classe "ami". Or là c'est le même élément HTML qui a les deux.

    le 29/03/2018 à 22h21

  • wilfrid

    wilfrid

    Bonjour, une fois l'exercice fini, le lien vers la partie suivante ne fonctionne pas, ce n'est pas trop génant mais je tenais à vous le signaler (win10/firefox55.0.3), de plus je trouve dommage que durant toute la leçon, on doit à chaque fois réécrire le html alors que le css est mise à jour.

    le 07/10/2017 à 13h22

  • mram

    mram Admin

    Bonjour, faire un copier / coller vous aidera dans ce cas.

    le 08/10/2017 à 20h51

  • Seb

    Seb

    Bonjour. Il me semble que la couleur a indiquer pour cet exercice aurait dû être #00CC00 et non #CC0000, sinon on se retrouve avec un cercle plein rouge pour le meilleur ami tandis que les autres amis sont vert.

    le 04/09/2017 à 08h59

  • mram

    mram Admin

    Bonjour, la couleur a peu d'importance en fait, mais ça pourrait être plus cohérent visuellement pour certaines personnes en effet .

    le 06/09/2017 à 07h23

  • slaouitaibi

    slaouitaibi

    On me dit de vérifier la syntaxe du sélecteur pour l'id "meilleur_ami".. je ne trouve pas mon erreur

    le 18/08/2017 à 11h56

  • mram

    mram Admin

    Bonjour, oui dans le CSS il faut mettre l'accolade "{" sur la même ligne que le sélecteur. Comme vous avez fait pour les autres en fait.

    le 22/08/2017 à 09h01

  • mram

    mram Admin

    Ce n'est pas esthétique mais peu importe, l'important est que vous puissiez valider l'exercice. Si oui, alors vous avez bon.

    le 01/04/2017 à 07h10

  • francois.dreux

    francois.dreux

    Bonjour, Je ne comprends pas ce qui pose problème : depuis le début de la série d'exercices "Trier les propriétés et les Styles de votre CSS", les noms ne sont jamais centrés dans les cercles, et ce, malgré le fait que mon zoom soit à zéro (100%). Pouvez-vous m'aider ? Merci

    le 28/03/2017 à 13h36

  • mram

    mram Admin

    Et oui, on parle d'un id et non d'une class, un id commence avec un "#" or ce n'est pas le cas dans votre code...

    le 21/02/2017 à 22h27

Pour publier un commentaire, vous devez vous connecter.
index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Utiliser le sélecteur "id"</title> </head> <body> <div class="ami">Pierre</div> <div class="travail">Paul</div> <div class="famille">Roberto</div> <div class="famille">Thierry</div> <div class="ami">Marina</div> <div class="famille">Erika</div> <div id="meilleur_ami" class="ami">Toto</div> <div class="travail">Carlos</div> <div class="travail">Suzette</div> </body> </html>
div { display: inline-block; margin-left: 5px; height: 100px; width: 100px; border-radius: 100%; } .ami { border: 2px dashed #008000; } .famille { border: 2px dashed #0000ff; } .travail { border: 2px dashed #ff0000; }
http://localhost:8080