In order to fulfill the basic functions of our service, the user hereby agrees to allow Xiaomi to collect, process and use personal information which shall include but not be limited to written threads, pictures, comments, replies in the Mi Community, and relevant data types listed in Xiaomi's Private Policy. By selecting "Agree", you agree to Xiaomi's Private Policy and Content Policy .
Agree

Jeux/Détente

[Détente] [JeudiProg] [Web] Cours 4 : Le positionnement en CSS (Gagnez une médaille)

2020-09-10 22:59:30
830 27
Bonjour à tous,

En préambule, je tiens encore une fois à remercier @Slicck d'avoir écrit et publié le précédent cours d'introduction au CSS. Il est d'ailleurs bien dommage qu'il ne soit pas disponible pour écrire ce cours qui tend un peu plus vers la ''bidouille'' que de l'informatique précise, ce que j'apprécie moins, mais on va s'y atteler !

Avant de débuter, si vous avez manqué ce précédent cours ou bien d'autres avant, commencez par ceux-ci et revenez ici ensuite :

Cours 1 : Ma première page HTMLConsulter
Cours 2 : Balises et attributs - Tableaux, images et liensConsulter
Cours 3 : Et si l'on démarrait un blog Xiaomi ?Consulter
Cours 3bis : Introduction au CSSConsulter
Cours 4 : Le positionnement en CSSConsulter
Cours 5 : Un peu d’interaction avec JavaScriptConsulter
Cours 6 : Simplifier la gestion des articles avec PHPConsulter
Cours 6bis : Terminons ce blogConsulter





Attention :
Du fait des limitations actuelles la communauté, il n'est pas toujours possible d'afficher un code correct, c'est pourquoi je vous fournis ce fichier ZIP contenant l'ensemble des codes de ce cours.

Cours 4.zip (2.05 KB, Downloads: 5)





Rappel de l'objectif

Actuellement, nous en sommes à une présentation très sommaire que vous avez peut être enrichie de couleurs et transformations diverses lors du précédent cours, mais cela doit ressembler à peu près à ça.




Et nous voulons arriver à une structure de ce type.


On va donc devoir indiquer aux navigateurs internet où l'on veut que nos différents éléments soient placés.




Structure d'un bloc

Que ce soit header, main, aside ou footer, chacune de ces parties est un bloc, un élément de notre page. Sur ces éléments on va pouvoir ''jouer'' avec différents attributs CSS dont voici les 3 principaux.



  • margin désigne l'espacement entre le bloc et l'extérieur ;
  • border désigne la bordure de notre bloc ;
  • et padding désigne l'espacement entre le bloc et son contenu interne.


L'attribut margin peut être décomposé en quatres attributs : margin-top, margin-right, margin-bottom et margin-left, respectivement pour l'espacement au dessus, à droite, en bas et à gauche. Il en est exactement de même pour les deux autres attributs et on pourra donc retrouver du border-left ou du padding-bottom.




Les dimensions

Mais alors quelles valeurs donner à ces attributs ? On va pouvoir donner des tailles fixes, exprimées en pixels (px), par exemple :
margin-top: 10px;
margin-bottom: 10px;
border-right: 1px;
padding-left: 5px;

Mais on a aussi la possibilité d'exprimer des tailles relatives :
  • soit par rapport à la taille de la police d'écriture, on va alors utiliser les em ;
  • soit par rapport à la taille de notre écran, on va alors utiliser des pourcentages %.
margin-top: 1%;
margin-bottom: 1%;
border-right: 1em;
padding-left: 2em;

Personnellement, je continuerais avec des tailles relatives (à quelques exceptions près) ... Pourquoi ? Il faut savoir que l'on aura jamais 100% des utilisateurs de notre site qui auront exactement la même configuration (ordinateur, navigateur, configuration du navigateur, configuration d'accessibilité, ...). Chacun a sa police préférée prédéfini, les mal-voyants disposent d'agrandisseur de texte et donc il serait dommage de leur imposer une taille fixe qu'il ne leur serait pas possible de lire.

Je pense que vous commencez à voir que c'est un point important qui va nous permettre de différencier un bon développeur web, d'un moins bon ... Mais si vous souhaitez continuer avec des pixels, pas de soucis, vous n'êtes pas des développeurs web et l'intérêt de ce cours est juste de comprendre les mécanismes de ces langages web.




