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.
21 Commentaires
-
sebastienwillems-80
(ma question est généralE :) )le 03/03/2022 à 16h58
-
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 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 Admin
Vous devez utiliser la propriété adéquate pour chaque cas.
le 04/03/2022 à 13h05
-
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 Meriamle 13/07/2021 à 10h26
-
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
je viens de voir votre conseil,mercile 28/04/2021 à 10h03
-
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
il y manque la règle css de la ligne code 4le 21/04/2021 à 08h11
-
meriam Admin
supprimez ce code =clear:both (2ème sélecteur)
le 21/04/2021 à 15h53
-
meriam Admin
supprimez ce code =clear:both (2ème sélecteur)
le 21/04/2021 à 15h53
-
iulianaviolettacarare-40
toujours le même souci car je n'arrive pas a faire le code ligne 4le 21/04/2021 à 08h10
-
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
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 Admin
Bonsoir, normalement vous pouvez voir le résultat dans la partie blanche.
le 30/03/2021 à 22h07
-
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
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 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
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
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
Commentaires les mieux notés