AccueilAccueil  Epic'Top  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

classe 2 - Sleepy Hollow
 :: Codage :: Entraînement :: Cours :: Classe Jamy
Aller à la page : Précédent  1, 2
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2698
Mar 16 Mai 2017 - 20:39
@Sleepy Hollow je suis vraiment super désolé pour le délai de non réponse ... :s
si tu es tjrs intéressée par ces cours, je te répondrai avec grand plaisir à ton message, on peut mettre recommencer un autre code si le coeur t'en dis au cas où celui ci est complètement dépassé ... :/

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

avatar
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 18/01/2017
Messages : 26
Dim 21 Mai 2017 - 9:27
Coucou ^^

Pas grave ne t'en fais pas.
Oui je suis toujours intéressée :) . Je veux bien terminer celui-ci, enfin que je sache si ce que j'ai fait est bon ^^ .

Passes un bon dimanche !
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2698
Jeu 25 Mai 2017 - 17:39
Hey ! :)

Alors, je repars sur ton dernier message ! :)


Citation :
Ah le margin-top négatif n'est pas quelque chose à utiliser ? Enfin c'est pas « conventionnel » pour un navigateur ( Je ne trouve pas vraiment le mot ) ?
>> oui on évite au maximum dès que c'est possible, car ça fait trop bidouille ! ^^


Alors pour ton code :
pour la partie basse, c'est parfait ! Juste ces css
Code:
display: inline-block; vertical-align:middle;
ne te servent à rien dans le code ! ;)

Ensuite, pour le haut, c'est pas mal, mais là, tu as une bordure tout autour de ton cadre, d'où l'effet que y'a un creux entre ... Personnellement j'aurai ajouté un top à la bordure, pour n'avoir qu'une bordure, mais ça c'est mon avis ^^

Mais oui, il faut y aller à tatton, c'est le problème de la technique ... Et tu vas devoir l'adapter pour la longueur de chaque texte ... Cela étant dit, oui tu vas devoir faire attention à la place que tu as dans ton cadre de message pour ajuster la largueur du cadre, mais ça sera obligatoire, puisque ce cadre est lui même contenu dans un autre élément de toute façon ! :)

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

avatar
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 18/01/2017
Messages : 26
Sam 27 Mai 2017 - 11:09
Coucouuu !

Merci pour ta réponse ^-^ ! J'ai eu peur en voyant que l'ensemble des cours n'existait plus hormis le tien, je pensais que tu n'allais pas poursuivre.

Alors, j'ai profité de cette longue pause pour tout relire depuis le début et me remettre dans le bain ^^ .

Je remets mon dernier code qui consiste à remplacer les fieldsets en effaçant donc le display et vertical-align qui effectivement ne servent à rien maintenant que tu me le dis ^^ :

Code:
<div style="border: 1px solid #B8B8BA; height:0; width:30px; margin-right: 3px; display: inline-block; vertical-align:middle;"></div>Texte<div style="border:1px solid #B8B8BA; height:0; width:591px; margin-left: 3px; display: inline-block; vertical-align:middle; "></div><div style="border-left:1px solid #B8B8BA; border-bottom:1px solid #B8B8BA; border-right:1px solid #B8B8BA; height:225px; width:662px; margin-top: -7px; padding: 8px 5px; overflow : auto;">Bla bla bla</div>


Citation :
>> oui on évite au maximum dès que c'est possible, car ça fait trop bidouille ! ^^

D'accord x) .

Citation :
Ensuite, pour le haut, c'est pas mal, mais là, tu as une bordure tout autour de ton cadre, d'où l'effet que y'a un creux entre ... Personnellement j'aurai ajouté un top à la bordure, pour n'avoir qu'une bordure, mais ça c'est mon avis ^^

Mais oui, il faut y aller à tatton, c'est le problème de la technique ... Et tu vas devoir l'adapter pour la longueur de chaque texte ... Cela étant dit, oui tu vas devoir faire attention à la place que tu as dans ton cadre de message pour ajuster la largueur du cadre, mais ça sera obligatoire, puisque ce cadre est lui même contenu dans un autre élément de toute façon ! :)

