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

Travailler avec des inline-blocks

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous allez découvrir comment positionner des éléments les uns à côté des autres, sans utiliser les floats CSS.

Transcription

Dans cette vidéo, nous allons terminer la mise en place des boutons de notre site. Alors, le gros problème qu'il nous reste à résoudre avec ces boutons, eh bien, c'est qu'on les veut les uns à côté des autres plutôt que les uns au dessus des autres. Alors, avant de les mettre les uns à côté des autres, eh bien, on va essayer de comprendre pourquoi ils se mettent, par défaut, les uns au dessus des autres, et même ici les uns sur les autres, ce qui est encore pire. Donc pour ça, on va retourner dans le code HTML. Et vous voyez qu'au sein d'un groupe de boutons, eh bien, chaque bouton est défini dans un élément LI. Vous savez que ces éléments LI sont des éléments de niveau bloc. Et vous savez que les éléments block eh bien, par défaut, se mettent les uns au dessus des autres. Pour changer ce comportement, on va devoir s'adresser aux élement LI se trouvant dans les groupes de boutons. Nous allons donc revenir au niveau du CSS, et on va créer un sélecteur pour button group LI, comme ceci. Et je vais demander à ces éléments de s'afficher, non pas comme des block, mais comme des inline block, c'est-à-dire des blocs qui sont côte à côte. Alors, on va voir ce que ça donne dans le navigateur, vous voyez que rien qu'avec ça, les boutons se mettent les uns à côté des autres. J'ai un autre problème qui se pose, vous voyez que là, j'ai un petit interstice entre chacun des boutons, alors ça, c'est très piégeux. Au niveau du code HTML, cet interstice est dû aux espaces que nous avons ici, entre les différents LI, vous voyez la sélection qui est active à l'écran, eh bien ce sont des tas d'espaces, qui séparent, donc, la fin d'un LI du début du LI suivant, eh bien, c'est tous ces espaces qui crééent cet interstice entre les boutons. Pour résoudre problème, je vais parler à mes buttons group, et je vais tout simplement leur donner une Fontsize de 0. Donc, ces espaces seront affichés avec une taille de caractère de 0. Et voilà, le problème est résolu. Il me reste le problème des coins arrondis, vous voyez que pour le moment les coins arrondis se mettent sur chacun des boutons. Or moi, au niveau des groupes de boutons, je veux que ces coins arrondis se mettent au niveau du groupe en entier. Alors, au niveau de ma feuille de style, eh bien, je vais d'abord parler à tous les A qui sont dans les groupes de boutons, puisque vous voyez que les border radius ici, les coins arrondis, se trouvent au niveau des balises A. Donc, dans button-group li a, comme ceci, eh bien, je vais demander d'avoir un border radius de 0. Et donc, vous allez voir au niveau de la feuille de style, que je n'ai plus de coins arrondis sur les boutons qui sont dans un groupe de boutons, par contre, vous voyez que le bouton ici qui est tout seul, lui, il a toujours ses coins arrondis. Maintenant je vais remettre des coins arrondis, mais uniquement au premier et au dernier bouton d'un groupe. Donc pour ça, je reviens ici dans ma feuille de style, je vais prendre presque le même sélecteur qu'ici, donc je vais le sélectionner. Simplement ici, je vais parler au first child, c'est-à-dire au premier des LI, et donc au A qui se trouve dans le premier des LI, comme ceci. Et puis, je vais déjà créer le second sélecteur avec CMD D, pour parler au last child. Et donc, le premier bouton d'un groupe de bouton, eh bien, il a besoin d'un border radius en haut, à gauche, de 5 pixels, en haut à droite de 0 pixel, en bas à droite de 0 pixel, et en bas à gauche, de 5 pixels. Donc ça, c'est pour le first child. Pour le last child, donc le border radius sera de 0 pixel, 5 pixels, 5 pixels, 0 pixel, comme ceci. donc quand je sauvegarde, que je reviens dans le navigateur, et que je rafraîchis ma page, eh bien vous voyez que j'ai bien mes coins arrondis, ici, au niveau du groupe de boutons. Alors ce qu'il me reste à faire maintenant, c'est de placer les boutons du header à droite, et donc à côté de l'image de marque de ma société. Eh bien pour ça, pourquoi ne pas réutiliser la technique du inline block ? Donc, je vas revenir au niveau de ma feuille de style CSS, je vais descendre un petit peu ici, au niveau de mon header. Et je vais demander à mon élément figure de s'afficher comme étant un inline block. Et je vais faire la même chose avec mon élément UL, qui est ici. Je vais demander qu'il s'affiche comme étant un inline block. Et en faisant ça, ces deux block vont se placer côte à côte, comme vous le voyez. Il me reste encore deux problèmes à résoudre, vous voyez que le block ici, eh bien, il n'est pas aligné à droite. Alors ça, c'est très, très facile, je vais simplement dire ici, au niveau d'UL, eh bien, textline = right. Comme ceci. Et puis vous remarquez aussi que quand nous plaçons des éléments, avec la technique des inline block, comme ceci, eh bien, par défaut, l'alignement vertical se trouve vers le bas. Donc je vais devoir modifier cela, en mettant ici, au niveau de la figure, vetical-aline, je vais mettre middle. Et je vais faire la même chose au niveau de l'UL qui se trouve ici, vertical-aline =middle. Quand je rafraîchis ma page, vous voyez maintenant que mes boutons, viennent se placer correctement ici, dans la partie droite de mon en-tête. Et donc en face, vous voyez, au niveau de mon logo, vous voyez que tout ça, bien évidemment, puisque les largeurs sont en pourcent, tout ça est tout à fait réactif, vous le voyez comme ceci. Voilà donc l'en-tête de mon site qui est mis en page.

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 !