avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Mar 17 Juil 2018 - 18:03
Si Art te montre comment faire des fiches je vois pas trop ce qu'on fait dans ce cours franchement, ça perd tout son intérêt.
Surtout si tu peux faire du box-sizing et du flex, on dirait qu'on perd notre temps avec les bases et tout.


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Mar 17 Juil 2018 - 22:11
En fait je lui avait demander ce qu’il fallait faire pour ces fiches et elle m’a montrer mais j’avoue ne pas avoir tout compris car la plupart des balises et notions utilisées pour moi était inconnu ...
je suis désolée si ça t’as blessée que je fasse ça avec d’autres.. :(


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Mer 18 Juil 2018 - 13:58
Double post :

J'ai fini l'exercice !

Le code est un peu plus bas :3


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Mer 18 Juil 2018 - 23:02
Coucou :3

Je vois que tu as même fait la transformation, c'est cool. As-tu des questions là-dessus ?

Tu as mis le titre et l'image ensemble dans une div. J'aurais mis un h1 mais bon c'est pas faux non plus.
Les polices ne fonctionnent pas sur le forum, c'est normal t'en fais pas. C'est à cause d'un bug qui fait que le mot "script" dans le nom de la police est mal interprété. Si tu mets une police qui a un nom différent, ça devrait fonctionner normalement.

Donc pour le bloc parent, y a juste la hauteur qui fait que la div ne sera pas ajuster selon le contenu.

Code:
.Titre_image img {
  display: block;
  margin: -18px auto 0;
  transform: skew(0deg, 0deg);
ici tu as utilisé une transformation sur l'image. Une inclinaison (skew) de 0 degré. Donc logiquement si tu inclines quelque chose de 0 degré c que tu n'as rien changé. Donc la transformation ne sert à rien ici.

Dans le html les div premier_bloc et deuxieme_bloc comporte exactement la même chose. Tu peux leur donner le même nom de classe pour éviter de répéter le CSS inutilement.
La différence entre un nom de class et un id est que les classes peuvent être utilisées sur plusieurs éléments, alors que l'id est unique.
Donc ici on a deux blocs avec exactement le même CSS. Il suffit de leurs donner le même nom de class et mettre le CSS en une seule fois.

Ma dernière remarque concerne le background violet. Cette couleur est appliquée uniquement à la zone du texte donc il sera plus logique de l'appliquer au paragraphe et non à la div premier_bloc.
Tu peux aussi ajouter un padding pour éviter que le texte soit collé aux bords.




avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Jeu 19 Juil 2018 - 14:37
Hey !
J'ai apporté quelques modifs mais y'a un espace entre la titre et le paragraphe qui est apparu et je ne sais plus comment l'enlever >_<

https://codepen.io/laura-pamart/pen/pZbjyZ


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Jeu 19 Juil 2018 - 19:30
L'espace est apparu parce que h3 a une marge par défaut, il faut donc l'enlever :3
Tu as enlevé la marge par défaut du paragraphe avec auto mais pas celle du titre :3


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Jeu 19 Juil 2018 - 19:35
Ah ! C'est régler maintenant !

https://codepen.io/laura-pamart/pen/pZbjyZ


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Jeu 19 Juil 2018 - 19:39
C'est bien mais maintenant c collé à ta citation, tu peux lui ajouter une marge de bas :3


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Jeu 19 Juil 2018 - 19:48
Aaaah bah là normalement c'est bon XD


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Jeu 19 Juil 2018 - 21:43
Yeah c'est bonbon chocolat :p

Tu veux essayer de le mettre sur le forum pour voir si ça bug pas dessus ?

Sinon tu as des questions ? Y a des choses que tu comprends pas ?


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Ven 20 Juil 2018 - 6:46
Yep !

Nope j'ai pas de questions, j'ai plutôt bien compris le transform :3

Code:
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet"><div class="Bloc_Exercice"><div class="Titre_image"> Grand Titre <img src="https://redcdn.net/hpimg15/pics/183098minibaann.png" class="imt1"/></div><div class="Bloc_RP"><h6>Une petite phrase qui devrait être un peu longue</h6><div class="Premier_Bloc"><h3>Premier sous titre</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dui arcu, euismod nec condimentum non, suscipit sit amet nisl. Nullam augue lorem, placerat id mi in, tincidunt rhoncus mi. Suspendisse nulla erat, tincidunt sed massa porttitor, lobortis tempus odio. Fusce auctor in mi et gravida. Integer eget sem aliquam, placerat turpis non, eleifend lacus. </p></div><div class="Premier_Bloc"><h3>Deuxième sous titre</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dui arcu, euismod nec condimentum non, suscipit sit amet nisl. Nullam augue lorem, placerat id mi in, tincidunt rhoncus mi. Suspendisse nulla erat, tincidunt sed massa porttitor, lobortis tempus odio. Fusce auctor in mi et gravida. Integer eget sem aliquam, placerat turpis non, eleifend lacus. </p></div></div><div class="Credits">Codage par Caroline</div></div><style>.Bloc_Exercice{margin:0 auto;width:500px;background:#f3a367;overflow:hidden}.Titre_image{margin:-18px auto 0;width:500px;height:200px;background:#f5f5dc;transform:skew(0deg,4deg);font-family:'Kaushan Script',cursive;text-align:center;font-size:30px;color:#765b7e;line-height:90px}.Titre_image img{display:block;margin:-18px auto 0}.Bloc_RP h6{width:400px;margin:30px auto 0;border-bottom:1px solid #f5f5dc;font-size:12px;color:#f5f5dc;text-align:center;padding:2px;margin-bottom:15px}.Premier_Bloc{width:450px;height:200px;margin:auto;color:#f5f5dc}.Premier_Bloc h3{background:#f5f5dc;color:#765b7e;text-align:center;text-transform:uppercase;font-family:'Kaushan Script',cursive;margin:auto}.Premier_Bloc p{background:#765b7e;padding:20px;margin:auto}.Credits{width:150px;margin:10px auto;text-align:center;background:#e5e1d4}</style>

Grand Titre
Une petite phrase qui devrait être un peu longue

Premier sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dui arcu, euismod nec condimentum non, suscipit sit amet nisl. Nullam augue lorem, placerat id mi in, tincidunt rhoncus mi. Suspendisse nulla erat, tincidunt sed massa porttitor, lobortis tempus odio. Fusce auctor in mi et gravida. Integer eget sem aliquam, placerat turpis non, eleifend lacus.

Deuxième sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dui arcu, euismod nec condimentum non, suscipit sit amet nisl. Nullam augue lorem, placerat id mi in, tincidunt rhoncus mi. Suspendisse nulla erat, tincidunt sed massa porttitor, lobortis tempus odio. Fusce auctor in mi et gravida. Integer eget sem aliquam, placerat turpis non, eleifend lacus.

Codage par Caroline


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Ven 20 Juil 2018 - 12:59
C'est parfait :3

As-tu un modèle que tu veux travailler ?


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Sam 21 Juil 2018 - 15:59
Merci ♥️

Yep j'aimerais bien travailler cette fiche en la faisant entièrement sans m'inspirer de celle que m'avait fait Arte :



Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Sam 21 Juil 2018 - 16:45
D'accord ça marche !

On va traiter notre schéma comme une sorte de tableau. On a donc à première vue un grand titre et deux blocs l'un au dessous de l'autre.

Pour le bloc du bas (relations) qui est le plus simple, nous avons un titre et 4 blocs dans chacun une image et un paragraphe.

Pour le bloc du haut on a deux grands blocs, le premier contient l'image et un bloc pour les informations et le deuxième contient 3 blocs avec un titre et un paragraphe dans chacun.

Je te laisse donc créer tout ça en suivant ces étapes en HTML.
Là où il y a aura un bloc (une div) n'oublie pas d'ajouter un nom de class


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Sam 21 Juil 2018 - 18:15
C'est du bon travail :3

Pour les blocs dans relations, il n'y a aucun différence entre eux donc on va leur donner le même nom de classe pour maintenant pour ne pas répéter le CSS. Et il me semble que tu as oublié la zone du texte dans ces blocs là.

Sais-tu ce qu'est une liste non ordonnée ?


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Sam 21 Juil 2018 - 18:21
Merci **

Ah oui, en effet j'avais oublié la zone de texte !

Yep j'ai lu le tuto dessus y'a pas longtemps !


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Sam 21 Juil 2018 - 18:32
D'accord, dis moi donc tout ce que tu as retenu dessus.
Et on va transformer la partie informations en liste en gardant les span qui vont servir pour le CSS.


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Sam 21 Juil 2018 - 18:47
Lorsque l'on utilise une liste désordonnée, la seule différence avec l'ordonnée est que le symbole change. Pour l'ordonné ce sont des chiffres alors que ce sont des points qui s'affiche pour la désordonnée.

La balise pour l'ordonnée est "ol" tandis que pour la désordonné c'est "ul" et c'est elle qui définissent comment sera la liste après on utilise la balise "li" pour lister.

D'accord ! Je m'en occupe dès que j'ai fini ce que je fait !


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Sam 21 Juil 2018 - 20:27
D'accord préviens moi quand c'est fait :3


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Dim 22 Juil 2018 - 15:57
C'est bon j'ai mis la liste ! Désolé pour l'attente >_<

https://codepen.io/laura-pamart/pen/yqgxXR?editors=1000


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Dim 22 Juil 2018 - 16:06
C'est très bien.
Normalement la liste est un bloc donc tu peux mettre la class directement dans ul et enlever la div.

Tu peux déjà faire un peu de mise en forme, ajouter les couleurs de fond, mettre en forme le texte et définir une largeur à ton bloc parent.
On va aussi mettre une hauteur et largeur à notre liste pour qu'elle aie les mêmes dimensions que notre avatar.


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Dim 22 Juil 2018 - 17:48
Voilà j'ai avancé un peu mais je me suis retrouvée bloquer à partir du moment où il fallait mettre tous les blocs l'un à côté de l'autre >_<

https://codepen.io/laura-pamart/pen/yqgxXR?editors=1100


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Dim 22 Juil 2018 - 18:20
Je ne sais pas si tu l'as remarqué mais tous les titres sans exception sont les mêmes sur le schéma, c'est exactement la même taille et la même mise en forme. Donc un seul niveau suffit. Tu peux mettre par exemple h3 pour tous les titres et mettre le CSS une seule fois dans .Fiche_Predef h3 ça te permettra de raccourcir ton CSS et tu auras moins de travaille ainsi.

Même chose pour le CSS des paragraphes. La seule différence est la taille des paragraphes de chaque bloc.
Donc tu peux mettre en forme tout à la fois sauf la largeur et la hauteur dans .Fiche_Predef p
Après tu peux mettre les dimensions selon les parties. mental p, physique p, a_savoir p et Premiere_Rela p

Il y a des propriétés dont je ne comprends pas l'intérêt, je te laisse donc m'expliquer pourquoi tu as mis ça. C'est donc les display: block, visibility et opacity.

A par ça tout est bon :3


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Mer 25 Juil 2018 - 10:33
Hey ! Désolée pour le retard mais j'étais, et je suis encore, sur une fiche de présentation à remplir donc >_<

Pour le display: block je sais plus pourquoi je l'avais mis mais pour le visibility c'est pour cacher le bloc des infos normalement présent sur le vava pendant que je fait le reste de la fiche et l'opacity c'est pour définir la transparence du bloc ^^


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum