Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Utiliser les flexbox

Testez gratuitement nos 1344 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Apprenez à utiliser les flexbox afin d'uniformiser la hauteur des trois colonnes du pied de page. Examinez également les limites actuelles des flexbox dues au manque de support de quelques navigateurs.

Transcription

Dans ce chapitre, nous allons finaliser l'intégration de notre page web, et nous allons apporter quelques améliorations là où c'est possible de le faire. Alors l'une des zones que l'on peut améliorer, c'est le pied de page. Vous voyez que ce pied de page est constitué de trois colonnes, et qu'il y a une ligne verticale qui sépare ces colonnes. Alors ce qui m'embête un peu ici, c'est que ces deux lignes verticales n'ont pas toutes les deux la même hauteur. En fait ces deux lignes ont la hauteur de la colonne à laquelle elles sont liées, et la colonne, sa hauteur dépend du contenu qui se situe à l'intérieur de cette colonne. Or, si je retourne au niveau de ma maquette Photoshop, je vois que le designer ici, a envie que ces deux lignes aient la même hauteur, quelque soit le contenu de la colonne, et la hauteur des colonnes en question. Vous voyez que ce problème affecte le plan de travail du milieu, donc le « desktop narrow » à 1024 pixels, également le plan de travail le plus large, à 1480 pixels par contre, ce problème ne se pose pas ici pour la tablette, puisque là, vous voyez que je n'ai que deux colonnes, donc forcément, je n'ai qu'une seule ligne séparatrice. Alors il s'agit d'un problème récurrent en CSS, et il faut bien avouer que les solutions que nous avons pour le moment, tiennent plus du bricolage que de la solution solide et définitive. Pourtant cette solution solide et définitive, elle existe et elle s'appelle FlexBox. Les FlexBox, c'est tout simplement l'avenir du positionnement et de la mise en page en CSS. Alors avant de vous montrer comment ça fonctionne, je vais me rendre sur internet sur un site que vous connaissez probablement bien, qui s'appelle « can I use.com » et on va poser la question à ce site. « Can I use FlexBox ? » « Puis-je utiliser les FLexbox ? » Donc je vais cliquer ici sur le lien FlexBox, vous voyez que nous sommes pas les seuls à faire cette recherche pour le moment, et là je vois que plusieurs voyants sont au vert, effectivement. donc les FlexBox sont bien supportés par les navigateurs les plus récents. Il reste un gros point noir, c'est évidemment Internet Explorer, qui propose même dans ses versions les plus récentes, ici la version 10 et 11 un support partiel uniquement pour les FlexBox, et puis vous voyez que les versions encore antérieures, donc 6 - 7 - 8 - 9 ici, d'Internet Explorer, ne supportent pas du tout les FLexBox. Donc à vous de décider, si ce support partiel d'Internet Explorer, est une raison valable de ne pas utiliser les FlexBox ou pas, en ce qui me concerne je vais vous montrer comment ça fonctionne. Donc au niveau des FlexBox, elles permettent en fait à des éléments d'avoir la hauteur de leur conteneur. C'est-à-dire d'avoir la hauteur de l'élément qui encadre ses éléments. C'est ça qui m'intéresse ici. Donc mes trois colonnes doivent toutes les trois, avoir la rangée de la hauteur de la rangée dans laquelle elles sont contenues. Donc si je vais voir le code HTML de ce pied de page, de ce footer, et bien je me rends compte que ces trois colonnes sont trois balises section, la première est ici « footerAdress », donc ça c'est la colonne de gauche. La colonne du milieu, c'est une autre section qui s'appelle « footerLegal », et puis la colonne de droite, c'est une dernière section ici, qui s'appelle « footerLanguage » Et vous voyez que ces trois colonnes sont contenues à l'intérieur d'un div, qui a la classe « Row ». Alors je vais me rendre maintenant dans ma feuille de style CSS. Au niveau du point d'arrêt à 1024 pixels, donc je suis bien ici dans mon « media query », et donc voilà l'endroit où je définie ici mon pied de page. Alors je vais m'adresser dans le footer. À l'élément div qui a la classe row, comme ceci. Et je vais lui demander tout simplement, avec « Display : Flex » d'être considéré comme un conteneur Flex. Et donc de facto, les trois sections qui sont à l'intérieur de cet élément, sont considérées comme des « FLex items », comme des éléments Flex, et donc on va aller tout de suite ce que ça donne, donc je sauvegarde ma feuille de style. Je reviens ici au niveau de ma page, je rafraichis. Et vous voyez qu'on y est presque. J'ai juste encore ici un petit problème, avec le séparateur ici, de la première colonne. Je vais faire un clic-droit ici sur cette première colonne, pour aller inspecter ce qui se passe dans la console. Et là, et bien je remarque, je vais descendre un petit peu ici, que cette première colonne, footerAddress, vous voyez ici la petite zone orangée, elle a une marge du bas et cette marge qui empêche le séparateur d'avoir la bonne hauteur. Donc je vais retourner au niveau de ma feuille de style. Je vais m'adresser à cette première colonne qui s'appelle footerAdress, et je vais lui dire tout simplement « marginBottom 0 pixel ». Voilà. On va tester ce que ça donne. et bien voilà, le problème, vous le voyez, est maintenant résolu. Mais deux séparateurs ont la même hauteur, grâce à ces FlexBox et donc nous avons ici un premier problème de résolu.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Passez d’une maquette au format Photoshop vers une page web interactive en HTML5 et CSS. Découvrez des outils et des techniques indispensables dans votre travail d’intégrateur.

3h16 (43 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !