Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

CSS : Positionnement et mise en page

Structurer sans styler en HTML

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Héritées des ancestrales mises en page en tableau contenant de nombreuses imbrications, les structures HTML se trouvent aujourd'hui polluées. Découvrez comment procéder pour épurer l'ensemble.
04:58

Transcription

Alors dans le passé, toute la logique de mise en page se basait donc sur les tableaux. Et si on regarde, par exemple, cette mise en page ici avec un menu vertical, imaginez-vous s’il fallait s’amuser à compter combien il y avait de colonnes pour pouvoir les grouper, histoire de mettre un menu dans cette partie-là, c’était trop compliqué. Donc c’était plus facile d’imbriquer des tableaux, dans des tableaux. C’est encore plus spaghetti, mikado, comme vous voulez vous l'appelez, mais cela devenait une partie de code inextricable. Donc ici on se retrouve, si je regarde bien, avec un premier tableau, ici, qui est le tableau global. Et puis quand j’arrive dans la partie de cette colonne ici, bah si vous regardez, ici, je vais avoir un tableau, je vais rentrer à l’intérieur de ce premier tableau un second tableau ici. Et puis ici je devais mettre des icônes, pourquoi pas, mettre encore un tableau à l’intérieur d’un tableau, vous voyez ici c’était encore chose courante, ici, j'ai encore un tableau, si je viens dans le footer, on est dans un tableau mais à l'intérieur, et on pourrait encore avoir un tableau imbriqué etc, etc. Donc on en finissait plus. Mais cette logique d’imbriquer des conteneurs dans des conteneurs n’a pas été sans mal car aujourd’hui on se retrouve une fois de plus à devoir imbriquer des éléments dans des éléments tout simplement pour faciliter l’application ensuite d'un style visuel. Imaginons par exemple que l’on souhaite représenter ce type d’éléments ici. Ce type d'élément, comment va-t-on le représenter ? Il y a deux approches possibles. La première ça va être l’approche la plus ancestrale basée sur des tableaux, étroitement qualifiée de divit aiguë par la suite. Ici on va revenir donc je vous propose de regarder comment on pourrait faire. Donc déjà à l’intérieur, d’entrée de jeu on va commencer à mettre un wraper, donc je l’appelle menu-wraper pour dire menu entouré, menu encapsulé l’un dans l’autre. Donc on a un premier, gros div, qui va être le menu wraper. Dans ce conteneur, qu'allons-nous placer ? Eh bien, on va placer le menu du conteneur. Alors si je regarde bien ici, c’est quoi le menu du conteneur ? C’est ce menu d’accès ici par exemple. Donc ici on va dire qu’on va avoir un menu container qui va contenir le menu d'accès. Et à l’intérieur de ce menu conteneur on a un menu description qui lui, va contenir quoi ? Une image et deux paragraphes ici. Donc si je regarde bien ici, on a le menu d’accès, une image et deux paragraphes juste en dessous. Tous ces éléments sur la droite c’est un menu de navigation maintenant. Alors, ce menu de navigation on va venir ici fermer notre div et créer une nouvelle div en disant que là j’ai mon menu coquille qui est contenu d'une navigation avec une liste. Tous mes 6 éléments de liste. Donc on enregistre et on passe dans un navigateur avec le CSS qui va bien, donc avant d’aller regarder le CSS, regardons s’il n’existerait pas une autre possibilité. C’est quoi au juste tout ça ? Tout cela ça peut être mon menu de navigation global. Ce menu de navigation je vais l’appeler menu less, rien à voir avec le menu less Sass qu’on verra un peu plus tard au cours de ces étapes mais simplement le menu moins, le menu que je vais appauvrir quelque part. Je vais le résumer simplement à un titre au départ, puis à une image, deux paragraphes, on a bien vu qu’on avait deux paragraphes, ensuite on a un élément de ul qui va contenir tous nos éléments de li et nos six menus ici. Et là si j’enregistre j’ai vraiment structurellement et sémantiquement que la base nécessaire c’est-à-dire de ces éléments, titre, une image, un paragraphe, un paragraphe et une liste. Et le tout c’est mon menu de navigation puisque c’est mon menu d’accès à l’information. Et si j’actualise maintenant dans mon navigateur ici, on se retrouve avec exactement le même menu mais qui est stylé à la même chose et les deux peuvent être réduits, les deux fonctionnent exactement de la même manière, tout en étant structurellement codés différemment. Alors c’est ici au niveau des CSS que l’on va pouvoir venir regarder ce qui se passe, ici on a le menu less et le menu wraper, donc ici, dans la partie basse tout le menu wraper qui style les éléments, mais ce qui nous intéresse le plus c’est le menu less en disant qu’on va pouvoir travailler ici avec tout un certain nombre de propriétés et de valeurs que je vous invite à revenir voir par la suite mais de continuer d'avancer dans les étapes pour voir comment on va pouvoir venir coder tous ces éléments qui seront basés sur une structure différente qui donneront exactement le même rendu et qui auront surtout une structure beaucoup plus proche de la réalité, c’est-à-dire de l’élément conteneur et non pas d’avoir cette divit aigüe qui peut être transmise par l’imbrication de ces tableaux qui était utilisée dans le passé pour mettre en page et en forme nos contenus.

CSS : Positionnement et mise en page

Exploitez le positionnement en CSS et tirez parti des techniques pour mettre en forme votre site. Utilisez la flottaison des éléments, les propriétés de positionnement, etc.

5h01 (55 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :31 août 2016

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 !