Exercice 9/9

  • Dans le fichier stylesheet.css, ajoutez au sélecteur footer la propriété clear: both;
  • Cliquez sur soumettre ma réponse pour passer à la suite;

Leçon 9/9

Les deux blocs article et aside sont maintenant l'un à côté de l'autre. Mais à cause de la propriété float, ils sont maintenant hors du flux courant. Ils flottent donc à l'intérieur de leur parent section, mais le bloc footer qui se trouve en-dessous de article et aside dans la structure HTML est donc maintenant remonté en haut de son élément parent (section).

Dans cet exercice, vous allez utiliser la propriété clear afin de remettre par défaut le comportement de l'élément auquel elle s'applique (footer). Ainsi il va se positionner comme si les éléments au-dessus étaient restés dans le flux courant.

La valeur de clear à préciser sera both car il faut remettre par défaut à la fois float: left et float: right.

Note :
Après cela vous aurez fini la mise en page d'un layout de base pour un site web. Avec ces exercices vous aurez vu les principes essentiels du positionnement en CSS. Connaître ces astuces est important car il s'agit de la mise en place de la structure visuelle d'un site web.

Commentaires les mieux notés

  • Damien

    Pour quelle raison, positionne-t-on les bloc nav et section avec des inline et les article et aside avec des float ? Y'a une raison fondamentale qui m'a échappée ou c'est par pédagogie pour montrer les différentes façons possible de procéder ?

  • mram Administrateur

    C'est par pédagogie, car il y a en effet plusieurs façon d'arriver à un même résultat en CSS.

  • bruno

    Il y a un truc que je ne comprends pas: le bloc header masque le haut du bloc nav, du bloc section et des blocs article et aside. Visuellement, cela ne va pas.

  • bruno

    et puis il y a un "trou" entre le bas du nav et le haut du footer principal. Donc j'ai rajouté "margin-top:80px;" pour nav et section (cela les colle sous le header) et modifié "height:606px" dans nav (2x25px de padding de section font 50px, + 50px du footer interne, + 2 border interne de 3px chacune font 106px, 500+106=606). Quelqu'un peut me dire si c'est bon ou si j'ai rien compris au schmilblick?

5 Commentaires

  • Damien

    Damien

    Pour quelle raison, positionne-t-on les bloc nav et section avec des inline et les article et aside avec des float ? Y'a une raison fondamentale qui m'a échappée ou c'est par pédagogie pour montrer les différentes façons possible de procéder ?

    le 07/12/2016 à 13h07

  • mram

    mram Administrateur

    C'est par pédagogie, car il y a en effet plusieurs façon d'arriver à un même résultat en CSS.

    le 08/12/2016 à 12h57

  • bruno

    bruno

    Il y a un truc que je ne comprends pas: le bloc header masque le haut du bloc nav, du bloc section et des blocs article et aside. Visuellement, cela ne va pas.

    le 30/07/2016 à 14h30

  • bruno

    bruno

    et puis il y a un "trou" entre le bas du nav et le haut du footer principal. Donc j'ai rajouté "margin-top:80px;" pour nav et section (cela les colle sous le header) et modifié "height:606px" dans nav (2x25px de padding de section font 50px, + 50px du footer interne, + 2 border interne de 3px chacune font 106px, 500+106=606). Quelqu'un peut me dire si c'est bon ou si j'ai rien compris au schmilblick?

    le 30/07/2016 à 14h50

  • mram

    mram Administrateur

    Il ne faut toucher à aucune des propriétés du code css et juste ajouter ce qui est demandé dans les instructions. Le but n'est pas d'avoir un rendu visuel qui va bien, mais comprendre le comportement de positionnement des blocs selon les propriétés css qu'on leur applique.

    le 31/07/2016 à 23h41

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Clear</title> </head> <body> <header> <span class="corner1">&lt;header&gt;</span> <span class="corner2">&lt;/header&gt;</span> </header> <nav> <span class="corner1">&lt;nav&gt;</span> <span class="corner2">&lt;/nav&gt;</span> </nav><!-- --><section> <span class="corner1">&lt;section&gt;</span> <span class="corner2">&lt;/section&gt;</span> <article> <span class="corner1">&lt;article&gt;</span> <span class="corner2">&lt;/article&gt;</span> </article> <aside> <span class="corner1">&lt;aside&gt;</span> <span class="corner2">&lt;/aside&gt;</span> </aside> <footer> <span class="corner1">&lt;footer&gt;</span> <span class="corner2">&lt;/footer&gt;</span> </footer> </section> <footer> <span class="corner1">&lt;footer&gt;</span> <span class="corner2">&lt;/footer&gt;</span> </footer> </body> </html>
body { margin: 0; } header, nav, footer, section, article, aside { position: relative; border: 3px solid #cccccc; box-sizing: border-box; } span { padding : 1px; background-color: #cccccc; } header { border: 3px solid #2196F3; height: 80px; position: fixed; left: 0; right: 0; z-index: 1; } header span { background-color: #2196F3; } nav { border: 3px solid #8BC34A; height: 500px; display: inline-block; width: 20%; vertical-align: top; } nav span { background-color: #8BC34A; } section { border: 3px solid #E91E63; padding: 25px; display: inline-block; width: 80%; vertical-align: top; } section span { background-color: #E91E63; } footer { border: 3px solid #673AB7; height: 50px; /*Ajoutez la propriété nécessaire ici*/ } footer span { background-color: #673AB7; color: #ffffff; } article { border: 3px solid #009688; height: 500px; float: left; width: 50%; } article span { background-color: #009688; } aside { border: 3px solid #FFC107; height: 500px; float: right; width: 50%; } aside span { background-color: #FFC107; } .corner1 { position: absolute; top: 0; left: 0; } .corner2 { position: absolute; bottom: 0; right: 0; }