Pour aller un peu plus loin - Différentes synthaxes

Si l'on a pas envie de décomposer en 4 attributs chacun de nos attributs on va pouvoir utiliser les différents ''raccourcis'' qui existent. Prenons l'exemple de margin, ce sera exactement la même chose pour padding :
margin: 1em;

Très simple, un espace d'1em sera appliqué dans les 4 directions. Petit rappel d'anglais : top (haut), right (droite), bottom (bas), left (gauche).
margin: 5% 0;

Un espace de 5% pour top et bottom. Et un espace de 0 ou plutôt pas d'espace à droite et à gauche. Vous remarquez que pour 0 il n'est pas utile de préciser l'unité puisque 0 c'est toujours 0.
margin: 1em 5em 2em;

Un peu plus compliquée, on va avoir un espace d'1em top, 2em bottom et 5em right et left !
margin: 1% 5% 2em 0;

Finalement, un espacement différent pour chacun des 4 côtés. Il suffit alors de retenir l'ordre : top, right, bottom, left. C'est donc l'équivalent de :
margin-top: 1%;
margin-right: 5%;
margin-bottom: 2em;
margin-left: 0;

Vous voyez également qu'on peut mélanger les différentes unités, aucun problème pour nos navigateurs.

Passons maintenant à border, la synthaxe est un peu différente car on peut rajouter des options à notre bordure : son épaisseur, son style et sa couleur. Ainsi on pourrait avoir :
border: 1px solid white;

Tout simplement une bordure d'1 pixel pleine et blanche ! Les couleurs vous avez vu cela dans le cours précédent, pour les styles de bordure, vous avez le choix entre toutes les valeurs suivantes, je vous laisse les essayer : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset.




Et si on s'attaquait à notre blog ?

On commence encore avec un petit point de théorie. Comme je vous le disais, chaque configuration est différente et selon les navigateurs, certaines balises HTML ont déjà des espacements pré-définis, et ce n'est partout les même, donc on va démarrer notre feuille de styles CSS avec une initialisation de tous les espacements à 0. Et il faudra donc les régler pour chacune de nos balises.
body, *, html
{
   padding: 0;
   margin: 0;
}

Je m'attaque alors maintenant à notre en-tête - header. J'ai envie d'un bandeau qui prendra toute la largeur et de couleur orange, voici donc les instructions utilisées :
header
{
   width: 100%;
   background: darkorange;
   color: white;
}

Une largeur (width) de 100%, un fond (background) de couleur orange foncée. Et, toujours pour des questions d'accessibilité, il est conseillé dès qu'on utilise fond (background) de préciser également une couleur (color) et vice-versa. Je choisis donc un texte en blanc.

On poursuit donc la personnalisation des éléments qui se trouvent à l'intérieur de nos en-têtes. J'ai d'abord mon titre qui est dans la balise ''h1'', j'ai tout simplement envie qu'il soit centré en haut de ma page.
h1
{
   margin: 0 auto;
   text-align: center;
}

J'utilise donc l'instruction text-align pour dire que je veux un texte centré mais text-align ne suffit pas à centrer sur l'intégralité de la page car mon bloc ''h1'' a uniquement la taille du texte qui est à l'intérieur. Il faut donc que je centre mon bloc et cela se fait grâce à une instruction margin. Je vous l'ai caché dans l'instruction mais pour les margin-left et margin-right, on peut également utiliser la valeur auto qui va nous être définie par le navigateur et permettre de centrer notre bloc. Le 0 est présent ici uniquement pour indiquer.

Continuons avec notre menu, il y a quand même très peu de sites qui utilisent une liste non ordonnée comme menu principal, on va quand même préférer quelque chose d'un peu plus moderne avec les liens sur une même ligne.
header ul
{
   list-style: none;
   display: block;
   text-align: center;
}

header ul li
{
   display: inline-block;
   text-align: center;
   padding: 1em;
   text-transform: uppercase;
}