Alors là par contre, je n'ai pas trop compris ^^' . Je ne vois pas ce que tu veux dire le fait que j'ai une bordure autour du cadre. Il y a que le bord dans mon code pourtant. Ou tu parles une fois cette partie placée dans tout le formulaire ?
Avec le top j'ai pas compris du tout non plus. Je pense qu'il faudrait une illustration parce que je suis paumée x) .
Et la seconde partie, lorsque tu dis qu'il va falloir l'adapter pour la longueur de chaque texte et faire attention à place que j'ai dans le cadre est tout aussi flou :/ .


Autre question :

Autrement, je sais qu'on a peut-être pas tout à fait fini avec l'autre code mais j'en profite pour une autre question qui n'a rien à voir avec ce code mais un autre que j'ai essayé de faire cette semaine, pour une mise en page de RP. Voici déjà le code que j'ai fait ( les couleurs, tailles et marges seront probablement modifiées ) :

Code:
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
<style>.bordure{border: 2px solid #6C2D0E; width: 600px ; height: 840px; border-radius: 15px 0px; box-shadow: 3px 2px 5px white; margin: 0 auto; background-color: #9A6D4B;} .image{border: 2px solid #6C2D0E; width: 420px; height: 150px; text-align: center; margin: 15px auto;} .title{font-family: Dancing Script; font-size: 60px; color:  #331600; text-shadow: -5px 2px 10px white; text-align: center; display: block;} .featuring{font-family: Dancing Script; font-size: 20px; color:  #331600; text-shadow: -5px 2px 10px white; text-align: center; display: block;} .contenurp {border: 1px solid white; width: 475px; height: 450px; background-color: #FFCDA6; font-family: Dancing Script; font-size: 19px; text-align: justify; margin: 15px auto; padding: 7px 7px; border-radius: 0px 0px 15px 15px; overflow: auto;} .copyright{font-size: 10px; color: black; text-align: right; margin-top: 10px; padding-right: 25px}</style>

<div class="bordure"><div class="image"><img src="http://vignette2.wikia.nocookie.net/harrypotter/images/2/2e/Poudlard_chateau.jpg/revision/latest?cb=20110905115319&path-prefix=fr" alt="Image illustrant le RP" style="width: 418px; height: 150px;" /></div><span class="title">Titre</span><span class="featuring">ft. XXX</span><img src="http://vignette1.wikia.nocookie.net/mogapedia/images/a/a0/Fatalis.png/revision/latest?cb=20140821095514&path-prefix=fr" alt="Petite deco" style="position: absolute; width: 50px; height: 50px; " /><div class="contenurp">Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test. Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test. Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test. Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test. Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test. Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test. Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test.</div>
 <div class="copyright">© Sleepy Hollow</div></div>

Il est possible que je me sois trompée, fort possible même haha x) . Surtout que j'ai utilisé la position absolute sans vraiment la connaître, mais je souhaitais positionner une image près du cadre pour le contenu du RP. Bref quoi qu'il en soit je me suis servie de tes conseils, ... pour que la façon de faire soit celle « conventionnelle » .
Bref, j'ai fait ce code au fur et à mesure sur le site que tu m'as donné : codepen.io . En mettant ce code dans HTML, il s'affiche correctement, comme je le voudrais, avec la bonne police, …
Malheureusement, en le mettant dans l'éditeur de forumactif, il m'est apparu comme... Horrible ! Les marges n'étaient plus respectées et la police d'écriture ne s'affiche pas... Ce qui m'a complètement frustré, vu le temps que j'y ai passé... Voici le résultat :

Aperçu:
 

Par contre, j'ai essayé en mettant directement la police dans le span class du titre en ajoutant "style" et là, ça a marché, mais tu as dis que c'était mieux de séparer et que c'était normalement ainsi qu'on codait donc j'aimerais que ça fonctionne ainsi. Est-ce que tu sais pourquoi cela ne fonctionne pas ? Pourtant j'ai essayé de modifier des trucs mais rien y fait alors je commence à désespérer x) . Cela marchait pourtant cette méthode avec mon autre code... Alors pourquoi pas ici ?


Passes une bonne journée :D !
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2698
Dim 28 Mai 2017 - 13:35
Citation :
Merci pour ta réponse ^-^ ! J'ai eu peur en voyant que l'ensemble des cours n'existait plus hormis le tien, je pensais que tu n'allais pas poursuivre.
oui c'est qu'on est en pénurie de codeurs et que ceux présents ont pas forcément le temps/envie de donner des cours, mais moi pour le moment, je continue, j'aime bien partager les connaissances ! :)

