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

20 Commentaires

  • sebastienwillems-80

    sebastienwillems-80

    (ma question est généralE :) )

    le 03/03/2022 à 16h58

  • sebastienwillems-80

    sebastienwillems-80

    Bonjour. Ma question est général, exercices sont terminés. Pour quelles raisons utiliser inline-block pour NAV, SECTION et ensuite float pour ARTICLE et ASIDE ? Best practice ou pour s entrainer ? Serait il possible d utiliser que du inline-block ou que du float ?

    le 03/03/2022 à 16h56

  • meriam

    meriam Admin

    Bonjour, pour rendre deux blocs sur la même ligne, vous devez utiliser la propriété display et la valeur :inline-block, pour flotter un élément à gauche ou à droite ou si vous voulez qu'un texte englobe une image ou un élément (vous pouvez utiliser la propriété float avec la valeur correspondante).

    le 04/03/2022 à 13h04

  • meriam

    meriam Admin

    Vous devez utiliser la propriété adéquate pour chaque cas.

    le 04/03/2022 à 13h05

  • socassi777-83

    socassi777-83

    bonjour, j'ai fini les html et css, je vais attendre 1 semaine et tout recommencer pour voir si j'ai retenu. Flex box c'est une alternative aux positionnement ? merci Meriam

    le 13/07/2021 à 10h26

  • meriam

    meriam Admin

    Bonjour, Flex Box a été conçu comme un modèle de disposition unidimentionnel(gérer une seule dimension: une colonne ou une ligne ) et comme une méthode permettant de distribuer l'espace entre objets d'une interface ainsi que les aligner.

    le 14/07/2021 à 10h34

  • iulianaviolettacarare-40

    iulianaviolettacarare-40

    je viens de voir votre conseil,merci

    le 28/04/2021 à 10h03

  • meriam

    meriam Admin

    Je vous prie. N'hésitez pas à poser des questions si vous rencontrerez des problèmes dans les exercices qui suivent.

    le 28/04/2021 à 11h33

  • iulianaviolettacarare-40

    iulianaviolettacarare-40

    il y manque la règle css de la ligne code 4

    le 21/04/2021 à 08h11

  • meriam

    meriam Admin

    supprimez ce code =clear:both (2ème sélecteur)

    le 21/04/2021 à 15h53

  • meriam

    meriam Admin

    supprimez ce code =clear:both (2ème sélecteur)

    le 21/04/2021 à 15h53

  • iulianaviolettacarare-40

    iulianaviolettacarare-40

    toujours le même souci car je n'arrive pas a faire le code ligne 4

    le 21/04/2021 à 08h10

  • meriam

    meriam Admin

    Bonjour, pour le 2ème sélecteur, vous devez supprimer le code suivant ==>=clear:both

    le 21/04/2021 à 15h48

  • Aurélie Gendre

    Aurélie Gendre

    Bonsoir ! Est-ce normal que je ne puisse pas voir les résultats de ma programmation même en cliquant sur http://locahost:8080. Je suis inscrite sur le site. J'ai fait le test en réalisant les exercices sans m'inscrire, et dans ce cas là je vois les résultats. C'est compliqué d'avancer sans visuel de notre programmation. J'avance à l'aveugle.

    le 30/03/2021 à 17h02

  • meriam

    meriam Admin

    Bonsoir, normalement vous pouvez voir le résultat dans la partie blanche.

    le 30/03/2021 à 22h07

  • mram

    mram Admin

    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 à 10h57

  • 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 à 11h07

  • mram

    mram Admin

    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 à 19h41

  • 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 à 10h50

  • 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 à 10h30

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; }