Déjà pourquoi préciser ''header ul'' plutôt que simplement ''ul'' ? N'utiliser que ''ul'' tout seul appliquerait les instructions à toutes les listes non ordonnée de ma page mais j'ai tout de même envie de pouvoir utiliser des listes dans mes articles. Je rajoute donc ''header'' au sélecteur pour dire que ces instructions ne s'appliquent uniquement aux listes non ordonnées à l'intérieur de la balise ''header''. Aucun problème donc pour nos articles qui ne sont pas dans cette balise.

Ainsi, je commence à préciser que je ne veux pas les petits points à côté de chaque item de mon menu :
list-style: none;

Puis je précise que je veux que ma liste soit un bloc centré dans la page, j'utilise donc les instructions suivantes :
display: block;
text-align: center;

Enfin, nous devons personnaliser les items et préciser que dans notre bloc, nous voulons les items sur la même ligne avec un espacement interne (externe aurait eu le même résultat ici) d'1em entre chacun des blocs, le texte centré et transformé tout en majuscules. Notre header est alors prêt !



Notre page a déjà meilleur tête n'est-ce pas ? Si vous ne comprenez pas quelque chose, comme toujours, l'espace commentaires de ce post est là pour vous !

On va un peu plus loin ? Notre menu ne serait de toute façon pas utile s'il n'y avait pas de lien, pensez donc à ajouter des liens dans votre code HTML et on retourne dans le CSS pour les personnaliser car la plupart des navigateur colorent les liens en bleus et les soulignent, ce n'est pas forcément du plus bel effet.
header ul li a
{
   color: white;
   background: inherit;
   text-decoration: none;
}

Comme vu précédemment, je veux que ce style s'applique uniquement au lien de notre menu mais pas à tous les liens de la page, je précise donc les balises devant précéder ces liens. J'attribue une couleur de texte blanche et j'enlève la décoration (le soulignement). Comme toujours je donne une couleur au fond comme j'ai attribué la couleur de texte et j'utilise le mot-clé inherit qui sert à dire que je veux le même fond que la balise parente, dans notre cas ce sera l'orange.

Maintenant notre menu est mieux présenté mais si on passe la souris sur un item, rien ne se passe, il serait peut être bon d'avoir un effet visuel lorsque l'on survole un lien ou que l'on arrive dessus en utilisant la tabulation du clavier. Pour cela on utilise les pseudo-classes :hover et :focus.
header ul li a:hover, header ul li a:focus
{
   color: black;
   background: inherit;
   text-decoration: none;
   border: 1px solid black;
}

Un texte en noir et une bordure noire apparaîtra autour du lien survolé ou sélectionné.






Notre pied de page

Avant de s'attaquer à la grosse partie, le centre, mettons en place notre pied de page. Dans mon cas, je n'ai décidé que d'afficher un petit copyright. Donc je vais simplement l'afficher sous la forme d'un bandeau sur toute la largeur avec le texte centré.
footer
{
   position: fixed;
   bottom: 0;
   text-align: center;
   width: 100%;
   background: darkorange;
   color: white;
   padding: 2em;
   border-top: 1em dashed white;
}

Texte centré (text-align), largeur de notre bloc (width), couleurs de fond (background) et de texte (color), espacement (padding) et une petite bordure supérieure (border-top) pour ajouter un effet. Vous connaissez déjà ces instructions. Mais j'en profite pour vous en introduire deux autres. J'aimerais que mon footer soit tout le temps affiché au plus bas de notre page et pas seulement à la suite de mon contenu : je lui dis donc que la position doit être fixée (position: fixed) et que l'espace avec le bas de page est nul (bottom: 0). Et voilà !






Le début des complications

On doit s'attaquer au centre maintenant et c'est là que ça se complique. Il faut savoir que le langage CSS n'est pas encore totalement mature et qu'il y a toujours des zones de flous que chaque éditeur de navigateur interprète à sa manière. Mais, une chose sur laquelle les navigateurs s'accordent c'est qu'aucun n'est capable d'un contrôle total sur les colonnes.

