avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 177
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Lun 30 Avr 2018 - 18:25
Boooon, comme d'habitude, je suis pas capable de faire peu, alors j'ai déjà pas mal avancé la fiche, en faisant le maximum que je pouvais faire, ahah... mais c'est pas mal brouillon je crois XD Alors voila un premier jet, du coup :



J'ai juste pas mis le titre sur le côté parce que je sais trop comment faire, et je crois que les vertical-align ça marche pas ? J'ai jamais su faire fonctionner ce truc mais du coup j'comprends pas comment j'dois faire ?_?

Elle veut mon code pour l'utiliser sur son forum après, c'est ça ? Je suis d'accord oui, ça me ferait même très plaisir, mais seulement si mon code est pas trop mauvais, sinon je m'en voudrais x'3
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2160
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Dim 6 Mai 2018 - 18:47
Coucou,

Je m'excuse pour le retard, j'étais malade. Au fait j'ai prévenu sur discord mais tu n'y es pas et j'ai pas pu passée sur le forum, désolée. A propos, si tu as discord et que tu veux rejoindre le salon du forum préviens-moi, je t'enverrai le lien.

Je vois que tu as fait du très bon travail, je savais que tu voudrais tout faire de toi-même, bravo.
Pour le titre on va utiliser une transformation et on le positionnera en absolu à droite de la fiche.

Code:
-webkit-transform: rotate(90deg);
 transform: rotate(90deg);
On va voir toutes les transformations après ce chapitre.

Attention au premier et dernier bloc qui devrait contenir une liste.
La première liste est sur la maquette divisée en deux colonnes, pour ce faire, on va utiliser une propriété spéciale qui donne cette effet de texte dans un journal :
Code:
 -webkit-column-count: 2;
  column-count: 2;

le chiffre défini le nombre de colonnes qu'on veut.

La propriété vertical-align est une propriété spécialement utilisée avec la déclaration "display: inline-block" ou dans les tableaux et donc il ne fonctionnera pas autrement. ça sera comme mettre clear sans float ou z-index sans position.
Ici on va donc utiliser la propriété "line-height" qui sert à espacer du texte mais c'est surtout parce que tu as un seul mot. Sinon on peut utiliser simplement un padding vertical.

ça devrait corriger tous les petits soucis visuels.
Je passe alors à ce qui est technique.

Je ne l'ai pas précisé avant mais en général, on préfère garder les éléments dans le flux autant que possible. Donc on positionne ce qui doit forcément l'être.
Dans ce genre de schéma, il est plus commun de partager le travail par lignes ou colonnes selon la structure.
Ici en regardant le schéma on voit 4 grands blocs disposés horizontalement ou 4 grandes sections.
Là où il y a du contenu caché qui s'affiche avec le hover, on est obligé d'utiliser le positionnement en absolu pour superposer les deux blocs qui apparaissent à la même position avec et sans hover.
Donc ça se passe dans la partie "Nom et prénom" et dans la partie "physique / caractère"
Si on mets ces deux parties dans un bloc chacune qui sera en référence. Les deux autres parties seront dans le flux et tu n'auras pas besoin de les positionner. Un simple margin: auto suffira pour les mettre au bon endroit.

Je reviens alors au bloc 3 et donc physique / caractère. Ici encore on a deux blocs côte à côte donc on pourra juste les mettre en inline-block ou en float pour les juxtaposer et mettre chacun des deux dans un bloc de références pour positionner son contenu.

Tu va me dire, pourquoi avoir autant de blocs ? Bah simplement parce qu'en CSS on cherche toujours à nous faciliter la vie et non à la compliquer. Si on va galérer à calculer un top : 368px ça en vaut pas la peine. Et j'insiste sur le fait qu'on va faire en sorte de garder les éléments dans le flux tant que possible. Donc une div qui prend toute la largeur est dans un contexte normal, on va pas la positionner en absolu alors qu'il est plus simple de la garder dans le flux.

Voici un petit exemple : Positionnement
Je te laisse donc voir tout ça

Edit : Ah j'ai oublié la classe du crédit. Attention on ne met pas d'accent dans les noms de classes et id.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 177
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 8 Mai 2018 - 3:55
@Reine des Ténèbres a écrit:Je ne l'ai pas précisé avant mais en général, on préfère garder les éléments dans le flux autant que possible.
C'est justement la question que je me posais quand j'avais commencé à coder ma fiche, et la raison pour laquelle j'étais vraiment pas sûre de moi. Ça me paraissait un peu bizarre en effet x'3

Du coup, voilaa, j'ai tout corrigé !!

Toujours au même lien : http://toraion.forumactif.org/t60-code-predefinis-makeincount#145



Donc voillla, j'ai corrigé les petits soucis visuels, j'ai changé le nom de la classe des crédits, et j'ai tout bien remis dans le flux. J'ai rajouté des blocs référents pour les parties "nom et prénom" et "physique et caractère", si j'ai bien compris ce que tu entendais par "bloc en référence", mais je crois que oui ? J'ai pas réussit à placer physique et caractère avec un float et un inline-block de sorte à c'que ça fonctionne, alors je les ai laissé en position:absolute, mais bien dans leur bloc référence, alors je pense que c'est bon quand même ? :3

(Au fait, pour Discord, oui, j'en ai un mais je m'y connecte pas très très souvent parce que ça bug un peu chez moi et j'ai pas vraiment de raisons d'y aller vu que je suis sur aucun serveur et que j'ai mes amis proches sur Skype, mais ça me plairait bien de rejoindre le serveur du forum, si y a pas trop de monde dessus !)
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2160
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Mar 8 Mai 2018 - 22:43
Coucou,

C'est beaucoup mieux, bon travail !

Dans.prez_nom et .prez_infos je vois un z-index qui sert à rien. Tu as deux blocs un visible l'autre invisible. Au hover le visible devient invisible et l'autre apparaît donc on n'a pas de problème d'affichage causé par la superposition des deux blocs. Le z-index est plus intéressant sur l'image parce qu'elle est toujours visible et elle doit être toujours au dessus des deux autres blocs.

Pour le bloc de la description tu peux le garder comme ça c'est bon aussi. Au cas où tu voudrais savoir pourquoi le float n'a pas fonctionné, au fait tu as mis les deux "ronds" dans un bloc que tu as positionné en relatif. Si tu veux utiliser le float ou le display inline-block, chaque "rond" doit être dans un bloc séparé et positionné chacun en relatif, ces deux blocs seront alors en float left pour physique et float right pour caractère, ou en inline-block avec un margin.

Sinon pour le bloc biographie, le petit triangle gêne la lecture au scroll. Pourquoi ne pas mettre le scroll uniquement sur le paragraphe ? Je ne sais pas si tu t'en rappelles je t'avais dit que pour moi l'avantage d'utiliser la balise p est de mettre un overflow dessus dans le CSS sans chercher à savoir c'est où sur le schéma. donc ça va réduire considérablement tes lignes CSS.

Je ne sais pas si tu as remarqué mais il nous reste une dernière modification au niveau de la barre de défilement.
Ce qu'il y a à savoir est que les propriétés CSS qui visent à personnaliser la barre de défilement ne sont pas officielle et donc ne sont pas supportées par tous les navigateurs. Ils fonctionnent uniquement sur les navigateur Webkit comme Chrome et Safari mais pas sur les navigateurs Gecko comme Firefox ni sur IE d'ailleurs. Donc pour toi et moi qui utilise FF c'est mort xD.

Ceci dit j'ai Chrome en version portable (parce que installer deux navigateurs en plus d'Edge et IE qui sont intégrés c trop pour l'ordi), c'est utile dans ce genre de cas et aussi pour vérifier la compatibilité du code avec le navigateur. Tu peux l'avoir sur ce site.

Donc pour personnaliser la barre de défilement on utilise des sélecteurs spéciaux, qui sont au fait des pseudo-éléments :  
   ::-webkit-scrollbar > la barre de défilement entière.
   ::-webkit-scrollbar-button > les flèches haut et bas.
   ::-webkit-scrollbar-thumb > l'ascenseur coulissant.
   ::-webkit-scrollbar-track > la piste.

Exemples



avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 177
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 9 Mai 2018 - 23:55
Oh, bah le triangle blanc, je trouve pas ça dérangeant, moi ? Je vois ce que tu veux dire oui, alors j'ai mis la barre de défilement au p (et dans la liste dans le dernier bloc aussi, en passant), mais là pour le coup, j'aime pas trop, je trouve que c'est plus joli si la barre de défilement prends toute la hauteur du bloc :/

J'avais pensé du coup à remettra la barre de défilement pour le bloc puis si c'est vraiment dérangeant le triangle, soit le faire disparaitre au survol, soit mettre un fond rose au paragraphe, pour qu'il cache le triangle quand il passe dessus du coup ? J'sais pas, j'crois que c'est des mauvaises idées XD

Enfin faut voir, y a peut-être qu'à moi que ça plait pas comme ça hein x)

Breeef, donc mon HTM a pas changé, voila le nouveau css :

Code:
/* CODE FICHE MAKEINCOUNT */

.prez_titre {
  font-family: 'Cinzel', serif;
  font-size:40px;
  color:white;
  text-shadow:1px 0px pink;
  letter-spacing:12px;
  text-transform:uppercase;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  position:absolute;
  left:342px; top:210px;
}
  
.prez {
  background-image:url('https://www.zupimages.net/up/18/17/rrqu.png');
  width:550px; height:1000px;
  margin:auto; position:relative;
}
.prez *::-webkit-scrollbar {
  width : 3px;
  background-color:white;
}
.prez *::-webkit-scrollbar-thumb {
  background-color:#d8ecfc;
}

.prez h2 {
  color:white;
  font-family: 'Cinzel', serif;
  font-size:22px;
  font-weight:normal;
  letter-spacing:1px;
  text-align:center;
  text-decoration:underline;
  margin-bottom:0px;
}

.prez p , .prez ul {
  color:white;
  font-family:Times;
  font-size:15px; line-height:18px;
  text-align:justify;
  margin:0px;
  overflow:auto;
  list-style-type:circle;
}

.prez_bloc1 {
  position:relative;
  height:215px;
}

.prez_img {
  position:absolute;
  width:210px; height:210px;
  z-index:2;
  border-radius:200px;
  border:2px solid white;
  box-shadow:0px 0px 5px pink;
}

.prez_nom, .prez_infos {
  position:absolute;
  top:6px; right:25px;
}
.prez_nom {
  z-index:0;
  width:315px;
  text-align:center;
  vertical-align: middle;
  font-size:50px; line-height:60px;
  font-family: 'Cinzel', serif;
  color:white;
  text-shadow:0px 0px 3px pink;
  height:170px; padding-top:30px;
}

.prez_infos {
  z-index:1;
  opacity:0;
  transition:0.5s;
  width:335px; padding-left:85px;
  background-color:#fabae5;
  height:200px; overflow:auto;
}

.prez_infos:hover {
  opacity:1;
}

.prez_infos ul {
  -webkit-column-count: 2;
  column-count: 2;
}

.prez_bio {
  margin:40px auto 0px;
  width:500px; height:250px;
  overflow:auto;
  background-color:#fabae5;
  background-image:url('https://www.zupimages.net/up/18/17/co6g.png');
  background-repeat:no-repeat;
}
.prez_bio p {
  height:196px; padding:0px 5px;
}

.prez_bloc2 {
  height:234px;
  margin:50px auto 0px;
  width:500px;
  position:relative;
}

.prez_phys, .prez_carac, .prez_phys_titre, .prez_carac_titre {
  position:absolute; top:0px;
  width:230px; height:230px;
  border-radius:200px;
  border:2px solid white;
  background-color:#fabae5;
}
.prez_phys p , .prez_carac p {
  margin:35px;
  height:160px;
  overflow:auto;
  padding-right:3px;
}
.prez_phys, .prez_phys_titre { left:0px; }
.prez_carac, .prez_carac_titre { right:0px; }
.prez_carac, .prez_phys {   opacity:0; transition:0.5s; z-index:1; }
.prez_carac:hover, .prez_phys:hover { opacity:1 }
.prez_phys_titre, .prez_carac_titre { line-height:180px; }

.prez_infos2 {
  margin:50px auto 0px;
  width:500px; height:150px;
  overflow:auto;
  background-color:#fabae5;
  background-image:url('https://zupimages.net/up/18/18/6o4y.png');
  background-position:bottom right;
  background-repeat:no-repeat;
}
.prez_infos2 ul {
  padding-left:20px; height:96px;
}

.prez_credits {
  margin:auto;
  text-align:center;
  background-color:white;
  color: #B2E2FA;
  width:250px; height:15px;
  font-size:11px;
  font-family:Arial;
  font-style:italic;
}
.prez_credits a {
  color: #B2E2FA !important;
}

Du coup faut ouvrir sur Chrome pour voir ma barre ~
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2160
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Jeu 10 Mai 2018 - 1:12
Oh elle zouli la barre de navigation ! A chaque fois que je vois ça je me dis que je suis bête de choisir FF comme navigateur mais bon l'amour rend aveugle ce n'est pas une scrollbar qui va m'ouvrir les yeux /pan.

Bah écoute, perso j'aurais pas mis le triangle en background mais ce n'est pas faux non plus. La beauté du CSS est qu'il y a beaucoup de façon de faire et donc une multitude de choix. Donc ma façon aurait été le pseudo-élément "::before".
Maiiiis attends on a pas vu les pseudo-éléments ? Oh je viens de voir qu'on a pas fait les pseudo-éléments !
*pauvre Tigrlion qui est coincée avec une prof amnésique et indigne*
*tousse* mais c'est ta faute tu ne m'as pas rappelé qu'on a sauté les pseudo-éléments xD

Remédions vite à ça !

On va donc utiliser ::before qui fonctionne de la même façon que ::after. On peut aussi utiliser ::after pour le triangle du dernier bloc d'ailleurs. Les trois autres pseudo-éléments sont faciles à appliquer.

En réalité c'est simple aussi. Ces deux PE permettent au fait d'ajouter du contenu avant ou après un élément via le CSS. On va donc ajouter quelque chose qui n'est pas mise dans le HTML. Généralement ces des décorations comme dans ce cas ou des mots genre une remarque ou autre.
Pour ce faire on utilise une propriété spécifique qui ne fonctionne qu'avec les sélecteurs ::before et ::after. C'est la propriété "content" littéralement contenu, rien d'extraordinaire.

Exemples

Donc pour la fiche, j'aurais ajouter le triangle via content en url et l'aurait placé à l'extrême gauche avec le float ou en absolute top et left à 0.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 177
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 10 Mai 2018 - 17:54
Oooh, mais j'avais pas capté qu'on avait pas vu les pseudos-éléments, j'en ignorais l'existence ! Et quand t'as parlé de pseudo-éléments pour la scrollbar, j'ai pas tiqué, j'ai confondu avec pseudo-classe je crois !
J'avoue, j'me disais bien que c'était marrant tiens, qu'il y ai deux fois les deux points, mais je me suis pas posé plus de questions

En parlant de la scrollbar d'ailleurs, comme je l'ai fait, elle ne sera que sur la fiche de présentation, mais si on écrit ça comme ça à la place, ça affectera tout le forum, je crois ? (enfin, oui, je sais, j'ai fait des tests et ça marche effectivement, mais je disais ça juste pour proposer, si Chhaya veut avoir la barre sur tout son forum)

Code:
*::-webkit-scrollbar {
  width:3px; background-color:white;
}
*::-webkit-scrollbar-thumb {
  background-color:#d8ecfc;
}

Breeeef, du coup, j'ai mis le triangle de la biographie avec le pseudo-élement before et j'ai remis la barre de défilement sur le bloc entier, et pour les infos complémentaires aussi (mais j'ai laissé le triangle en background là), là c'est parfait, j'suis bien plus satisfaite :3

Duu couuup, je crois que c'est terminnééé ? J'ai rien oublié ? :c

Code:
.prez_titre {
  font-family: 'Cinzel', serif;
  font-size:40px; color:white;
  text-shadow:1px 0px pink;
  letter-spacing:12px;
  text-transform:uppercase;
  -webkit-transform: rotate(90deg); transform: rotate(90deg);
  position:absolute; left:342px; top:210px;
}
 
.prez {
  background-image:url('https://www.zupimages.net/up/18/17/rrqu.png');
  width:550px; height:1000px;
  margin:auto; position:relative;
}
.prez *::-webkit-scrollbar {
  width:3px; background-color:white;
}
.prez *::-webkit-scrollbar-thumb {
  background-color:#d8ecfc;
}

.prez h2 {
  font-family: 'Cinzel', serif;
  font-size:22px; color:white;
  font-weight:normal; text-decoration:underline;
  letter-spacing:1px;
  text-align:center;
  margin-bottom:0px;
}

.prez p , .prez ul {
  color:white; font-family:Times;
  font-size:15px; line-height:18px;
  text-align:justify;
  margin:0px 5px;
  list-style-type:circle;
}

.prez_bloc1 {
  position:relative;
  height:215px;
}

.prez_img {
  position:absolute;
  width:210px; height:210px;
  z-index:2;
  border-radius:200px;
  border:2px solid white;
  box-shadow:0px 0px 5px pink;
}

.prez_nom, .prez_infos {
  position:absolute;
  top:6px; right:25px;
}
.prez_nom {
  width:315px;
  text-align:center;
  font-size:50px; line-height:60px;
  font-family: 'Cinzel', serif;
  color:white; text-shadow:0px 0px 3px pink;
  height:170px; padding-top:30px;
}

.prez_infos {
  opacity:0; transition:0.5s;
  width:335px; padding-left:85px;
  background-color:#fabae5;
  height:200px; overflow:auto;
}

.prez_infos:hover {
  opacity:1;
}

.prez_infos ul {
  -webkit-column-count: 2; column-count: 2;
}

.prez_bio {
  margin:40px auto 0px;
  width:500px; height:250px;
  overflow:auto;
  background-color:#fabae5;
  position:relative;
}
.prez_bio::before {
  content:url('https://www.zupimages.net/up/18/17/co6g.png');
  position:absolute; top:0px; left:0px;
}

.prez_bloc2 {
  width:500px; height:234px;
  margin:50px auto 0px;
  position:relative;
}

.prez_phys, .prez_carac, .prez_phys_titre, .prez_carac_titre {
  position:absolute; top:0px;
  width:230px; height:230px;
  border-radius:200px;
  border:2px solid white;
  background-color:#fabae5;
}
.prez_phys p , .prez_carac p {
  margin:35px; padding-right:3px;
  height:160px; overflow:auto;
}
.prez_phys, .prez_phys_titre { left:0px; }
.prez_carac, .prez_carac_titre { right:0px; }
.prez_carac, .prez_phys {  opacity:0; transition:0.5s; z-index:1; }
.prez_carac:hover, .prez_phys:hover { opacity:1 }
.prez_phys_titre, .prez_carac_titre { line-height:180px; }

.prez_infos2 {
  margin:50px auto 0px;
  width:500px; height:150px;
  overflow:auto;
  background-color:#fabae5;
  background-image:url('https://zupimages.net/up/18/18/6o4y.png');
  background-position:bottom right;
  background-repeat:no-repeat;
}
.prez_infos2 ul {
  padding-left:20px;
}

.prez_credits {
  margin:auto;
  text-align:center;
  background-color:white;
  width:250px; height:15px;
  color: #B2E2FA; font-size:11px;
  font-family:Arial; font-style:italic;
}
.prez_credits a {
  color: #B2E2FA !important;
}
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2160
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Ven 11 Mai 2018 - 18:58
Ah j'ai cherché les vertical-align mais ils ne sont plus là x)

Je crois que tout est bon. Y a juste la mention !important à la toute fin dont je suis curieuse. ça devrait fonctionnait sans.

Pour la police, il vaut mieux mettre 'Times New Roman' ou sinon : serif. Quand il y a plus d'un mot on met entre deux apostrophes. La police Times existe aussi mais c'est une police native sur Mac. Tu vas me dire mais ça fonctionne sur ton PC. Bah c'est quand même la police par défaut sur la plupart des navigateurs donc tu peux mettre dans font-family :Tigrlion; ça sera toujours remplacer par la police serif basique qu'est 'Times New Roman' et ce n'est pas pour autant que ta déclaration est correcte.

Je vois que tu as fusionné beaucoup de règles ce qui réduit la quantité du CSS donc c'est très bien. Il reste quand même beaucoup de déclarations en doubles mais si on laisse ainsi, ça ne nous empêchera pas de dormir la nuit non plus, donc bon.

Edit : Ah la barre de défilement j'ai failli l'oublier. Donc oui tu peux mettre ça ainsi ça va fonctionner sur tout le forum. Le seul souci que je trouve perso c'est la barre de défilement de toute la page, à 2 ou 3 px c'est minuscule.
Et pour le sélecteur c'est juste mais l'étoile est optionnelle, ça fonctionne sans de la même façon.

Tu as bien réussi ta première commande non officielle, bravo !

Edit 2 : Ah j'ai une idée mais je n'ai pas encore testé.

Code:

::-webkit-scrollbar {
    width: 10px;
}
body ::-webkit-scrollbar {
    width: 3px;
}
::-webkit-scrollbar,
body ::-webkit-scrollbar {
    background-color: #fff;
}

ça devrait faire en sorte que la barre soit petite sur tous les overflow du forum mais assez grande sur toute la page vu que le body contient tout le contenu de la page. Je te laisse tester ça si tu veux.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 177
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 11 Mai 2018 - 23:58
Ah, la mention !important, je sais pas, une habitude je sais pas pourquoi, je met toujours !important quand je change la couleur des liens, pour pas que la couleur par défaut prenne le dessus ? Je savais pas que ça fonctionnait sans ! :c Je l'enlève !

Du coup j'ai tout corrigé, et ton idée pour la barre de défilement fonctionne ! o/

Est-ce que je devrais envoyer le code à Chhaya du coup ?
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2160
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Mar 15 Mai 2018 - 14:44
Hello :3

Oui tu peux l'envoyer si tu le souhaites :3

La mention important est difficile à outrepasser du coup on l'évite autant que possible. Le choix des sélecteurs dépend du schéma en "cascade" qui caractérise le CSS.

Dans mon code body ::-webkit-scrollbar est inutile pour le background au fait vu que le ::-webkit-scrollbar englobe le tout.

Alors veux-tu qu'on refait la PA de l'exo que tu avais fait en tableau ? ça sera pratique vu que tu as déjà le CSS de fait.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 177
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 15 Mai 2018 - 20:30
Pour la refaire sans tableau ? Ouais, ça me parait une bonne idée !
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2160
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Mar 15 Mai 2018 - 21:06
Vas-y alors. Bon courage :3

Envoyé depuis l'appli Topic'it


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 177
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 16 Mai 2018 - 21:01
Voila mon résultat du coup : https://codepen.io/anon/pen/VxErwM?editors=1100

Les codes:

Code:
#PA {
  background-color:#444a73;
  padding:15px; width:645px;
}

#cel-1 {
  width:200px; height:350px; padding:10px 5px 40px;
  background-color:white;
  border-radius: 100px 100px 25px 25px/35px 35px 25px 25px;
  text-align:center;
  float:left;
}

#cel-2 { width:420px; height:400px; overflow:hidden;
  text-align:center; display:inline-block;
margin-left:15px; }

