Hello les tacos ! Ça va bien j'espère ! Aujourd'hui on se retrouve pour un tutoriel un peu spécial puisqu'il s'agit en fait d'une sorte de mini TD ! En effet, après concertation avec moi-même (j'adore vraiment dire ça !) et certains membres de la CB, j'ai décidé de vous montrer pas à pas comment je réalisais le code d'un élément de forum. Aujourd'hui, on s'attaque à une PA ! Deux choix s'offrent à vous maintenant : Vous avez un design précis pour votre PA et vous voulez le coder ou bien vous vous servez du PSD que j'ai donné au-dessus. Je tiens à préciser que cette PA a été réalisée spécialement pour ce tutoriel, certains éléments auraient pu être améliorés (et auraient dus) mais cela aurait complexifié le code.
Autre précision : je vais faire en sorte d'expliciter au maximum mes propos et pensées. Mon but est de permettre à n'importe qui, débutant ou curieux, de comprendre mon processus et ainsi permettre aux plus débutants de se lancer dans la merveilleuse aventure qu'est le fait de coder soi-même !
Si jamais vous avez une quelconque remarque ou un quelconque problème, n'hésitez pas à m'en faire part à la suite ou par MP !
Fini le bla-bla ! On attaque ! (Par pur esprit de partage, j'ai décidé d'ouvrir le tutoriel à n'importe qui, sans condition mais un merci est toujours apprécié !
0 - La préparation
On va tout d'abord commencer par le commencement ! J'aime travailler dans un fichier à part pour voir si le code seul fonctionne avant de le mettre sur un forum et debug si j'en ai besoin. Donc on va commencer par télécharger un éditeur de texte. J'alterne généralement entre 3 éditeurs. Brackets, Sublime Text et Atom. (Lien de téléchargements donnés sur les noms !)
- Pourquoi ces éditeurs ? (Sous spoiler):
Brackets est mon éditeur principal mais il est un peu lourd pour travailler sur un seul fichier. Je l'utilise souvent pour les projet un peu plus gros. Sublime Text est léger et très apprécié, il y a un grand nombre de plugins et skin mais il faut le crack pour ne pas avoir toutes les 10 saves un message promotionnel. Atom est très pratique, beau et léger. C'est généralement celui que j'utilise pour les codes sur ForumActif.
Ici, tout mon code est réalisé sur Atom. C'est donc de ce dernier que vous verrez l'interface. J'utilise le thème One Dark (fourni de base il me semble). Ne vous inquiétez pas si votre Atom ne ressemble pas totalement au mien, j'ai installé un certains nombres de plugins pour m'aider à aller plus vite 
Donc, une fois que l'on a installé notre éditeur de texte, on va se créer un dossier dans lequel on va travailler ! Nommez-le comme vous le désirez. On va ouvrir Atom (ou n'importe lequel des éditeur de texte) et faire Fichier/File > Ouvrir le dossier/Open Folder et l'on va choisir notre dossier ! De ce fait, sur la gauche, on obtient ça :
![[★★★☆☆][TUTO - TD] Coder sa P.A. de A à Z ! VDCSnoX](https://i.imgur.com/VDCSnoX.png)
Notre dossier est actuellement vide. On va créer dedans un sous dossier "css" et à partir de là, on va démarrer ! Donc, on va créer 2 fichiers : le fichier index.html dans notre dossier PA directement et le fichier main.css dans le dossier css. C'est une habitude à prendre de bien ranger les fichiers. Ça permet de retrouver plus rapidement où l'on doit travailler !
On va mettre en place le doctype dans notre index.html. Je vous passe les détails, ça permet de dire au navigateur « Ça, c'est du HTML. Donc va falloir l'interpréter ! ». Je vous donne directement le code pour vous simplifier la tâche :
- Code:
-
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<title>Ma sublime P.A.</title>
</head>
<body>
</body>
</html>
À partir de maintenant, vous pouvez ouvrir votre fichier index.html avec votre navigateur mais vous ne devriez rien voir dessus (à part le titre en haut qui change). On va maintenant lier le css et le html. Pour ça rien de plus simple, on va utiliser une balise link. La balise link va faire un lien avec un autre fichier. On défini que c'est un css en mettant en place une relation de type stylesheet. Tout ce charabia complexe, ça veut dire au navigateur « Tu vois le fichier là-bas ? C'est mon styliste attitré. C'est lui qui va te dire à quoi je ressemble. ». La ligne pour faire ça :
- Code:
-
<link rel="stylesheet" href="css/main.css"/>
On colle cette ligne juste après le title, entre les deux balises head. Pour faire court (et très schématisé) le head (la tête du HTML) contient les informations non affichées dont va se servir le navigateur pour comprendre votre fichier. Le body (corps donc) contient le contenu qui sera affiché par le navigateur (attention, c'est vraiment très schématisé là!). Le code entier de notre fichier index.html ressemble donc à
- index.html:
- Code:
-
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<title>Ma sublime P.A.</title>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
</body>
</html>
Maintenant, juste petite vérification : on va ajouter une couleur bien cradoss au body pour voir si le fichier html est bien lié ! Si c'est le cas, le corps de notre HTML sera vraiment moche. Mais au moins, on sera assuré d'avoir fait un bon boulot ! Dans mon main.css, je colore donc le body !
- Code:
-
body {
background-color: magenta;
}
On ouvre ou recharge la page index.html, dépend de si vous l'avez ouverte ou pas et on regarde le résultat.
- Spoiler:
Si vous avez un truc bien flashy, c'est que tout va bien. Sinon, revérifier que votre dossier sur la gauche ressemble bien à ça :
![[★★★☆☆][TUTO - TD] Coder sa P.A. de A à Z ! GiDSr7O](https://i.imgur.com/GiDSr7O.png)
OK, on a fini la phase de préparation de nos fichiers de travail. On va s'attaquer à la phase où il faut réfléchir à la structure que l'on va donner à notre HTML et CSS pour avoir notre PA. En gros, c'est la partie que l'on va passer sur Photoshop (ou n'importe quel logiciel de traitement d'image hein, même paint pourrait faire l'affaire).
1 - Réflexion pré-code
Je vais vous montrer la réalisation de cette partie sur photoshop. Sachez qu'elle peut être réalisée sur n'importe quel logiciel de retouche ou traitement d'image. Une fois habitués, vous réaliserez cela même sans logiciel, juste avec vos magnifiques yeux de codeur.
Le principal intérêt de cette partie est de prévoir ce que l'on va réaliser pour éviter d'avoir un trop gros nombre de moments où l'on ne comprend pas ce que l'on fait, ces moments que tout le monde a croisé et s'est dit « Je pige pas. Les codeurs sont magiciens en fait. »
En fait, on va découper notre image en gros blocs puis en plus petits blocs. Tout le code est basé sur ça : des blocs dans des blocs (grossièrement hein, je simplifie !). Donc on va prendre notre petit PSD (l'image suffirait limite !) et on va couper ! (Pas au sens propre, on va tracer des lignes imaginaires pour séparer en blocs!)
La PA que j'ai fournie est assez simple, j'ai fait exprès de rester sur un design carré. Parfois, vous aurez des réalisations plus complexes mais garder en tête qu'il ne s'agit que de blocs ! Le placement se fera ensuite !
En regardant la PA, on voit d'abord 3 parties émergées : Le titre, la partie gauche et la partie droite. Donc on va tracer nos traits !
![[★★★☆☆][TUTO - TD] Coder sa P.A. de A à Z ! 5bcWWLg](https://i.imgur.com/5bcWWLg.png)
La réalité est presque identique. Vous vous rappelez, je vous ai dit des blocs dans des blocs ? Et bien en fait ici, il y a un plus gros blocs que l'on peut voir ! Personne ? Mais oui ! On va d'abord commencer par collé les 2 blocs du bas !
La vraie séparation est donc :
![[★★★☆☆][TUTO - TD] Coder sa P.A. de A à Z ! 0BdwQrU](https://i.imgur.com/0BdwQrU.png)
Voilà pourquoi il faut bien penser ses blocs avant de se lancer dans le code ! Grâce à ça, on voit que sans ce travail préliminaire, on serait parti trop rapidement et on aurait pu se tromper. ATTENTION, je ne dis pas qu'avec la méthode en 3 séparations directes, vous n'auriez pas réussi à faire la PA. Simplement, je préfère généralement prévoir toute éventualité et donc mettre trop de balise que pas assez.
On continue ? On voit les 2 blocs se profiler puis chacun des blocs est autonome ensuite ! Ce qui donne :
![[★★★☆☆][TUTO - TD] Coder sa P.A. de A à Z ! WnVjINR](https://i.imgur.com/WnVjINR.png)
Vous aviez tout trouvé ? Très bien ! Vous vous étiez trompé ? Ce n'est pas grave ! On apprend bien mieux des erreurs ! Et surtout, on a notre structure bien pensée là ! On va commencer par faire fonctionner ces systèmes là avant de se lancer dans une réflexion plus précise et poussée ! (Il est 1h30 du matin, je commence à écrire n'importe comment non? Il me faut un correcteur !)
Au passage, est-ce que quelqu'un a remarqué l'erreur ? Personne ? Et oui, il faut aussi un bloc tout autour de la PA ! Au final, le schéma est :
![[★★★☆☆][TUTO - TD] Coder sa P.A. de A à Z ! CegzNQc](https://i.imgur.com/CegzNQc.png)
2 - Premier prototype codé
On va revenir vers la partie qui fait peur : Atom ! Pas de panique, je suis là pour vous guider pas à pas ! Si jamais vous bloquez, n'hésitez pas à me demander hein ! (Vous pensez qu'après ça, je pourrais demander à ce que l'on ouvre des classes pour donner des cours de code ? XD). Enfin bref, on ouvre Atom (ou son éditeur préféré!). On va commencer par retirer ce magenta du fond ! Je propose un #e0e0e0, d'accord ? (C'est le gris du fond quoi). On ouvre donc main.css et on change magenta en #e0e0e0.
D'un coup ça va mieux non ? Je pense bien ! Maintenant, on va commencer par le gros blocs cyan ! On regarde, l'image fait 600px de large. Je vais donc faire un bloc de 600px de large ! On va ensuite le centrer et on va l'afficher en cyan pour voir s'il est bien là !
Dans index.html, je crée mon premier bloc. Ce sera une div (une div est un bloc neutre, elle n'a pas d'utilité propre si ce n'est être un bloc et regroupé les autres éléments dedans!) que je vais nommée PA-container. Je crée donc ma div avec la class PA-container (je n'utilise que des classes, plus léger au chargement et plus c'est plus beau à écrire ! :troll: )
Je lui mets un contenu pour qu'il apparaisse bien sûr (sinon, le bloc n'a pas de hauteur. Quelque chose de 0px ne se voit pas !). Voici donc mon index.html :
- Code:
-
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<title>Ma sublime P.A.</title>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<div class="PA-container">
Mon gros bloc cyan !
</div>
</body>
</html>
Puis on va modifier le CSS. On a dit largeur de 600px, une couleur de fond cyan et qui définit l'espace à gauche et à droite automatiquement pour se centrer, c'est ça ? Et bien on traduit littéralement ça en anglais ! L'espace laissé sur les côtés de la feuille pour écrire, c'est une marge non ? On va mettre des espaces automatiques. Margin : auto ; Et on continue sur cette lancée ! Une couleur de fond cyan ? Background-color:cyan ; Et pour finir largeur = 600px se traduit en width:600px ; Ce qui donne :
- Code:
-
body {
background-color: #e0e0e0; /*/ Fond du body en gris */
}
.PA-container {
width: 600px; /* Ma largeur de 600px */
margin: auto; /* Ici on dit au navigateur "Débrouile toi, mais le conainer va trouver ses écart tout seul et se centrer"*/
background: cyan; /* Un background moche pour bien le voir ! */
}
On arrive à ça comme résultat :
- Spoiler:
C'est moche mais au moins, on sait que ça marche ! Et avec ça, on a notre bloc principal ! Pas trop compliqué non ? On va donc s'attaquer aux deux violets ! Ici, pas de réels problèmes je pense, on a ni à définir leurs largeurs, ni leurs hauteurs. En effet, leurs hauteurs respectives vont dépendre du contenu !
On crée donc deux div qui partageront la même classe ! Même visage = même classe. Facile non ? Le seul but ? Les rendre violette ! (Oui, je vais remettre du magenta moche). On peut enlever le texte du bloc cyan, il ne sert plus à rien. Le code complet :
- Spoiler:
index.html - Code:
-
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<title>Ma sublime P.A.</title>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<div class="PA-container">
<div class="half-top">Je suis magenta</div>
<div class="half-top">Moi aussi, je suis moche</div>
</div>
</body>
</html>
main.css - Code:
-
body {
background-color: #e0e0e0; /*/ Fond du body en gris */
}
.PA-container {
width: 600px; /* Ma largeur de 600px */
margin: auto; /* Ici on dit au navigateur "Débrouile toi, mais le container va trouver ses écart tout seul et se centrer"*/
background: cyan; /* Un background moche pour bien le voir ! */
}
.half-top {
background: magenta; /* Bouhou, caca pas beau ! */
}
On va maintenant s'attaquer aux deux blocs rouges! Notre but, c'est de les faire mettre côte à côte. Pour ça, on va utiliser une petite propriété css qui s'appelle le float. En gros, cette propriété css dit « les éléments qui ont un float vont flotter vers la zone indiquée tant qu'il reste dans son conteneur. Donc, si je dit à un élément qu'il a un float:left; il va se coller automatiquement vers le plus à gauche possibl (en gardant en tête qu'ils tentent automatiquement de se mettre le plus haut possible).
Pour vous aider, imaginez simplement des bateaux. Si on les pose sur un sol, sans instructions l'un derrière l'autre (comme tout block HTML donc), ils y restent. Si maintenant, je les mets sur l'eau avec pour instructions « allez vers le plus à gauche possible », s'il y a de la place, ils se mettront côte à côte. On crée nos deux blocs qui vont représenter nos colonnes et on va leur dire de flotter sur la gauche !
Le code :
- Spoiler:
index.html - Code:
-
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<title>Ma sublime P.A.</title>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<div class="PA-container">
<div class="half-top">Je suis magenta et j'aurais un titre !</div>
<div class="half-top">
<div class="column">Je suis un bloc rouge !</div>
<div class="column">Je suis un bloc rouge !</div>
</div>
</div>
</body>
</html>
main.css - Code:
-
body {
background-color: #e0e0e0; /*/ Fond du body en gris */
}
.PA-container {
width: 600px; /* Ma largeur de 600px */
margin: auto; /* Ici on dit au navigateur "Débrouile toi, mais le conainer va trouver ses écart tout seul et se centrer"*/
background: cyan; /* Un background moche pour bien le voir ! */
}
.half-top {
background: magenta; /* Bouhou, caca pas beau ! */
}
.column {
background: red; /* Blocs rouges non ? */
float: left; /* Allez le plus à gauche tas de fainéants !*/
}
Oui, j'ai créer les deux blocs rouges avec la même classe. En même temps, rappelez-vous au dessus, j'ai dit « même tête = même classe ». Et bah je n'ai fait qu'appliquer cela. Bien, si tout s'est bien passé, vous arrivez à un truc comme ça :
- Spoiler:
Bon, on va commencer à entrer dans les détails, voulez-vous bien ? On va jeter un coup d'oeil aux typographies ! Pour la PA, j'utilise du source sans pro light et du oswald light et regular. Ce sont toutes les deux des fonts de google. Ainsi, c'est bien plus simple pour les intégrer ! Si besoin, je vous montrerais comment les récupérer. En attendant, je vous donne la ligne à ajouter entre les balises head (rappel : entre le head = non apparent et utilisé par le navigateur!)
- Code:
-
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300|Oswald:400,300' rel='stylesheet' type='text/css'/>
On défini que Source Sans Pro est la typo principale dans la PA en la désignant comme font sur notre gros container de base (le cyan)
- Code:
-
font: 300 14px 'Source Sans Pro'; /* Font principale 300 = light, 16px = taille, puis la typo*/
Là, on va s'attaquer au message d'en-tête ! On pourrait utiliser un titre, simplement, son contenu ne correspond à un titre à mes yeux, je vais donc utiliser un texte simple ! Donc, texte = p (en balise) et on va le styliser !
Ce p va être utilisé en 18px avec du oswald. On remarque aussi qu'il est centré et qu'il y a un écart de 20px en haut et en bas. Ici, deux écoles s'affrontent, marge extérieure (margin) ou marge intérieure (padding). Je suis partisan du padding, il a tendance à créer moins de problème (à mes yeux!). Pour finir, le nom de l'utilisateur est en oswald regular (normal). On va utiliser une balise pour symboliser que cette zone de texte à une importance plus forte que le reste ! La balise strong ! Donc, on écrit notre p dans la première case magenta (ne pas oublier de nommer le p pour le distinguer !) :
- Code:
-
<p class="PA-header">Que comptes-tu faire aujourd'hui <strong>KolonelReyel</strong> ?</p>
Remarquez que je n'ai pas tapé le texte totalement en majuscule. C'est une question d'accessibilité. Et aussi par pure flemme. On va réaliser l'effet tout majuscule avec du CSS, regardez par vous même :
- Code:
-
.PA-header {
font: 300 18px 'Oswald'; /* font du header */
text-align: center; /* On centre le texte */
text-transform: uppercase; /* On dit au texte de se mettre entièrement en majuscule */
margin: 0; /* On annule toute marge extérieure car on va utiliser les marges intérieures */
padding: 20px 0; /* Marge intérieure. Premier chiffre = haut et bas, second = droite et gauche */
}
Et on en a fini avec la case magenta du dessus ! Le code complet ressemble à :
- Spoiler:
index.html - Code:
-
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<title>Ma sublime P.A.</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300|Oswald:400,300' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<div class="PA-container">
<div class="half-top">
<p class="PA-header">Que comptes-tu faire aujourd'hui <strong>KolonelReyel</strong> ?</p>
</div>
<div class="half-top">
<div class="column">Je suis un bloc rouge !</div>
<div class="column">Je suis un bloc rouge !</div>
</div>
</div>
</body>
</html>
main.css - Code:
-
body {
background-color: #e0e0e0; /*/ Fond du body en gris */
}
.PA-container {
width: 600px; /* Ma largeur de 600px */
margin: auto; /* Ici on dit au navigateur "Débrouile toi, mais le conainer va trouver ses écart tout seul et se centrer"*/
background: cyan; /* Un background moche pour bien le voir ! */
font: 300 14px 'Source Sans Pro'; /* Font principale 300 = light, 16px = taille, puis la typo*/
}
.half-top {
background: magenta; /* Bouhou, caca pas beau ! */
}
.column {
background: red; /* Blocs rouges non ? */
float: left; /* Allez le plus à gauche tas de fainéants !*/
}
.PA-header {
font: 300 18px 'Oswald'; /* font du header */
text-align: center; /* On centre le texte */
text-transform: uppercase; /* On dit au texte de se mettre entièrement en majuscule */
margin: 0; /* On annule toute marge extérieure car on va utiliser les marges intérieures */
padding: 20px 0; /* Marge intérieure. Premier chiffre = haut et bas, second = droite et gauche */
}
On attaque celle en dessous ? Pour ça, il va falloir donner le visage que l'on veut aux deux cases rouges. Sur ce point, les deux cases rouges diffèrent. L'une est plus large que l'autre. On va donc dire à chacune de ces cases rouges « Ok, t'es une case rouge (column) mais t'es aussi différente ! ». Ici, plusieurs méthodes encore. Personnellement, je trouve ça plus simple d'ajouter une class, mais certains parleront de nth-type-of ou nth-child. Vous qui débutez, nous allons juste ajouter un nommage.
En gros, c'est comme dire « Lui, c'est un fromage mais c'est aussi du gouda. L'autre c'est un fromage mais c'est aussi de l'emmental » (Oui, pas meilleur exemple en tête!). Donc, on prend nos deux columns et on ajoute à chacun une autre class. Pour ça, on va dans class="" et on sépare chacune d'un espace. On a donc :
- Code:
-
<div class="half-top">
<div class="column first-column">Je suis un bloc rouge !</div>
<div class="column second-column">Je suis un bloc rouge !</div>
</div>
Et on va les styliser séparément ! Donc, on a une box qui fait 20 px sur la gauche + 290px de blanc. L'autre fait 20px sur la gauche + 250px + 20px sur la droite. On y va donc ?
- Code:
-
.first-column {
padding-left: 20px; /* Ecart à gauche*/
width: 290px; /* Largeur */
}
.second-column {
padding: 0 20px; /* Ecart à gauche et à droite identique */
width: 250px; /* Largeur */
}
Pour les plus avancés : Je n'aurais pas réalisé comme cela en temps normal. C'est juste que ce tuto cherche à être accessible à tous et donc je vais au plus simple. Ma méthode se trouve en spoiler juste après !
- Méthode plus avancée:
Mettre un padding de 10 px sur PA-container ou le second half-top. Ainsi, il reste juste à mettre un autre padding de 10px sur les columns.
Ici, on a donc les 2 blocs rouges qui, collés ensemble, prennent toutes la largeur.
![[★★★☆☆][TUTO - TD] Coder sa P.A. de A à Z ! Xka7SjB](https://i.imgur.com/xka7SjB.png)
Petit aparté : Pour ceux qui se demandent ce que ça change entre padding (intérieure) et margin (extérieure), voici la version en margin :
![[★★★☆☆][TUTO - TD] Coder sa P.A. de A à Z ! PXHFC56](https://i.imgur.com/PXHFC56.png)
On voit donc que les padding entrent en jeu dans la largeur d'un bloc mais pas les margin. C'est à retenir!(Gardez ça dans un petit coin de votre tête et repensez-y la prochaine fois que vous aurez un problème).
Par contre, vous ne trouvez pas ça bizarre ? La box magenta derrière les rouges n'est plus là ! On s'attendrait pourtant à la voir dans les zones transparente non ? Bah, c'est vrai non ? On a bien mis nos box rouges dans une box magenta ! Et sur la case du dessus, le fond est toujours là ! Alors, pourquoi est-ce qu'il disparaît ? Les amis, cet effet est dû au float !
En effet, on a indiqué avec ça que les box allaient le plus à gauche possible. Imaginons la succession de box comme une file indienne devant une caisse. Le float les fait aller le plus à gauche possible. Et par cette action, elles sortent de la file (on parle de sortir du flux). Et normalement, tout block derrière aurait pris la place ! Sauf qu'il n'y en a aucun ici donc le caissier pense qu'il n'y a personne pour lui.
Pour régler ce problème, on va utiliser un clearfix. En gros, on va créer un vigile qui va dire à toute personne derrière « Ces deux-là font la queue, tu doubles pas ! » Le caissier voyant ça va comprendre et les considérer !
En html/css, ça donne ça :
Le vigile (Grrr, pas doublé !) : - Code:
-
<div class="clearfix"></div>
Son badge de vigile : - Code:
-
.clearfix {
clear: both; /* Le vigile ! */
}
On retire le rouge des box pour bien voir et là Boom shakalaka ! (J'adore dire ça !)
![[★★★☆☆][TUTO - TD] Coder sa P.A. de A à Z ! ZwbaepI](https://i.imgur.com/ZwbaepI.png)
On a traité une grosse partie là ! Et on est vraiment loin du résultat non ? Pour l'instant, nos codes ressemblent à ça :
- Spoiler:
index.html - Code:
-
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<title>Ma sublime P.A.</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300|Oswald:400,300' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<div class="PA-container">
<div class="half-top">
<p class="PA-header">Que comptes-tu faire aujourd'hui <strong>KolonelReyel</strong> ?</p>
</div>
<div class="half-top">
<div class="column first-column">Je suis un bloc rouge !</div>
<div class="column second-column">Je suis un bloc rouge !</div>
<div class="clearfix"></div>
</div>
</div>
</body>
</html>
main.css - Code:
-
body {
background-color: #e0e0e0; /*/ Fond du body en gris */
}
.clearfix {
clear:both; /* Le vigile ! */
}
.PA-container {
width: 600px; /* Ma largeur de 600px */
margin: auto; /* Ici on dit au navigateur "Débrouile toi, mais le container va trouver ses écart tout seul et se centrer"*/
background: cyan; /* Un background moche pour bien le voir ! */
font: 300 14px 'Source Sans Pro'; /* Font principale 300 = light, 16px = taille, puis la typo*/
}
.half-top {
background: magenta; /* Bouhou, caca pas beau ! */
}
.column {
float: left; /* Allez le plus à gauche tas de fainéants !*/
}
.PA-header {
font: 300 18px 'Oswald'; /* font du header */
text-align: center; /* On centre le texte */
text-transform: uppercase; /* On dit au texte de se mettre entièrement en majuscule */
margin: 0; /* On annule toute marge extérieure car on va utiliser les marges intérieures */
padding: 20px 0; /* Marge intérieure. Premier chiffre = haut et bas, second = droite et gauche */
}
.first-column {
padding-left: 20px; /* Ecart à gauche*/
width: 290px; /* Largeur */
}
.second-column {
padding: 0 20px; /* Ecart à gauche et à droite identique */
width: 250px; /* Largeur */
}
3 - Entrons dans les détails
On va commencer à réaliser chacun des blocs autonomes. C'est parti les amis ! On va tout d'abord retirer le magenta puisqu'il ne nous ait plus d'aucune utilité. Puis on va bien réfléchir. Chacune des cartes prend toute la largeur qu'on lui permet de prendre. Elles ont toutes un fond blanc, une bordure de 5px sur la gauche et une marge extérieure de 20px en dessous. Vous voyez où je veux en venir non ? Et oui, même visage = même classe. On leur donne donc à toute la même classe ! Au passage, pour prévoir d'éventuel bug futur, je vais ajouter la marge intérieure en bas de 10px. Si vous l'aviez vu, tant mieux ! Sinon, c'est normal, vous n'avez pas encore l'habitude ! Et puis, vous l'auriez remarqué plus tard !
Cependant, on voit bien que chacune des box a une couleur de bordure qui lui est propre et aura un contenu propre. Ce contenu aura aussi un design propre. Donc là, qu'est-ce qu'on fait ? C'est ça ! On leur met à chacune une deuxième classe qui va les différencier ! Ca donne donc :
- Spoiler:
index.html - Code:
-
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<title>Ma sublime P.A.</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300|Oswald:400,300' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<div class="PA-container">
<div class="half-top">
<p class="PA-header">Que comptes-tu faire aujourd'hui <strong>KolonelReyel</strong> ?</p>
</div>
<div class="half-top">
<div class="column first-column">
<div class="individual-card contexte">Mon contenu est différent</div>
<div class="individual-card top-sites">Mon contenu est différent</div>
<div class="individual-card staff">Mon contenu est différent</div>
</div>
<div class="column second-column">
<div class="individual-card news">Mon contenu est différent</div>
<div class="individual-card predefs">Mon contenu est différent</div>
<div class="individual-card partenaires">Mon contenu est différent</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</body>
</html>
main.css - Code:
-
body {
background-color: #e0e0e0; /*/ Fond du body en gris */
}
.clearfix {
clear:both; /* Le vigile ! */
}
.PA-container {
width: 600px; /* Ma largeur de 600px */
margin: auto; /* Ici on dit au navigateur "Débrouile toi, mais le container va trouver ses écart tout seul et se centrer"*/
font: 300 14px 'Source Sans Pro'; /* Font principale 300 = light, 16px = taille, puis la typo*/
}
.column {
float: left; /* Allez le plus à gauche tas de fainéants !*/
}
.PA-header {
font: 300 18px 'Oswald'; /* font du header */
text-align: center; /* On centre le texte */
text-transform: uppercase; /* On dit au texte de se mettre entièrement en majuscule */
margin: 0; /* On annule toute marge extérieure car on va utiliser les marges intérieures */
padding: 20px 0; /* Marge intérieure. Premier chiffre = haut et bas, second = droite et gauche */
}
.first-column {
padding-left: 20px; /* Ecart à gauche*/
width: 290px; /* Largeur */
}
.second-column {
padding: 0 20px; /* Ecart à gauche et à droite identique */
width: 250px; /* Largeur */
}
.individual-card {
background: #ffffff; /* background blanc */
margin-bottom: 20px; /* Marge exterieure en bas de 20px */
border-width: 0 0 0 5px; /* Ici on dit que la largeur de la bordure est de 0 en haut, 0 à gauche, 0 en bas et 5px à gauche (ordre des aiguilles d'une montre)*/
border-style: solid; /* Ici, on indique que la bordure sera un trait plein et non des tirets ou des points.*/
padding: 0 0 10px 0; /* Marge intérieure haut droite bas gauche */
}
.contexte {
border-color: #000000; /* Couleur de la bordure */
}
.top-sites {
border-color: #9b59b6; /* Couleur de la bordure */
}
.staff {
border-color: #1abc9c; /* Couleur de la bordure */
}
.news {
border-color: #f39c12; /* Couleur de la bordure */
}
.predefs {
border-color: #3498db; /* Couleur de la bordure */
}
.partenaires {
border-color: #e74c3c; /* Couleur de la bordure */
}
Bien ! Ça commence à prendre forme non ? Il ne nous reste plus qu'à définir les titres de chacune des cases et le style des boites de textes et l'on en aura terminé avec les individual-card. Il faudra ensuite passer au cas par cas. Oui, je sais, il manque encore le texte. Mais si vous vous souvenez bien, on a défini un style de base pour le texte dans notre container. C'est ce style qui va s'appliquer sur tous les textes. Le seul travail restant sur eux sera les marges (interieures et extérieures).
On attaque donc les titres ! Car oui, nous allons bien utliser les balises de titre ici. Ces balises sont appelés les balises hn, n étant un chiffre. Une balise titre s'écrit donc h1, h2, h3 ... h6 selon leur importance. Généralement, il n'y a qu'un seul h1 sur un site, et il est reservé pour le nom du site. Nous allons donc nous servir de h2 ici.
Rappelez vous, même tête = même classe. On va utiliser des h2 avec une class spécifique (nommons la PA-title). Dans chacune de nos individual-card, on ajoute donc :
- Code:
-
<h2 class="PA-title">Le titre</h2>
Ici encore, pas besoin de tout écrire en majuscules, le CSS va suffir pour ça :
- Code:
-
.PA-title {
font: 300 18px 'Oswald'; /* Font 300 = light, 18px = taille, puis la typo*/
text-transform: uppercase; /* On indique "Tout est en majuscule au niveau apparence" */
margin: 0; /* On annule les marges extérieures */
padding: 10px 0 0 20px; /* Marges interieures : 10 en haut, 0 à droite, 0 en bas, 20 à gauche */
}
Puis on va travailler rapidement le texte. J'ai décidé de le nommer .PA-text
- Code:
-
<p class="PA-text">Mon texte !</p>
Et son style : On va simplement jouer sur les marges pour avoir un résultat ressemblant à la maquette et ajouter un overflow auto. Overflow sert à traiter le contenu qui pourrait déborder d'une box. En le mettant en auto, on dit au CSS « tu te démerdes avec ce qui déborde. Si ça déborde pas tu fais rien, si ça déborde, tu met une scrollbar ! »
- Code:
-
.PA-text {
margin: 0; /* On annule les marges extérieures */
padding: 10px; /* Marges intérieures de 10px */
overflow: auto; /* C'est là qu'on dit de se demmerder avec le contenu tant que ça rentre ! */
}
On va commencer à travailler au cas par cas ! Dans l'ordre : contexte, news, top-sites, predefs, partenaires et staff. Pourquoi cet ordre ? Parce que contexte, news et top-sites contiennent du texte et vont donc des styles assez similares. Et nous gardont staff pour la fin car cette case nécessite un travail bien plus spécifique !
Donc d'abord contexte. Il reste très peu à faire si ce n'est définir une taille pour la zone de texte. Et oui, rappelez vous, on a prévu l'overflow auto au cas où le contenu déborderait. Mais comment peut on déborder alors que le conteneur a une taille infinie ? Il faut donc définir une hauteur (on ne veut pas perdre la beauté de la P.A. non ahem)
D'après notre maquette, la zone de texte fait 105px de haut (104 en vérité mais je n'aime pas les chiffres non multiples de 5 !). Enfin, c'est bien beau tout ça, mais comment va-t-on sélectionner le p ? On pourrait très bien lui ajouter une class à lui aussi, mais j'ai envie de vous faire travailler un peu les sélecteurs. Ce que l'on va réaliser c'est utiliser un sélecteur enfant.
Comme je vous l'ai dis plus haut, on fonctionne avec des blocs dans des blocs. Les blocs intérieurs sont appelés blocs enfants. Les blocs autours sont appelés parents. Ainsi, on forme un véritable arbre généalogique de blocs !
Comment fonctionne le sélecteur enfant ? En bien c'est simple. Pour symboliser qu'une chose est l'enfant de l'autre en css, on utilise... un espace ! Et oui, vous ne rêvez pas. Un simple espace gère cela ! Donc en gros : .parent .enfant permet de sélectionner l'enfant (et seulement l'enfant !)
Appliquer à notre choix, pour sélectionner le p (qui a comme class PA-text) qui est enfant de .contexte, on écrit .contexte .PA-text et ensuite, on peut lui appliquer le style qu'on veut !
On va modifier le contenu textuel de notre balise dans contexte. Pour les fainéants :
- Code:
-
<p class="PA-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, incidunt error obcaecati voluptatibus dolorem odit, ullam ipsum praesentium architecto harum sunt earum velit necessitatibus quibusdam aspernatur ducimus quos minus aliquid! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium similique, debitis pariatur, doloremque, dolorum nulla consequatur adipisci, rem quam quaerat ducimus ut nostrum. Magnam ut, aperiam qui eos asperiores, quasi.</p>
Là, on voit bien que le bloc du contexte s'est allongé ! Maintenant on va définir sa hauteur ! rappel : .context .PA-text pour sélectonner le texte.
Ici, on voit bien la scroll bar apparaître !
![[★★★☆☆][TUTO - TD] Coder sa P.A. de A à Z ! NEDi3rZ](https://i.imgur.com/nEDi3rZ.png)
C'est ici qu'il y aurait pu y avoir des problèmes pour lesquels nous avons mis un padding de 10 px sur l'individual-card ! Au fait, pour ceux que ça génerait d'avoir la scrollbar qui colle à droite, il suffit de changer notre padding 10px de droite en 5 et de mettre 5px de margin à droite ! (Ceux que ça ne dérange pas, laissez comme ça :p)
On va continuer avec pareil avec les .PA-text de .news (155px de haut) et de .top-sites (15px de haut). Je vous laisse trouver les sélecteurs ! Ça fonctionne comme avec contexte ! (La solution dans le spoiler juste après !)
- Soluces:
.news .PA-text et .top-sites .PA-text
Là normalement, vous avez remarqué une scrollbar très moche sur les top-sites. De base, le texte est fait pour être sur une seule ligne. Donc on met un contenu qui passe sur une ligne mais on voit quand même la scrollbar apparaître. C'est là que le système d'overwriting entre en jeu. En effet, par un certains nombres de technique, on peut dire au navigateur de changer le style d'une balise même s'il a été défini auparavant.
Ici par exemple, les PA-text sont définis avec un overflow auto. Mais, on veut dire au navigateur "Si jamais y'a un truc qui déborde, on le cache. Mais juste pour le PA-text de top-sites". Comment ça va se passer dans le code ? On va simplement mettre un overflow: hidden; sur notre .top-sites .PA-text .
Pourquoi ça fonctionne ? Et bien, c'est un peu complexe... Disons que les sélecteurs ont chacun un poids. En sélectionnant avec la balise (comme notre body), on a un poids moins conséquent qu'en sélectectionnant avec une class qui a un poids moins conséquent qu'un id
En gros, balise < class < id. Un exemple pour vous aider. Imaginons (ce n'est qu'un exemple !) que les balises valent 1 point, les class 10 et les id 100. Et bien, si je sélectionne un enfant comme on l'a fait au dessus (.parent .enfant), je le sélectionne avec un pouvoir de 20 points ! Toutes les propriétés que je mettrais dans ce sélecteur auront un pouvoir de 20 et écraseront toutes celles inférieures !
Il existe donc plusieurs techniques pour réaliser de l'overwriting mais celle-ci est la plus commune et la plus prore. Retenez bien ça !
Donc ! On revient à nos box de text ! Sur notre .top-sites .PA-text, on ajoute overflow hidden et le tour est joué !
![[★★★☆☆][TUTO - TD] Coder sa P.A. de A à Z ! EvFYBvM](https://i.imgur.com/evFYBvM.png)
Le code jusqu'ici :
- Spoiler:
index.html - Code:
-
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<title>Ma sublime P.A.</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300|Oswald:400,300' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<div class="PA-container">
<div class="half-top">
<p class="PA-header">Que comptes-tu faire aujourd'hui <strong>KolonelReyel</strong> ?</p>
</div>
<div class="half-top">
<div class="column first-column">
<div class="individual-card contexte">
<h2 class="PA-title">Contexte</h2>
<p class="PA-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, incidunt error obcaecati voluptatibus dolorem odit, ullam ipsum praesentium architecto harum sunt earum velit necessitatibus quibusdam aspernatur ducimus quos minus aliquid! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium similique, debitis pariatur, doloremque, dolorum nulla consequatur adipisci, rem quam quaerat ducimus ut nostrum. Magnam ut, aperiam qui eos asperiores, quasi.</p>
</div>
<div class="individual-card top-sites">
<h2 class="PA-title">Top sites</h2>
<p class="PA-text">Lorem ipsum dolor sit amet.</p>
</div>
<div class="individual-card staff">
<h2 class="PA-title">Staff</h2>
</div>
</div>
<div class="column second-column">
<div class="individual-card news">
<h2 class="PA-title">Nouvelles</h2>
<p class="PA-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos dolores sunt hic est in, magni ducimus quidem dicta aliquid laborum excepturi rem explicabo, maxime ex voluptates! Nihil impedit, culpa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ea est voluptates, mollitia quas pariatur labore molestias libero beatae soluta ipsa adipisci cum suscipit quo vitae, tenetur illo nihil. Accusantium?</p>
</div>
<div class="individual-card predefs">
<h2 class="PA-title">Prédéfinis</h2>
</div>
<div class="individual-card partenaires">
<h2 class="PA-title">Coups de coeur</h2>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</body>
</html>
main.css - Code:
-
body {
background-color: #e0e0e0; /*/ Fond du body en gris */
}
.clearfix {
clear:both; /* Le vigile ! */
}
.PA-container {
width: 600px; /* Ma largeur de 600px */
margin: auto; /* Ici on dit au navigateur "Débrouile toi, mais le container va trouver ses écart tout seul et se centrer"*/
font: 300 14px 'Source Sans Pro'; /* Font principale 300 = light, 14px = taille, puis la typo*/
}
.column {
float: left; /* Allez le plus à gauche tas de fainéants !*/
}
.PA-header {
font: 300 18px 'Oswald'; /* font du header */
text-align: center; /* On centre le texte */
text-transform: uppercase; /* On dit au texte de se mettre entièrement en majuscule */
margin: 0; /* On annule toute marge extérieure car on va utiliser les marges intérieures */
padding: 20px 0; /* Marge intérieure. Premier chiffre = haut et bas, second = droite et gauche */
}
.first-column {
padding-left: 20px; /* Ecart à gauche*/
width: 290px; /* Largeur */
}
.second-column {
padding: 0 20px; /* Ecart à gauche et à droite identique */
width: 250px; /* Largeur */
}
.individual-card {
background: #ffffff; /* background blanc */
margin-bottom: 20px; /* Marge exterieure en bas de 20px */
border-width: 0 0 0 5px; /* Ici on dit que la largeur de la bordure est de 0 en haut, 0 à gauche, 0 en bas et 5px à gauche (ordre des aiguilles d'une montre)*/
border-style: solid; /* Ici, on indique que la bordure sera un trait plein et non des tirets ou des points.*/
padding: 0 0 10px 0; /* Marge intérieure haut droite bas gauche */
}
.contexte {
border-color: #000000; /* Couleur de la bordure */
}
.top-sites {
border-color: #9b59b6; /* Couleur de la bordure */
}
.staff {
border-color: #1abc9c; /* Couleur de la bordure */
}
.news {
border-color: #f39c12; /* Couleur de la bordure */
}
.predefs {
border-color: #3498db; /* Couleur de la bordure */
}
.partenaires {
border-color: #e74c3c; /* Couleur de la bordure */
}
.PA-title {
font: 300 18px 'Oswald'; /* Font 300 = light, 18px = taille, puis la typo*/
text-transform: uppercase; /* On indique "Tout est en majuscule au niveau apparence" */
margin: 0; /* On annule les marges extérieures */
padding: 10px 0 0 20px; /* Marges interieures : 10 en haut, 0 à droite, 0 en bas, 20 à gauche */
}
.PA-text {
margin: 0 5px 0 0; /* On annule les marges extérieures sauf on met une à droite de 5px*/
padding: 10px 5px 10px 10px; /* Marges intérieures de 10px sauf à droite, on met 5px*/
overflow: auto; /* C'est là qu'on dit de se demmerder avec le contenu tant que ça rentre ! */
}
.contexte .PA-text {
height: 105px; /* Hauteur définie au paragraphe de texte. En gros, le p va toujours faire cette taille là ! Quelque soit le contenu du texte. */
}
.news .PA-text {
height: 155px; /* Hauteur définie au paragraphe de texte. En gros, le p va toujours faire cette taille là ! Quelque soit le contenu du texte. */
}
.top-sites .PA-text {
height: 15px; /* Hauteur définie au paragraphe de texte. En gros, le p va toujours faire cette taille là ! Quelque soit le contenu du texte. */
overflow: hidden; /* Overwriting : on dit "Toi spécialement, tu vas prendre ça comme effet."*/
}
Bien ! On a fini 2 de nos 6 cards et on a bien avancé sur la 3ème ! Que diriez vous de la terminer ? De toute façon, c'est moi le prof, vous suivez :troll: (Blague à part, faites toujours comme vous le sentez au début, mieux vaut un code fonctionnel que propre. Posez vous les questions pour pouvoir réaliser de telles choses et non comment le faire au mieux. Une fois que vous serez sûrs et certains de savoir réaliser des codes, là vous pourrez vous poser la question du comment je pourrais le faire en mieux.)
Bien, la dernière partie de la card top-sites comporte une petit touche supplémentaire : un effet de rollover (j'appelerai ça hover, ça sera plus simple pour nous de se comprendre si on parle la même langue :p). En effet, le cercle violet n'apparait que lorsque mon curseur survole le numéro !
On va commencer par créer l'élément dans le html. Ici, on voit que les tops forment un liste de nombre. Les éléments n'ont pas d'ordre précis (imaginons que l'on ai mis des images, on aurait pu intervertir sans dénaturer le contenu) contrairement par exemple à une leçon (oui oui, souvenez les I - 1 . a. de vos cours !). On va donc utiliser une liste non ordonnée
Comment ça s'écrit en HTML ? On commence par définir que notre block sera un block de liste avec la balise ul. Une fois cela fait, on va définir chaque élément comme étant un élément non ordonné avec li. En gros, un gros bloc qui contient qui sera notre liste et chaque nombre sera un élément de liste ! On oublie pas que chaque élément sera un lien ! En HTML donc :
- Code:
-
<ul class="top-sites-list">
<li class="top-sites-element"><a class="top-sites-link" href="#">1</a></li>
<li class="top-sites-element"><a class="top-sites-link" href="#">2</a></li>
<li class="top-sites-element"><a class="top-sites-link" href="#">3</a></li>
<li class="top-sites-element"><a class="top-sites-link" href="#">4</a></li>
</ul>
Prenez bien soin de ne pas oublier les class ! Encore une fois, le rendu sur la page HTML ne ressemble pas DU TOUT à ce que l'on veut. Mais pas grave, notre super ami le CSS arrive à la rescousse ! Là, on va commencer par retirer les marges (interieures et extérieures) et les points ! Car oui, là, notre liste à des puces ! Pour cela, on utiise la propriété list-style sur la liste ! (l'intérêt là n'est pas que vous reteniez tout de A à Z mais que vous sachiez que c'est possible, le reste viendra en codant !).
Ensuite, on voit bien que tout le texte de cette zone s'aligne vers le centre. On utlise quoi donc ? Oui, je l'ai entendu ! un text-align: center ! Exactement !
Donc, on va dans son petit CSS et on modifie le style !
- Code:
-
.top-sites-list {
margin: 0; /* Marges extérieures */
padding: 0; /* Marges intérieures*/
padding-top: 10px; /* Overwriting de la propriété juste au dessus. On ajoute ça pour bien avoir nos 20px d'écarts ! */
list-style: none; /* Je veux pas de tes puces de merde, ne stylise pas ma liste. Je le ferais comme un grand !*/
text-align: center; /* T'es gentil, tu t'alignes !*/
}
![[★★★☆☆][TUTO - TD] Coder sa P.A. de A à Z ! AbCkMBR](https://i.imgur.com/AbCkMBR.png)
Bon là, notre liste ne ressemble pas encore à ce que l'on veut mais on approche du but ! Vous vous rappelez comment on avait aligné les éléments sur la gauche avec nos colonnes ? C'était pratique non ? Dommage, ça ne va pas marcher là ! Enfin, ça va les aligner... Mais sur la gauche ! Or on les veut au centre ! Et bah, je vais vous donner une autre propriété spéciale. LA propriété magique : le display inline-block !
Que va faire cette propriété ? Elle va dire à mon block "Ok, t'es un block mais au lieu de prendre toute la largeur comme d'habitude et pousser les autres en-dessous, tu vas prendre pile la place dont t'as besoin et laisser les autres venir !". C'est un peu comme quand vous arrêtez de faire votre loque sur le canapé, vous vous asseyez et laissez un peu de place pour les autres.
Cette propriété, on va la mettre sur les éléments. Car oui, c'est pas au canapé de s'agrandir mais à vous de bouger votre cul ! Ca donne donc :
- Code:
-
.top-sites-element {
display: inline-block; /* Arrêtez de vous allonger, on s'asseoit sur le canapé ! */
}
Ok ! On va maintenant styliser les liens ! On enlève leur couleur de merde, leur soulignement et on prévoit la taille qu'il faut pour le cercle ! Pour ça, on va mettre encore notre propriété magique du display: inline-block !
Ca tombe bien, je vais pouvoir vous expliquer qu'il y a différents types de balises ! En HTML, il y a grosso-modo 2 types de balise : les block (ce que l'on utilise en général comme les div ou les p) et les inline (comme les strong).
Les block fonctionnent comme des ... blocs... En fait, ils prennent automatiquement toute la largeur et n'autorise personne à se mettre à côté d'eux (et ce même s'il y a de la place. Et oui, de gros enfoirés !) à moins que l'on ne force. C'est le cas des div par exemple.
Les inline eux, sont tout gentil et prennent juste la place qu'ils ont besoin et donc les autres peuvent se mettre à côté. Le problème avec les inline, c'est qu'ils sont tellement gentils qu'ot ne peut pas les forcer à prendre une certaine hauteur et largeur. En gros, même si on lui dit "T'es gentil tu me gardes la place", il pourra pas !
C'est là qu'apparaît le style hybride. L'inline-block. On ne le rencontre pas sous sa forme sauvage, il n'existe qu'en captivité (comprenez qu'en gros, on ne peut le faire que via du CSS). Il a la particularité d'être assez gentil pour prendre juste la place dont il a besoin et laisser les autres se mettre à côté à moins que l'on ne lui demande. L'ami parfait en somme.
Voilà pourquoi on utilise l'inline-block sur nos liens ici ! On veut qu'ils prennent juste la bonne forme mais il faut quand même qu'ils soient carrés pour pouvoir mettre un cercle véritable dedans ! Donc on attaque !
- Code:
-
.top-sites-link {
display: inline-block; /* Le meilleur ami au monde ! */
padding: 1px 0; /* Préparation de la taille en hauteur */
width: 20px; /* Largeur pour le cercle */
color: #000000; /* On enlève la couleur de la typo */
text-decoration: none; /* On enlève le soulignement ! */
}
Du coup, notre case top site à exactement la tête que l'on voulait ! Elle est pas ... Ah ? On me signale qu'il manque un petit truc. Le fond violet ? Ah ça, c'est un état hover !
On traduit état hover par "à quoi ça ressemble quand j'ai mon curseur dessus". Du coup, c'est le moment d'utiliser :hover. Ce petit morceau est ce que l'on appelle une pseudo-classe. En gros, ça nous permet d'accéder à un état ou élément du HTML sans passer par son nom ! C'est magique non ? Non ? Et bien si ! Avec ça, on va pouvoir faire en sorte que notre lien ai un vsage différent, que l'on soit au survol ou non. ET OUI !
Une démonstration vaut bien milles discours donc, je vous montre ! Rajoutez dans votre css :
- Code:
-
.top-sites-link:hover {
background-color: #9b59b6;
color: #ffffff;
}
Magique, vous avez 2 états différents maintenant ! Votre lien a un visage différent que l'on ai la souris dessus ou non. Mais c'est pas totalement ce que l'on voulait et c'est assez agressif comme changement non ?
Pour avoir un cercle et pas un carré, on va utiliser la propriété css border-radius ! Elle permet d'arrondir les angles (en gros, elle transforme les angles en cercles qui ont un certain rayon. Plus le rayon est grand, plus notre carré ressemblera à un cercle !)
Concernant l'apparition, on va utiliser ce qui s'appelle une transition. La transition, c'est, comme son nom l'indique, ce qui va nous permettre de définir la transition qui s'effectue entre 2 états.
Du coup, notre css ressemble maintenant à :
- Code:
-
.top-sites-link {
display: inline-block; /* Le meilleur ami au monde ! */
padding: 1px 0; /* Préparation de la taille en hauteur */
width: 20px; /* Largeur pour le cercle */
color: #000000; /* On enlève la couleur de la typo */
text-decoration: none; /* On enlève le soulignement ! */
border-radius: 50%; /* On veut un cercle parfait donc 50% ! (Pas besoin de se faire chier à calculer le rayon comme ça)*/
transition: 300ms all ease; /* Une transition qui dure 300ms, qui se fait sur toute les propriétés (all) et qui suit une courbe de type ease (Je ferrais un autre cours sur les transition pour approfondir ! N'hésitez pas à me le demander !)*/
}
.top-sites-link:hover {
background-color: #9b59b6; /* Au hover, j'ai un fond différent !*/
color: #ffffff; /* Et je change aussi de couleur de typo ! */
}
Si vous avez bien suivi, vous avez dû voir quelque chose de pas net : Pourquoi on met la transition et le contour arrondi sur l'état normal et pas hover ? Et bien, parce que si on le mettait sur le hover, la transition ne se ferait que quand l'état de départ est au hover, pas dans le sens contraire ! Et pour le border-raidus, parce que j'avais pas envie que l'on voit notre carré devenir circulaire (et une flemme incommensurable de mettre la transition juste sur les propriétés qu'il fallait...)
La suite dans la partie 2 !
Accueil 
![[★★★☆☆][TUTO - TD] Coder sa P.A. de A à Z ! Xa7XzoA](https://i.imgur.com/Xa7XzoA.png)
![[★★★☆☆][TUTO - TD] Coder sa P.A. de A à Z ! 8SK8TrV](https://i.imgur.com/8SK8TrV.png)
![[★★★☆☆][TUTO - TD] Coder sa P.A. de A à Z ! LHi8rR2](https://i.imgur.com/LHi8rR2.png)
![[★★★☆☆][TUTO - TD] Coder sa P.A. de A à Z ! Hj1GzPV](https://i.imgur.com/Hj1GzPV.png)
![[★★★☆☆][TUTO - TD] Coder sa P.A. de A à Z ! 5p0jnJF](https://i.imgur.com/5p0jnJF.png)
![[★★★☆☆][TUTO - TD] Coder sa P.A. de A à Z ! UpYSWb1](https://i.imgur.com/UpYSWb1.png)