Vous en aurez peut être l'idée, une solution pour pallier ces soucis serait d'utiliser un tableau. Eh oui, une solution vraiment toute simple ... MAIS ... un tableau est décrit comme un élément qui sert à stocker et à ordonner des données mais en aucun cas comme un élément de design. C'est la raison pour laquelle un site utilisant des tableaux pour sa structure sera très mal classé par les moteurs de recherche et vous savez que si un site apparaît plus loin que la 2è page de recherche Google, vous n'irez jamais le consulter. Il faut donc qu'on ''bidouille'' pour arriver à quelque chose d'à peu près correct. Je choisis dans la suite de ce cours une solution parmi une dizaine d'autres possibilités qui n'est pas forcément la meilleure mais qui a l'avantage d'être assez simple. Allons-y !




Le contenu de notre page

Cette solution va tout simplement utiliser la même instruction d'affichage que notre menu :
display: inline-block;

Mais vous l'avez peut être remarqué avec votre menu, cette solution crée des espacements non désirés entre les blocs et essayer d'y remédier n'est pas chose aisée. Nous n'allons pas introduire trop de notions qui ne seraient pas utile d'apprendre (en tout cas pas dans un deuxième cours sur le CSS).
Je veux alors que mon bloc main prenne les 2/3 de la page et mon bloc aside le 1/3 restant. Voici mon code :
main
{
   width: 65%;
   margin: 1%;
   display: inline-block;
   vertical-align: top;
}

aside
{
   width: 30%;
   display: inline-block;
   background: lightgrey;
   color: black;
   padding: 1em;
   margin-top: 1%;
   vertical-align: top;
}

Vous voyez bien qu'en cumulant les 2 largeurs, on n'arrive pas à 100% de la page mais vous voyez que j'attribue un espacement extérieur (margin) sur mon bloc main d'1% de chaque côté auquel on ajoute les espaces non-désirées et on est presque aux 100%.

On a ici une nouvelle instruction vertical-align qui sert à dire au navigateur que l'on veut nos blocs main et aside aligné au plus haut possible (top). Car oui, inline-block change le comportement de l'affichage, ce qui nous pousse à rajouter l'instruction.

On peut alors également personnaliser nos articles et nos sections dans la barre latérale.
article
{
   border: 1px solid darkorange;
   padding: 1em;
   margin: 0 0 1% 0;
}

article h2, aside h2
{
   margin: 0;
}

article time
{
   font-size: 80%;
   color: grey;
   background: white;
   display: block;
}

aside section
{
   margin-bottom: 2%;
}

aside section ul li
{
   text-indent: 2em;
}

Je pense que vous comprenez toutes ces instructions, sinon n'hésitez pas à demander plus de détails en commentaires ! Voici le résultat obtenu :







Il n'y a pas un problème ?

Deux colonnes c'est bien mais que se passe-t-il si on passe sur un petit téléphone ou qu'on redimensionne notre fenêtre ?



Oups, cela devient moins pratique à lire et à utiliser ... Donc quoi faire ? Recommencer mon site et choisir une autre présentation ?

Bien sûr non, on va juste adapter notre code selon la taille de la fenêtre du navigateur. Ceci grâce à la règle @media qui associée à une condition va nous permettre de définir ou redéfinir des instructions.
@media (max-width: 800px)
{
   main
   {
      width: 98%;
   }
        
   aside
   {
      display: inherit;
      width: 93%;
      padding: 1em;
   }
}

Voilà donc les instructions qui seront interprétées si la taille de ma fenêtre est inférieure à 800px. Je rajoute un petit bidouillage pour vous montrer qu'on peut accumuler les conditions avec @media : on peut ajuster la largeur de notre barre latérale toujours en fonction de la taille de la fenêtre (car elle n'est pas exactement la même du fait de l'utilisation des pourcentages et des espacements non-désirés qui eux sont de taille fixe).
@media (max-width:1200px) and (min-width: 801px)
{
   aside
   {
      width: 28%;
   }
}




C'est à vous - Gagnez votre médaille



Comme pour les premiers cours, votre travail est simple, à vous de personnaliser votre structure de blog et d'en faire un site complet ! Partagez votre affichage ainsi que votre CSS, je vous fais confiance pour l'HTML ;) Bon courage à tous !


2020-09-10 22:59:30
Favorites10 RateRate

Master Bunny

MARDE | from Redmi Note 8 Pro

#1

thank for sharing
2020-09-10 23:24:14

Master Bunny

Açelya30 | from Redmi Note 8

#2