Citation :
Alors là par contre, je n'ai pas trop compris ^^' . Je ne vois pas ce que tu veux dire le fait que j'ai une bordure autour du cadre. Il y a que le bord dans mon code pourtant. Ou tu parles une fois cette partie placée dans tout le formulaire ?
Avec le top j'ai pas compris du tout non plus. Je pense qu'il faudrait une illustration parce que je suis paumée x) .
Et la seconde partie, lorsque tu dis qu'il va falloir l'adapter pour la longueur de chaque texte et faire attention à place que j'ai dans le cadre est tout aussi flou :/ .
Pas de soucis, je recommence !!! ^^

schéma :


là, tu vois, y'a 2 lignes, c'est parce que ta div tu as :  (rouge)
Code:
<div style="border: 1px solid #B8B8BA;
alors que si tu avais un border-top, ça serait plus fin, juste 1 et pas le petit vide entre... Je trouve que ça serait mieux! Mais si tu aimes ainsi, ça va ^^

(vert) pour l'espacement trop large, c'est que la div ne va pas jusqu'au bout, mais si le mot texte est plus long, essayes avec un truc plus long, tu vas voir la div après va dépasser le cadre. Ce que je disais c'est que tu allais devoir faire à taton pour trouver la bonne largeur qu'il faut avec le bon texte ... Mais malheureusement, y'a pas moyen de voir pour autrement ...


2em fiche :
Alors, excuses moi j'ai peut être pas été assez clair dans mes explications ... :s
L'idée de séparer le CSS et HTML est définitivement une super pratique à appliquer!! Et bravo pour ça, c'est très bien fait ! Pour tes messages importants postés avec maitre du jeu, les fiches de liens, de présentation etc... ça va te permettre d'écrire une fois le code et ça sera bon pour la suite. Cela étant dit pour les RP, ça pose plus de soucis qu'autres choses... Car il faut penser à minifier le CSS et gérer les espacements...

En fait, le code HTML ne gère aucun espace. tu peux faire des retours à la ligne pour aérer ton code, alors que si tu le fais ici, dans FA, le retour à la ligne va être interprété, et te créer une marge. D'où il faut compresser tout ton code HTML pour le mettre sur FA... Pareil, tu uilises très bien le CSS, mais le problème c'est que FA ne supporte aucun espace/retour à la ligne sinon, il plante.

Pour compresser ton code, je te propose juste de le minifier, y'a plein de site sur google qui le fait par exemple:
https://cssminifier.com/

tu colles le code, et ça te sors la version parfaite qui plantera pas ! :)
tu peux faire pareil avec le HTML (faut juste choisir un HTML minifier), mais en vrai, c'est moins galère de supp et coller les div que le CSS ^^

Pour les polices, fait attention à bien mettre les quote autours, de bien écrire comme c'est écrit sur le site de google font, c'est important pour que les navigateurs retrouves les polices !

et normalement, y'a tout qui devrait fonctionner :




Image illustrant le RP
Titreft. XXXPetite deco
Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test. Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test. Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test. Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test. Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test. Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test. Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test.



bon je viens de corriger, et en effet, y'a tjrs un pbm de police ... je vais me renseigner, car là je vois pas du tout ! Et je regarderai le code dans le détail ce soir pour voir si y'a des amélioration à apporter là j'ai pas assez de tps, sorry !!!

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

avatar
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 18/01/2017
Messages : 26
Dim 28 Mai 2017 - 22:21
Hey ^^

Merci d'avoir répondu aussi vite :) !

Citation :
oui c'est qu'on est en pénurie de codeurs et que ceux présents ont pas forcément le temps/envie de donner des cours, mais moi pour le moment, je continue, j'aime bien partager les connaissances ! :)

D'accord, je comprends ^^ . En tout cas c'est chouette que tu continues :) !


Merci beaucoup pour les nouvelles explications avec les schémas, j'ai beaucoup mieux compris :) . En fait je pensais qu'en mettant juste border sans hauteur c'était considéré comme un unique trait. Du coup je comprends maintenant pourquoi le trait du haut, pourtant défini à 1px comme les autres, apparait plus gros ! J'ai donc modifié le code ;) .

Code:
<div style="border-top: 1px solid #B8B8BA; height:0; width:30px; margin-right: 3px; display: inline-block; vertical-align:middle;"></div>Texte<div style="border-top: 1px solid #B8B8BA; height:0; width:591px; margin-left: 3px; display: inline-block; vertical-align:middle; "></div><div style="border-left:1px solid #B8B8BA; border-bottom:1px solid #B8B8BA; border-right:1px solid #B8B8BA; height:225px; width:662px; margin-top: -8px; padding: 8px 5px; overflow : auto;">Bla bla bla</div>


Citation :
(vert) pour l'espacement trop large, c'est que la div ne va pas jusqu'au bout, mais si le mot texte est plus long, essayes avec un truc plus long, tu vas voir la div après va dépasser le cadre. Ce que je disais c'est que tu allais devoir faire à taton pour trouver la bonne largeur qu'il faut avec le bon texte ... Mais malheureusement, y'a pas moyen de voir pour autrement ...

Effectivement j'ai essayé avec un texte plus long et ça décale le trait du haut qui dépasse donc du trait de droite. C'est logique en fait puisqu'il a une longueur définie, mais c'est vrai que si tu ne me l'avais pas dit je n'y aurais absolument pas pensé. Dans ce cas je ferais à vue d’œil pour d'autres codes similaires si j'y suis un jour confrontée ^^ .


2ème fiche :

Merci d'y avoir déjà jeté un coup d’œil :) .

Tes explications étaient très claires dans l'ensemble ^^ . Ce que je n'avais pas compris je te l'ai dit à chaque fois, comme mon précédent message avec les dernières modifications du code ci-dessus ^^ .

Merci beaucoup :) . Du coup au niveau du code en lui-même, enfin au niveau de sa structure, c'est juste, ça me rassure haha x) .

Citation :
En fait, le code HTML ne gère aucun espace. tu peux faire des retours à la ligne pour aérer ton code, alors que si tu le fais ici, dans FA, le retour à la ligne va être interprété, et te créer une marge. D'où il faut compresser tout ton code HTML pour le mettre sur FA... Pareil, tu utilises très bien le CSS, mais le problème c'est que FA ne supporte aucun espace/retour à la ligne sinon, il plante.

Oui effectivement, FA tient compte des sauts de ligne du coup c'est plus « compliqué » au niveau des marges mais ça encore je peux faire à vue d’œil. Ce qui m'a le plus posé problème c'est la police d'écriture puis que « ft. XXX » soit sur le titre, mais bon pour ça j'ai compris que c'était un souci de marge étant donné que je n'en ai spécifié aucune. Même si sur codepen.io c'était séparé, probablement parce que j'ai mis « display: block » donc même si j'ai mis span au lieu de div ça a séparé, enfin je suppose. Mais sur FA non. Enfin tu t'y connais mieux que moi alors je vais te laisser me dire ce que tu en penses x) .
Normalement je n'ai pas mis d'espace mal adapté.

Mais quand tu dis qu'il faut compresser le code (j'ai d'abord cru que tu parlais d'héberger le CSS comme certains le font), c'est pour qu'il y ait moins de lignes ? Parce que j'ai testé mais ça me semble toujours aussi long. Et je comprends pas trop pourquoi parce que dans mon code, j'ai tout mis à la suite je crois hormis le copyright.

Citation :
tu peux faire pareil avec le HTML (faut juste choisir un HTML minifier), mais en vrai, c'est moins galère de supp et coller les div que le CSS ^^

Pourquoi c'est moins galère ? Je crois que je n'ai pas trop compris tout ça. Désolée ^^' .

Citation :
Pour les polices, fait attention à bien mettre les quote autours, de bien écrire comme c'est écrit sur le site de google font, c'est important pour que les navigateurs retrouves les polices !

D'accord merci, je ferais attention :) . Il me semble que justement j'avais essayé comme toi de faire ce changement et ça ne marchait pas non plus. Mais je veillerais du coup à bien le noter.


Citation :
bon je viens de corriger, et en effet, y'a tjrs un pbm de police ... je vais me renseigner, car là je vois pas du tout ! Et je regarderai le code dans le détail ce soir pour voir si y'a des amélioration à apporter là j'ai pas assez de tps, sorry !!!

D'accord merci beaucoup de te pencher là-dessus :) . Pas de souci prends ton temps ;) .

Passes une bonne soirée :) !
Contenu sponsorisé
Aller à la page : Précédent  1, 2
Page 2 sur 2

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum