Exercice 24/25

  • Dans le fichier stylesheet.css, ajoutez les propriétés display: inline-block et width: 30% pour le div "menu";
  • Ajoutez également les propriétés display: inline-block et width: 70% (ligne 29) pour le div "body";
  • Cliquez sur soumettre ma réponse pour passer à la suite;

Leçon 24/25

Dans cet exercice, vous allez mettre les div "menu" et "body" côte à côte.

Il y a deux options possibles :

  • la technique float;
  • la technique inline-block;

Ici, vous allez utiliser la deuxième technique. Elle a pour avantage que les éléments HTML resteront dans le flux, donc le div "footer" qui est en-dessous restera à sa place (pas besoin de la propriété clear). Mais elle a aussi des inconvénients que vous allez devoir corriger par la suite.

Commentaires les mieux notés

22 Commentaires

  • eprigent29-42

    eprigent29-42

    je bloque pour cet exo. Voici le code que j'obtiens pour le menu #menu { border: 3px solid #8BC34A; height: 500px; display: inline-block; width: 30%; } Mais ça ne passe pas

    le 07/02/2023 à 14h14

  • Patricio M

    Patricio M Admin

    Dernier code validé de mon coté, très bien!!

    le 07/02/2023 à 17h05

  • hafadam13-11

    hafadam13-11

    bonjour, message d'erreur "Vous devez modifier 4 propriété css de la balise #menu" que dois-je encore ajouter à ce code? #menu{ display: inline-block; width: 30%; } merci

    le 22/10/2022 à 19h38

  • Patricio M

    Patricio M Admin

    C'est bien clair dans la consigne de l'exo

    le 24/10/2022 à 09h06

  • KOROSI

    KOROSI

    Que signifie ce message d'erreur? : Votre script a mis trop de temps à s'exécuter, auriez-vous une boucle infinie ?

    le 23/08/2021 à 14h33

  • meriam

    meriam Admin

    Votre code est correct.

    le 30/08/2021 à 02h56

  • lswebconf-37

    lswebconf-37

    La reponse a ma question est dans l'exercice suivant...

    le 31/03/2021 à 15h48

  • meriam

    meriam Admin

    Bonjour, quel est votre problème?

    le 31/03/2021 à 16h27

  • lswebconf-37

    lswebconf-37

    Meme en lisant la lecon suivante, je ne comprends pas pourquoi ils ne sont pas cote a cote. Ca n'est pas un probleme d'espace ici et comme les blocks sont vides, comment ca pourrait etre un probleme du au pourcentage du contenu ?

    le 24/03/2021 à 13h38

  • meriam

    meriam Admin

    Bonjour, quel est le message affiché par le robot?

    le 25/03/2021 à 16h36

  • bot666

    bot666

    et les body et menu se retrouve l'un en dessus de l'autre et non à coté..

    le 27/12/2017 à 13h37

  • mram

    mram Admin

    Bonjour, c'est normal vous verrez pourquoi à l'exercice suivant.

    le 30/12/2017 à 10h35

Pour publier un commentaire, vous devez vous connecter.
stylesheet.css
index.html
#header, #menu, #body, #footer { position: relative; } span { padding : 1px; } #header { border: 3px solid #2196F3; height: 80px; position: fixed; left: 0; right: 0; z-index: 1; } #header span { background-color: #2196F3; } #menu { border: 3px solid #8BC34A; height: 500px; } #menu span { background-color: #8BC34A; } #body { border: 3px solid #E91E63; height: 500px; } #body span { background-color: #E91E63; color: #ffffff; } #footer { border: 3px solid #673AB7; height: 50px; } #footer span { background-color: #673AB7; color: #ffffff; } .corner1 { position: absolute; top: 0; left: 0; } .corner2 { position: absolute; bottom: 0; right: 0; }
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Rappel 4 sur 5</title> </head> <body> <div id="header"> <span class="corner1">&lt;div id="header"&gt;</span> <span class="corner2">&lt;/div&gt;</span> </div> <div id="menu"> <span class="corner1">&lt;div id="menu"&gt;</span> <span class="corner2">&lt;/div&gt;</span> </div> <div id="body"> <span class="corner1">&lt;div id="body"&gt;</span> <span class="corner2">&lt;/div&gt;</span> </div> <div id="footer"> <span class="corner1">&lt;div id="footer"&gt;</span> <span class="corner2">&lt;/div&gt;</span> </div> </body> </html>
http://localhost:8080