Exercice 3/7

  • Dans le fichier stylesheet.css, attribuez une hauteur et une largeur de 100px à tous les div;
  • Ajoutez également la propriété border-radius et sa valeur 100%;
  • Ajoutez également une bordure de 2 pixels en trait plein et avec la couleur #000000;
  • Cliquez sur soumettre ma réponse pour vérifier vos résultats;

Leçon 3/7

Vous allez appliquer une mise en forme de base aux div. Vous utiliserez le sélecteur class plus tard afin de distinguer les div selon leur type de contenu (ami, famille ou ennemi).

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

Commentaires les mieux notés

  • farjallah.refka-37

    bonsoir, quand j'appuie sur soumettre: Pas besoin de modifier le fichier index.html, vous ne devez modifier que le fichier stylesheet.css

  • Roy.Shelby01

    div { display: inline-block; margin-left: 5px; height:100px; width:100px; border-radius:100%; border:2px solid #000000; }

  • pizzutoandrea3

    ou est il probleme?

  • pizzutoandrea3

    petite aide..merci

40 Commentaires

  • pizzutoandrea3

    pizzutoandrea3

    ou est il probleme?

    le 07/06/2017 à 15h06

  • pizzutoandrea3

    pizzutoandrea3

    petite aide..merci

    le 07/06/2017 à 15h10

  • mram

    mram Administrateur

    Et oui, ligne 7 c'est la règle "border" et non "block" ...

    le 14/03/2017 à 00h37

  • stephanie_gregori

    stephanie_gregori

    bonjour, help svp, je ne comprends pas mon erreur block: 2px solid #000000; "vérifiez la syntaxe de la règle css pour la bordure., vous devriez avoir 9 éléments html avec la règle css "border: 2px solid #000000"

    le 10/03/2017 à 12h20

  • line.lagarde

    line.lagarde

    Je ne comprends pas mon erreur

    le 05/06/2016 à 16h11

  • riad.hadjer

    riad.hadjer

    c'est ok div { display: inline-block; margin-left: 5px; height:100px; width:100px; border-radius:100%; border:2px solid #000000; }

    le 09/03/2017 à 00h09

  • mram

    mram Administrateur

    Oui c'est le bon code en effet.

    le 21/06/2017 à 10h53

  • line.lagarde

    line.lagarde

    Trouvé!

    le 05/06/2016 à 16h14

  • mram

    mram Administrateur

    Oui en effet, avec les propriétés raccourcies comme "border", pas besoin de préciser "color", juste mettre la valeur.

    le 05/06/2016 à 16h26

  • mram

    mram Administrateur

    Le code CSS à partir de la ligne 11 est inutile.

    le 12/06/2017 à 14h48

  • patricerameaux

    patricerameaux

    bonjour dites-moi ce qui ne va pas, je ne vois pas

    le 28/09/2016 à 10h30

  • mram

    mram Administrateur

    Ligne 7, il manque un zéro à la valeur hexadécimale de la couleur : il faut 6 chiffres ou lettres en système hexadécimal...

    le 01/10/2016 à 13h51

  • malvina.abbas-33

    malvina.abbas-33

    Bonsoir. je ne comprends pas du tout mon erreur. j'ai tout tapé et ç am'a mis: inutile de modiefier le fichier html, uniquement le css. Ensuite j'ai donc supprimé les prénoms et ça me met: Vous ne devez modifier que six propriétés css de la balise div.( je vous passe les autres divers essais que j'ai pu faire); je vous mets mon code. index.html: <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Personnaliser les DIV</title> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>. mon code css:div { display: inline-block; margin-left: 5px; height:100px; width:100px; border-radius:100%; border:2px solid; color: #000000 }

    le 11/03/2019 à 21h39

  • meriam

    meriam Administrateur

    problème au niveau de la ligne 7 border : 2px solid #000000

    le 12/03/2019 à 11h06

  • mehd.naf.56-14

    mehd.naf.56-14

    pk les paragraphes dans les div ne sont pas correctement dans le cercle est il normal

    le 12/08/2018 à 21h57

  • mram

    mram Administrateur

    Oui c'est normal.

    le 17/08/2018 à 05h57

  • kingdom.ch-94

    kingdom.ch-94

    bonjour, il me semble que j'ai fait le bon code, mais ça ne marche pas.....Vérifiez la syntaxe de la règle CSS pour la bordure.,Vous devriez avoir 9 éléments html avec la règle CSS "border: 2px solid #000000".

    le 06/05/2018 à 17h15

  • kingdom.ch-94

    kingdom.ch-94

    c'bon trouvé, c'était un espace....

    le 06/05/2018 à 17h21

  • belespoir38

    belespoir38

    Vérifiez qu'il y a bien 9 éléments <div> qui sont tous enfant direct de <body>. Vous devriez avoir 9 éléments html avec la règle CSS "display: inline-block".,Vous devriez avoir 9 éléments html avec la règle CSS "margin-left: 5px".,Vous devriez avoir 9 éléments html avec la règle CSS "height: 100px".,Vous devriez avoir 9 éléments html avec la règle CSS "width: 100px".,Vous devriez avoir 9 éléments html avec la règle CSS "border-radius: 100%".,Vous devriez avoir 9 éléments html avec la règle CSS "border: 2px solid #000000" Merci pour votre réponse, la validation génère ce message. Tous mes voeux pour 2018

    le 12/01/2018 à 20h11

  • mram

    mram Administrateur

    Bonjour, pas besoin de toucher au sélecteur CSS qu iest déjà mis par défaut. Il faut juste ajouter des propriétés CSS. Et les paragraphes "p" ne sont pas utiles, mettez juste les prénoms.

    le 16/01/2018 à 19h30

  • leon.thom-33

    leon.thom-33

    bonjour,je ne vois pas ou est mon erreur

    le 06/02/2018 à 00h13

  • mram

    mram Administrateur

    Bonjour, le code HTML n'était pas correct. Mettez juste du texte dans les "div".

    le 06/02/2018 à 12h46

  • belespoir38

    belespoir38

    Bonjour, je ne comprends pas ou est mon erreur :"body div { display: inline-block; margin-left: 5px; height: 100px; width: 100px; border-radius: 100%; border: 2px solid #000000; }

    le 08/01/2018 à 09h59

  • mram

    mram Administrateur

    Bonjour, pourquoi ajouter "body" dans le sélecteur CSS ?

    le 12/01/2018 à 01h32

  • alexandrenocosta-14

    alexandrenocosta-14

    je trouve pas mon error

    le 26/10/2018 à 09h15

  • meriam

    meriam Administrateur

    Problème à la ligne 7, laissez espace entre solid et la couleur.

    le 26/10/2018 à 11h28

  • vaco.real3-59

    vaco.real3-59

    Vérifiez la syntaxe de la règle CSS pour la propriété "border-radius".,Vous devriez avoir 9 éléments html avec la règle CSS "border-radius: 100%" je ne comprends pas le soucis

    le 28/04/2018 à 21h20

  • mram

    mram Administrateur

    Bonjour, comme le dit le message d'erreur, il faut mettre 100%, vous avez mis 100px.

    le 04/05/2018 à 06h44

  • nkeshimanabrice-37

    nkeshimanabrice-37

    ok merci

    le 26/10/2018 à 14h10

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Personnaliser les DIV</title> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
div { display: inline-block; margin-left: 5px; }