.petittitre {
  font-family: 'Times New Roman';
  font-size:25px; text-transform:uppercase;
  color:steelblue; margin-top:15px;
  text-shadow: 0px 0px 4px black; }

.bienvenue {
  font-family: 'Times New Roman';
  font-size:50px; text-transform:uppercase;
  color:steelblue; margin-bottom:5px;
  text-shadow: 0px 0px 4px black;
}

.blocblanc {
  background-color:white;
  color:black; text-align:justify;
  padding:5px; height:90px; width:410px;
  overflow:auto; margin-bottom:10px;
  font-family:Verdana; font-size:12px;
}

.news {
  height:155px; overflow:auto;
}
.news div {
  color:white; font-size:11px;
  font-family:'Times New Roman';
  text-align:left;
  padding:2px;
  text-transform:uppercase;
}
.news div:nth-child(n) { background-color:#444a73; }
.news div:nth-child(2n) { background-color:steelblue;}

.cel-lien {
  background-color:white;
  border-radius:15px;
  font-size:25px;
  text-transform:uppercase;
  font-family: 'Times New Roman';
  display:inline-block;
  width:135px; margin-bottom:10px;
}

.cel-lien a {
  text-decoration:none;
  color:steelblue; transition:0.5s;
}
.cel-lien a:hover {  text-shadow: 0px 0px 4px black;
  transition:1s;}

.img-staff { border:3px solid #444a73;
border-radius:15px;}

.img-opacity {opacity:1; transition:0.5s; }
.img-opacity:hover {opacity:0.7; transition:1s;}

.credits { font-family:Verdana;
font-size:11px; margin:10px; text-align:center; }
.credits a { color:white; transition:0.5s;}
.credits a:hover { color:white; text-shadow: 0px 0px 2px black; transition:1s; }
Code:
<div id="PA">

  <div id="cel-1">

    <div class="petittitre">
      Notre staff
    </div><a href="http://epicode.bbactif.com"><img src="http://zupimages.net/up/17/30/6nbj.png"  alt="staff" class="img-opacity img-staff" /></a> <a href="http://epicode.bbactif.com"><img src="http://zupimages.net/up/17/30/6nbj.png" class="img-opacity img-staff" /></a>    <a href="http://epicode.bbactif.com"><img src="http://zupimages.net/up/17/30/6nbj.png" class="img-opacity img-staff" /></a> <a href="http://epicode.bbactif.com"><img src="http://zupimages.net/up/17/30/6nbj.png" class="img-opacity img-staff" /></a>    <a href="http://epicode.bbactif.com"><img src="http://zupimages.net/up/17/30/6nbj.png" class="img-opacity img-staff" /></a> <a href="http://epicode.bbactif.com"><img src="http://zupimages.net/up/17/30/6nbj.png" class="img-opacity img-staff" /></a>
    <div class="petittitre">
      Nouveautés
    </div>
    <div class="news">
      <div>
        xx.xx.xx New
      </div>

      <div>
        xx.xx.xx New
      </div>

      <div>
        xx.xx.xx New
      </div>

      <div>
        xx.xx.xx New
      </div>

      <div>
        xx.xx.xx New
      </div>

      <div>
        xx.xx.xx New
      </div>

      <div>
        xx.xx.xx New
      </div>

      <div>
        xx.xx.xx New
      </div>

      <div>
        xx.xx.xx New
      </div>
    </div>
  </div>
  <div id="cel-2">
    <div class="bienvenue">Bienvenue</div>

    <div class="blocblanc">
      Texte premier bloc
    </div>

    <div class="blocblanc">
      Texte second bloc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer purus lectus, dignissim a fermentum vel, dictum id magna. Praesent varius, mi sit amet laoreet gravida, augue eros faucibus urna, hendrerit euismod quam mauris nec purus.
      Donec sed bibendum tortor. Donec sed luctus mi. Quisque porta felis dui. Pellentesque risus nibh, consequat ac luctus at, tempor tincidunt sem. Vivamus id pulvinar felis.
    </div>

    <div class="cel-lien">
      <a href="http://epicode.bbactif.com">Lien</a>
    </div>

    <div class="cel-lien">
      <a href="http://epicode.bbactif.com">Lien</a>
    </div>

    <div class="cel-lien">
      <a href="http://epicode.bbactif.com">Lien</a>
    </div>

    <a href="http://epicode.bbactif.com"><img src="http://zupimages.net/up/17/30/juzn.png" alt="partenaire" class="img-opacity" /></a> <a href="http://epicode.bbactif.com"><img src="http://zupimages.net/up/17/30/juzn.png" alt="partenaire" class="img-opacity" /></a>    <a href="http://epicode.bbactif.com"><img src="http://zupimages.net/up/17/30/juzn.png" alt="partenaire" class="img-opacity" /></a> <a href="http://epicode.bbactif.com"><img src="http://zupimages.net/up/17/30/juzn.png" alt="partenaire" class="img-opacity" /></a>    <a href="http://epicode.bbactif.com"><img src="http://zupimages.net/up/17/30/juzn.png" alt="partenaire" class="img-opacity" /></a> <a href="http://epicode.bbactif.com"><img src="http://zupimages.net/up/17/30/juzn.png" alt="partenaire" class="img-opacity" /></a>    <a href="http://epicode.bbactif.com"><img src="http://zupimages.net/up/17/30/juzn.png" alt="partenaire" class="img-opacity" /></a> <a href="http://epicode.bbactif.com"><img src="http://zupimages.net/up/17/30/juzn.png" alt="partenaire" class="img-opacity" /></a>    </div>
  <div class="credits"><a href="http://epicode.bbactif.com">Tigrlion | Epicode</a></div>

</div>

J'ai même changé un peu les news, en virant les deux classes "news1" et "news2" pour mettre juste une seule classe "news" et utiliser la pseudo-classe nth-child pour le changement de couleur, tout en ajoutant une barre de défilement parce que y en avait pas. Et j'ai corrigé d'autres détails sans importance par-ci par-là, mais c'pas important.
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2160
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Jeu 17 Mai 2018 - 0:36
Coucou,

C'est tellement cool ! J'aime bien l'idée du nth-child n et 2n, à titre informatif tu peux aussi mettre les mots even et odd qui veulent littéralement dire pair et impair.

Niveau HTML je vois que tu as tout mis en div mais bon ce n'est pas grave.
Je vois que tu as utilisé des id, ce qui n'est pas faux vu qu'il n'y a qu'une seule et unique PA sur le forum.

Il y a un choix au niveau du positionnement de cel-1 et cel-2 que je ne comprends pas au fait, pourquoi l'une est en float et l'autre en inline-block ?

Je sais que tu as du reprendre ton ancien code donc la fusion des sélecteurs qui ont les mêmes déclarations n'est pas spontanée. Mais je voulais juste te faire remarquer qu'à première vu la maquette n'utilise que deux couleurs de fonds, deux types de polices et deux couleurs d'écriture avec tous les titres et les liens en uppercase donc ça sera plus pratique de mettre ce qui se ressemble ensemble ça t'évitera de répéter les mêmes lignes plusieurs fois.

J'aurais même créé une class du genre

Code:
.titles { 
  text-transform: uppercase;
  font-family: "Times New Roman";
  color: steelblue;
}

Comme tu le sais, les éléments peuvent avoir plus d'une class.

Sinon c'est très bien, je n'ai pas grand chose à dire, bravo


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 177
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 17 Mai 2018 - 20:12
Pour le float et le inline-block, en fait, quad j'avais mis les deux en inline-block, ils ne se mettaient pas côte à côte, je comprenais pas trop pourquoi, donc j'ai mis le premier en float et là ils se sont bien mis à côté comme je voulais donc j'ai laissé comme ça.

Mais du coup, j'ai ré-essayé, en réduisant la valeur du margin-left de cel-2 ça les as bien mis à côté même avec les deux en inline-block mais ça rendait pas pareil, du coup j'ai changé pour mettre les deux en float, à gauche et à droite, et là ça marche bien comme je veux aussi. C'est pas mauvais comme ça ?
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2160
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Sam 19 Mai 2018 - 13:10
Si tes éléments sont en inline-block mais ne sont pas côte à côte c'est que ton bloc parent n'est pas assez large. Il suffit donc d'augmenter la largeur du bloc parent pour conserver tes marges.

Perso ne m'aime pas trop le inline-block, je l'utilise très peu, donc j'aurais mis les deux en float aussi. Mais ça reste un choix personnel du coup tu peux aussi utiliser le inline-block, faut juste choisir l'un ou l'autre plutôt que de mettre l'un en float et l'autre en display. L'avantage d'utiliser le float left/right et que tu positionnes tes éléments à l'extrême gauche et l’extrême droite respectivement donc l'espace être les deux sera générer automatiquement selon la largeur du bloc parent. Si tu mets les deux en float left ou les deux en inline-block tu vas devoir gérer l'espace entre les deux blocs grâce aux marges.

Je ne sais pas si ce que je dis a du sens pour toi, est-ce que c'est clair ?


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 177
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 19 Mai 2018 - 22:29
Oui oui, t'inquiète pas, c'est très clair x'3
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2160
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Dim 20 Mai 2018 - 18:32
Super !

Voyons donc en détails, les transformations et les transitions.

Je suis sûre que tu as déjà utiliser des transitions pour fluidifier le changement au hover. Et on eu la chance de voir comment faire une rotation de 90 degré dans la fiche de Chhaya.
Je te laisse alors examiner ces tutoriels d'abord et si tu as du mal ou tu as des questions, n'hésite pas, on va voir ça en détails ensemble s'il le faut.

Les transformations
Les transitions


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 177
Membre timide
Voir le profil de l'utilisateur
Woh, les transitions c'est beaucoup plus complet que ce que je pensais, je vais avoir du mal à retenir tout ça ! Mais je crois que j'ai tout compris :3
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum