CSS : Positionnement et mise en page

Préparer l'utilisation d'une grille

Testez gratuitement nos 1304 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Définir la mise en page d'un document est quelque chose de très rapide si vous vous appuyez sur un framework. Une fois la structure HTML prête, il suffit d'ajouter des classes du framework au divers éléments pour les dimensionner et les positionner.
06:54

Transcription

Pour employer le framework bootstrap. Si vous prenez un document html, la première chose à faire ça va être de lier ces trois documents, faites bien attention à l'ordre pensez à mettre le reset d’abord et pas après, sinon il vous classerait toutes vos classes et voud faites les liens directement vers ces documents. Je les ai personnellement placés dans un dossier ici pour pouvoir l'utiliser. Si vous enregistrez le fichier et que vous passez en mode en direct ici, pour essayer de le voir en mode en direct directement, rien ne se passe ici ce n’est que vous n’avez pas la typo d’origine, vous avez simplement le fichier texte qui est intervenu sur la modification de la page ainsi que le reset. Il n’y a plus de marges, il n’y a plus ces éléments-là. Mais aucun élément de formatage ou de mise en page n’a été employé. Donc maintenant ce que je vous propose c’est de le faire. Donc la première chose à faire, c’est de définir dans la balise englobante, la balise globale, le wraper, en gros ici cela pourrait être le div, cela pourrait être également le body suivant le type de construction que vous faites. Il va simplement falloir venir placer une classe ici, et dans sa classe puisque vous avez importé le fichier vous avez accès à toutes ces classes disponibles. N’oubliez pas qu’on a importé un douze ici, donc nous n’avons qu’un conteneur 12 qui est disponible. Donc on va utiliser le conteneur 12 pour travailler dans un mode 12 colonnes. Et puis ensuite on va utiliser, comme par exemple pour le header, on sait que le header si on regarde sur notre fireworks ici il doit contenir douze colonnes, le side 4 colonnes, le main 8 et le footer 10. Alors on va venir directement coder ces éléments-là. Donc, pour le header on va simplement lui ajouter une classe et là on va lui trouver la grid-12 pour dire qu’on utilise une grille de douze. Sur le side on va faire pareil avec une classe et ensuite un grid-4, qui va être posé. Le main en grid 8, vous voyez comme c’est extrêmement simple à utiliser il suffit maintenant de venir faire son marché sur les modes de classe qu’on veut. Alors, ce que l'école on va dire non-sémantique, conteste à cette utilisation, c'est en fait le fait de dire oui mais attention je suis obligé de rajouter des classes qui n’ont pas de sens sémantique à mon html, donc ça vient un peu le polluer. Si je passe en mode en direct, vous voyez que tout a été mis en place directement, vous voyez avec quelle facilité c’est. Si vous voulez mettre le main à gauche et le side à droite rien de plus simple, il suffit de retourner dans le code et de dire eux, ils ne bougent pas ils restent toujours en grid-4, sauf que ce grid-4 je veux faire un push et je veux le pousser de 4. Et donc je vais écrire un push 4 pour dire que je le pousse de 4 par contre le main est toujours à 8 mais je vais faire un pull 4 pour dire attention, lui je le tire de 4. Et si je fais un ctrl + S et que je repasse en mode en direct, vous voyez que je l’ai poussé. En fait j’ai fait une petite erreur puisque le side, je l'ai poussé de 4 et il faut le pousser de 8, en fait pour correspondre à la largeur du main je l'avais laissé ici en 4. Ctrl + S, je repasse en mode en direct, et donc vous voyez que c’est très simple de mettre une colonne à droite ou une colonne à gauche, avec ces éléments-là. Je vais faire du ctrl + Z parce que je veux garder ma navigation ici. Au même stade que push et pull vous avez vu que le footer fait 10 mais qu’il n’est pas placé comme il faut, et je vais mettre un préfixe underscore 1, je vais le préfixer d’une colonne et regardez quand je passe en mode indirect il est poussé de 1 colonne sur le côté, donc il utilise bien le même modèle qui a été présenté sur le template. Maintenant ce qu’il me reste à faire c’est les menus. Alors, ici, au niveau des menus ce qu'on pourrait vouloir, c'est des menus qui utilisent la largeur de chacun des mots, maintenant le choix qui a été fait c’était de dire je souhaite qu’il en fasse 2, donc on va mettre un class ici, et on va mettre un grid-2. Donc, comme la répétition doit être faite sur tous les éléments on pourrait faire un rechercher remplacer, ou les ajouter mais là on n’a pas le principe du non sémantique c’est-à-dire que c’est tous les li qui sont comme ça. Non, il faut qu’on l’ajoute vraiment à chacun de ces éléments. Petite erreur, c'est que, ici, vous voyez que le grid-2 et le grid-6, menu 6 passe à la ligne et en fait n’est pas placé. Et si vous regardez bien, le menu 1 ici a une petite marge de départ de fonctionnement. Alors pour ça on va pouvoir venir dire à notre menu 1 et uniquement à notre menu 1 on va lui rajouter une casse alpha, qui va permettre d’enlever la marge au premier élément, et au dernier élément, car ce n’est pas la peine d'aller visualiser, il y aura une marge à droite, on va lui mettre un oméga, pour lui dire « j’enlève la marge à droite ». Et là si vous regardez maintenant, tous nos éléments se sont bien placés. La seule chose qui nous manque c’est la grille, on n’a pas la grille accès. Rappelez-vous sur les éléments de démo, ici, je vous avais expliqué qu’on pouvait venir récupérer des éléments dans le code source, et bien, ici, dans le code source, si vous venez dans la partie haute du CSS, dans la partie basse vous avez tous ces éléments-là qui peuvent être récupérés. Alors bien entendu il faudra récupérer le fameux col gif ici, vous pouvez copier directement ça, venir dans votre base de CSS, dans le code source vous allez pouvoir rajouter ici un style, et dans ce style il suffit de copier cette partie-là, alors faites bien attention d’avoir le col gif qui va pointer ici. Pensez à rajouter le col 16 et le col 24 on peut les supprimer, on n’en a pas besoin. Au niveau de l’url c’est simplement de le rajouter dans ce dossier, ici. Si vous voulez travailler plus propre vous pouvez enlever directement toutes ces déclarations ici qui ne servent à rien, puisqu’on a que la col 16, vous enregistrez et quand vous passez en mode indirect vous avez votre mode grille qui est présent et qui vous permet d’avoir l’intégralité de ces éléments. Alors si vous voulez vraiment creuser le petit sujet vous vous apercevez que l’image fait une largeur, c’est gruger un peu cette image, une partie transparente. Donc je voulais attirer votre attention sur cette partie-là qui est que si vous regardez dans les modèles de grille ici, la colonne ne fait pas cette partie là. La colonne fait cette partie-là, ici. de là à là, ce n’est pas des marges c’est du padding qui va être à l’intérieur des images, donc vous avez toujours cette récupération et vous n’avez pas la possibilité. Donc vous pouvez avec vos CSS la raccourcir ou supprimer ou interagir avec, mais il y a beaucoup de discussion autour de ce qui concerne l’utilisation des grilles qui va être de définir comment on utilise ou non les parties qui vont séparer chacune de ces colonnes. Et voilà, vous avez vu qu’il est très simple et très facile d’utiliser un framework de grille CSS pour positionner nos pages complètes en les utilisant. Bien entendu, vous allez découvrir des lièvres en creusant un peu ces sujets mais, vous voyez que c’est très rapide et simple et c’est par l’ajout de classe simplement que l’on va pouvoir utiliser l’ensemble de ces framework, que ceux-ci soient responsive, fixes ou statiques, fluides ou basés sur le nombre d’or.

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 !