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 restetont 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

  • bot666

    attention on passe de l'exercice 23 au 25 sans passer par le 24. Puis on se retrouve avec un exercice 26/25 haha

  • bary.abdoulaye-49

    Bonjour! je ne comprends pas mon erreur

  • tho.zacca-18

    bonjour, si z-index existe, peut-on utiliser x-index et y-index comme sur un tableau abscisse ordonnees profondeur?

  • bot666

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

4 Commentaires

  • bot666

    bot666

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

    le 27/12/2017 à 15h37

  • mram

    mram Administrateur

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

    le 30/12/2017 à 12h35

index.html
stylesheet.css
<!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>
#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; }