Thanks for sharing
2020-09-10 23:29:45

Master Bunny

Abdullaherolmeb | from Redmi Note 8 Pro

#3

👍
2020-09-11 00:12:01

Master Bunny

Franticc | from Redmi Note 7

#4

Thanks For Sharing
2020-09-11 00:15:06

Master Bunny

dogannozann | from MI 9

#5

Thanks for sharing 👍🏽👍🏽
2020-09-11 00:15:34

Master Bunny

gungfu155 | from Redmi Note 9S

#6

You've worked so hard. Thank you, thank you
2020-09-11 00:17:13

Merak Edilicek Bir Yanimiz Yok. Sıradan Biriyiz.. Bahsedilicek Kadar Özel, Bahsi Edilmeyecek Kadar Eski

Master Bunny

Mustiecan | from Redmi Note 8 Pro

#7

Thanks for sharing
2020-09-11 00:34:10
Invalid floor, the posts have been deleted #8

Master Bunny

_Yusuf_28 | from Redmi Note 8

#9

Thanks for sharing
2020-09-11 01:42:34

Master Bunny

Fatih Yusuf | from Redmi Note 8 Pro

#10

Thanks for sharing 👏
2020-09-11 03:03:02


Freedom and independence form my character.
please sign in to reply.
Sign In Sign Up

GuillaumeMi

Moderator

3 Days Check-In
7 Days Check-In
21 Days Check-In
40 Days Check-In
70 Days Check-In
100 Days Check-In
MiA2
SBM teaser
Mi band 3
25K
X-Men
Photography contest
30K
Tech Talent
MI9T
MIUI Geek
Three's A Party
Happy July
App Maniac
MIUI 9th Birthday
Global Community
Medalla Encuesta Mi Phone
better together slogan
Global Community
2020
Médaille des 50K
100K abo
Mi Community Üçüncü Anket Madalyası
Mi 10th Birthday Medal
Medalla #GradientsInLife
Window View
বাংলা নববর্ষ ১৪২৭
Android One
Answer Mi #3
Ulang Tahun Xiaomi ke-10
3 Tahun Mi Community
Mobile Game
App Star
Redmi 8
Bookworm
23 Nisan Kutlu Olsun!
Sondage gaming
MIUI Fan
Favorite Goalkeeper
Ramadan Kareem
Meetings from Home
Mi2U April
Lefty Star
Favorite Author
redminote8series
Streaming Geek
Favorite Actor
Favourite Football Team
200mila Mi Fans
Osneip
Redmi Note 8
Mail Lover
Radio
Super Thursday
Redmi Note 8 Series
Redmi Note 8 Pro
Coin
Chipset
Corona Awareness
Map
Redmi 8A
MIUI 12
First Smartphone
Phone Finder
2 anni insieme
Eid Mubarak
TV Series Freak
BougLo Challenge I
Mi to You May
MIUI12
Neues Zuhause
MIUI Boot Animation
200 Mil Mi Fans En México
Favorite Singer
Gadget
Favorite YouTube Channel
Art Challenge
Father's Day
Redmi Note 9S
Mother's Day
UK Community 300K Users Medal
Redmi Note 9
Cloud Storage
30 Million Redmi Note 8 Series
Redmi Note 9 Pro Feature
ContributeTogether
10 years
K2K #3
Redmi 9 Colors
200K Registered Users
2nd Anniversary
MFF2020
Nepal "Happy New Year"
Emoji Day
Mi To You July
Redmi Note 9S Feature
Navigation System
Médaille 6
First Anniversary
10th mi fan stories
K2K #4
Favorite Bangladeshi Food
Redmi 9A
Redmi Note 9 Pro Camera
Material Expert
Redmi 9A Feature
MIUI 12 Dark Mode
10 years
Battery Survey
Mi to You September
Agosto Cometas
Moderadores
Mi10 espacio
Facebook Reviewer
Tín đồ Poco
Display Expert
Favorite Radio Station
Top photo France
Mi UK Treasure Hunt
Captain Mitu, Treasure Finder

Read moreGet new

Mi Comm APP

Stay updated on Mi Products and MIUI

Copyright©2010-2020 Xiaomi.com, All Rights Reserved
Content Policy
Quick Reply To Top Return to the list