avatar
Sexe : Masculin
Date d'inscription : 12/02/2018
Messages : 320
Ancien.ne du Staff
Voir le profil de l'utilisateur
# Cours d'Ishile Sam 4 Aoû 2018 - 22:50
Bonjour élève préféré :)
Voici ta salle de classe !


Mon niveau en code : Designer  Débutant ++
Je sais faire une fiche simple (sans effet au survol) :
oui
Je sais faire une fiche compliquée (effet survol, sans l'utilisation de table) :oui
Je sais modifier un template : non
Je sais utiliser un javascript : non etjeveuxpas

Mon dernier code (ou tentative de code) :
Code:
<style>.bck{margin:auto;width:530px;min-height:120px;background-color:#F2F3F3;border-radius:10px;}.liensk{margin-left:15px;float:left;width:100px;padding:5px;}.liensk img{padding:5px;border-radius:50%;}.liensk img:hover{background-color:#E8E9E9;box-shadow:0 1px 0 rgba(255,255,255,.4);}.liensk h1{opacity:0;}.liensk:hover h1{display:block; width:100px;height:210px;background-color:#E8E9E9;top:100;left:20;opacity:1;text-align:justify;font-size:10px;overflow:auto;padding:10px;}.liensk span{opacity:0;}.liensk:hover span{font-style: normal;display: block;margin-top:10px;padding: 5px;color: #000;border: 1px solid lightgrey;background:#E8E9E9;width:110px;border-radius:10px;text-align:center;opacity:1;}.credit{text-align:center;font-size:8px;text-transform:uppercase;}</style><div class="credit"><a href="http://www.epicode-entraide.com">Kuro sur Epicode</a></div><div class="bck"><div class="liensk"> <img src="http://via.placeholder.com/100x100"/><span>Nom prénom</span><h1>C'est à ce moment-là que j'ai tout foutu en l'air. Quand j'ai vu ses yeux se braquer sur moi, l'intensité de merde qu'ils s'y reflétaient. Je crois que j'aurai pu tout cassé, tout brisé, d'un battement de cils. Mais je suis resté là, à la fixer, comme si ma vie en dépendait.</h1></div><div class="liensk"> <img src="http://via.placeholder.com/100x100"/><span>Nom prénom</span><h1>C'est à ce moment-là que j'ai tout foutu en l'air. Quand j'ai vu ses yeux se braquer sur moi, l'intensité de merde qu'ils s'y reflétaient. Je crois que j'aurai pu tout cassé, tout brisé, d'un battement de cils. Mais je suis resté là, à la fixer, comme si ma vie en dépendait.</h1></div><div class="liensk"> <img src="http://via.placeholder.com/100x100"/><span>Nom prénom</span><h1>C'est à ce moment-là que j'ai tout foutu en l'air. Quand j'ai vu ses yeux se braquer sur moi, l'intensité de merde qu'ils s'y reflétaient. Je crois que j'aurai pu tout cassé, tout brisé, d'un battement de cils. Mais je suis resté là, à la fixer, comme si ma vie en dépendait.</h1></div><div class="liensk"> <img src="http://via.placeholder.com/100x100"/><span>Nom prénom</span><h1>C'est à ce moment-là que j'ai tout foutu en l'air. Quand j'ai vu ses yeux se braquer sur moi, l'intensité de merde qu'ils s'y reflétaient. Je crois que j'aurai pu tout cassé, tout brisé, d'un battement de cils. Mais je suis resté là, à la fixer, comme si ma vie en dépendait.</h1></div></div>

Le niveau que je souhaiterais atteindre : Savoir coder des templates sans mettre 3 jours (Intermédiaire + ?)



Comme convenu ensemble, on va faire un petit cours sur le flexbox.

A quoi sert le flexbox ?
Le flexbox sert à aligner des éléments horizontalement, ou globalement à définir le positionnement des div enfants dans le div parent. Il s'applique à l'élément parent/l'élément conteneur sous cette forme :
Code:
display:flex;

D'autres propriétés viennent compléter ce display. Les plus importantes sont :

Code:
flex-wrap: nowrap ou wrap ou wrap-reverse;
nowrap : les éléments enfants s'aligneront horizontalement sans prendre en compte la largeur de l'élément parent (et pourront donc sortir de son cadre)
wrap : les éléments enfants s'aligneront dans la limite de l'élément parent. Si les enfants sont trop large, les derniers blocs reviendront à la ligne.
voir +

Code:
flex-direction: row ou row-reverse ou column ou column-reverse;
Row/Row-reverse permet un alignement horizontale, column et column-reverse vertical. Le reverse permet d'inverser l'ordre.



Voilà ! Maintenant, on va essayer un petit exercice pratique : je voudrais que tu reprennes ton code donné lors de ton inscription et que tu essais d'aligner les ronds grace au flex. Si tu as besoin de plus d'information, dis le moi
avatar
Sexe : Masculin
Date d'inscription : 29/08/2012
Messages : 198
Membre timide
Voir le profil de l'utilisateur
# Re: Cours d'Ishile Dim 5 Aoû 2018 - 14:33
Hello !

Voici mon résultat !

Code:
<style>.bck{margin:auto;width:530px;min-height:120px;background-color:#F2F3F3;border-radius:10px;display:flex;flex-wrap:wrap;flex-direction:row;}.liensk{margin-left:15px;width:100px;padding:5px;}.liensk img{padding:5px;border-radius:50%;}.liensk img:hover{background-color:#E8E9E9;box-shadow:0 1px 0 rgba(255,255,255,.4)}.liensk h1{opacity:0;}.liensk:hover h1{display:block; width:100px;height:210px;background-color:#E8E9E9;top:100;left:20;opacity:1;text-align:justify;font-size:10px;overflow:auto;padding:10px;}.liensk span{opacity:0;}.liensk:hover span{font-style: normal;display: block;margin-top:10px;padding: 5px;color: #000;border: 1px solid lightgrey;background:#E8E9E9;width:110px;border-radius:10px;text-align:center;opacity:1;}.credit{text-align:center;font-size:8px;text-transform:uppercase;}</style><div class="credit"><a href="http://www.epicode-entraide.com">Kuro sur Epicode</a></div><div class="bck"><div class="liensk"> <img src="http://via.placeholder.com/100x100"/><span>Nom prénom</span><h1>C'est à ce moment-là que j'ai tout foutu en l'air. Quand j'ai vu ses yeux se braquer sur moi, l'intensité de merde qu'ils s'y reflétaient. Je crois que j'aurai pu tout cassé, tout brisé, d'un battement de cils. Mais je suis resté là, à la fixer, comme si ma vie en dépendait.</h1></div><div class="liensk"> <img src="http://via.placeholder.com/100x100"/><span>Nom prénom</span><h1>C'est à ce moment-là que j'ai tout foutu en l'air. Quand j'ai vu ses yeux se braquer sur moi, l'intensité de merde qu'ils s'y reflétaient. Je crois que j'aurai pu tout cassé, tout brisé, d'un battement de cils. Mais je suis resté là, à la fixer, comme si ma vie en dépendait.</h1></div><div class="liensk"> <img src="http://via.placeholder.com/100x100"/><span>Nom prénom</span><h1>C'est à ce moment-là que j'ai tout foutu en l'air. Quand j'ai vu ses yeux se braquer sur moi, l'intensité de merde qu'ils s'y reflétaient. Je crois que j'aurai pu tout cassé, tout brisé, d'un battement de cils. Mais je suis resté là, à la fixer, comme si ma vie en dépendait.</h1></div><div class="liensk"> <img src="http://via.placeholder.com/100x100"/><span>Nom prénom</span><h1>C'est à ce moment-là que j'ai tout foutu en l'air. Quand j'ai vu ses yeux se braquer sur moi, l'intensité de merde qu'ils s'y reflétaient. Je crois que j'aurai pu tout cassé, tout brisé, d'un battement de cils. Mais je suis resté là, à la fixer, comme si ma vie en dépendait.</h1></div></div>
avatar
Sexe : Masculin
Date d'inscription : 12/02/2018
Messages : 320
Ancien.ne du Staff
Voir le profil de l'utilisateur
# Re: Cours d'Ishile Jeu 9 Aoû 2018 - 17:28
Salut !
Comme dit sur Discord, ton code est top, tu as bien compris le flex :).
On va passer a un exercice plus concret pour voir. Voici une maquette d'une PA. Je veux que tu utilises le flex pour placer les éléments.
https://zupimages.net/up/18/32/xbun.png

Utilises les couleurs/images/polices qui te plaisent. La seule chose : ne fais pas cet exercice que pour le flex. Je veux aussi des transitions au top et un joli code !
avatar
Sexe : Masculin
Date d'inscription : 29/08/2012
Messages : 198
Membre timide
Voir le profil de l'utilisateur
# Re: Cours d'Ishile Mar 21 Aoû 2018 - 15:10
Wahhh ça commence à dater. Shame on me.
Petit mot pour te dire que je n'oublies pas et que je te fais ça rapidement. ♥️
avatar
Sexe : Masculin
Date d'inscription : 29/08/2012
Messages : 198
Membre timide
Voir le profil de l'utilisateur
# Re: Cours d'Ishile Mer 12 Sep 2018 - 12:47
Bon, visiblement je n'arrive pas à me pencher dessus. Je sais pas ce qui coince, peut-être que je vois ça comme plusieurs heures de taff et j'ai actuellement pas le temps de m'y pencher, ni la motivation.

Du coup, je ne veux pas te faire perdre de temps et je préfère demander la clôture du cours pour l'instant. Je reviendrais vers toi quand j'aurais de nouveau le temps/l'envie.

Merci du temps que tu as investis et de m'avoir au moins appris quelque chose ( ce qui n'était pas gagné haha ) ♥️
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum