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

classe 2 - Sleepy Hollow
 :: Codage :: Entraînement :: Cours :: Classe Jamy
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 : 2474
Ven 20 Jan 2017 - 20:23
Hello ! :D J'espère ce tutorat te plaira ! N'hésites pas à poser des questions et tout ça ...  vraiment je suis là pour ça ! :D

Bon déjà, je rebondis sur ton petit questionnaire ! :)
Les premières questions c'est parfait ! :D
Citation :
Qu'est ce que le BBCode, est ce judicieux de l'utiliser ?: Je n'ai jamais cherché x) , mais il me semble que c'est comme la barre au-dessus des messages pour mettre facilement en gras, italique, centrer, ... Je ne sais pas si c'est la même chose, mais c'est pas comme les options dans les traitements de texte ? Si oui j'avais lu que ce n'était qu'approximatif et le codage dans ce genre de logiciel n'était pas très bon ( Cela aussi je l'ai lu dans le cours xD ).
>> et oui, tout à fait, c'est la barre pour simplifier la mise en page dans forum actif (et d'autres endroits), mais il ne faut pas utiliser ce langage dans les pages HTML, les crochets n'étant pas interprété ! :)
Du coup, je ne veux plus voir dans tes codes à partir de maintenant de balise tel que :
Code:
[b][i][/i][/b] [url]

Car à chaque fois que tu veux utiliser cela, il existe un moyen de le faire en HTML et CSS ! :)

Citation :
Par exemple j'ai regardé certains exercices que vous qualifiez de simple ben j'ai aucune idée de comment faire
Ne t'inquiète pas, je pense tu sais faire plus que ce que tu ne crois ! :D

On va reprendre ton premier code du coup, et c'est partit pour code ! :)

Déjà, il va falloir corriger le BBCode... C'est ta première mission ! :)
Ensuite, on ira voir la syntaxe et le choix des balises que tu as fait pour optimiser ton code !

n'hésites pas à poser des questions une fois encore ! Lovely

_________________________________________

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 : 20
Sam 21 Jan 2017 - 0:41
Coucouuuu

Merci beaucoup de m'avoir acceptée en tant qu'élève . Et ne t'en fais pas pour les questions, tu en auras vite marre des miennes xD .

D'accord merci, je ferais de mon mieux pour oublier ces [...] !

Haha on verra bien, mais des trucs tout bêtes parfois j'ai pas la solution. Et j'ai souvent besoin de concret pour comprendre un truc... Par exemple, dans le cours que j'avais lu, la personne parlait des balises class et id et a indiqué leur différence, à savoir que id ne peut être qu'utilisé une seule fois dans le code, mais concrètement j'ai vraiment pas compris. Je sais, je suis un haha.

Pour le premier code, ça va je sais faire :p ! Mais le deuxième... Je suppose que tu vas me le demander plus tard, mais si jamais, je dis déjà que j'ai aucune idée de comment faire pour que par exemple « Nom » , « Sexe » , « Age » , ... soit en gras et coloré, sans que ce soit le cas pour ce qu'on écrit à côté.

Du coup voili voilou pour mon premier corrigé :

Code:
<div style="width: 75%; border: 2px solid white; -moz-border-radius: 12px; -webkit-border-radius:12px; border-radius:12px; background-color: #CCCCCC; text-align: center;padding: 5px; margin:auto; font-size:24px ; color: black ;">♦ Titre ♦</div>


<div style="width: 75%; border: 2px solid white; -moz-border-radius: 12px; -webkit-border-radius:12px; border-radius:12px; background-color: #CCCCCC; text-align: left;padding: 5px; margin:auto; color: black ;">
Texte pour cet horrible codage !</div>
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 : 2474
Sam 21 Jan 2017 - 12:53
Hello !

Naaan c'est très bien ! :D Et je ne vais aps en avoir marre t'inquiète ! ;)

Alors, pour l'id et la class, c'est exactement ça ! On n'utilise le nom nom d'id qu'une seule fois dans une page, alors qu'une class, disons titre, peut être utilisée plusieurs fois ! :)
Personnellement, je n'utilise les id que pour quand j'ajoute du Javasript dans mes codes, sinon, les classes ou les sélecteurs de balises suffisent ! Mais on verra ensemble pas de panique ! :D

Pour styliser une partie de phrase il te suffis d'ajouter la balise span ! Elle s'utilise pareil que la balise div, mais c'est une balise de type inline et du coup, elle ne provoque pas de retour à la ligne ! :D

Je reviens sur une petite partie de ton code CSS avant de passer à al suite....
Code:
-webkit-border-radius:12px; border-radius:12px;
Tu peux m'expliquer l'utilisation du webkit ? à quoi il sert ? Et si c'est nécessaire ? :)

Ensuite, on va passer à ton deuxième code, celui ci a été correctement corrigé, et l'autre me semble plus intéressant pour ajouter d'autres trucs dessus etc après correction ... ;D

_________________________________________

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 : 20
Sam 21 Jan 2017 - 13:14
Coucou !

D'accord ^^ .

Il faudra mettre des Span à chaque ligne du coup ? O.o mais c'est lourd et ça fait moche dans un codage non x) ?

Haha c'est marrant que tu demandes, parce qu'en fait ce code je l'avais fait en découpant des morceaux de code par-ci par-là XD , et justement hier j'ai regardé à quoi il servait par curiosité :') . C'est reconnu par Safari et Chrome je crois... Mais du coup il n'est pas utile effectivement. C'est pour arrondir l'angle du cadre.

Bien, passons au deuxième code .
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 : 2474
Dim 22 Jan 2017 - 18:29
Hey ! :)
Oui, il faudra mettre un span pour tous, mais non, ça fait pas lourd, puisque tu mettras dans le span uniquement une class, et en plus, cela te permettra de faire des modifications beaucoup plus simplement et rapidement ! :D

Je te recommande de lirece petit tuto, ça devrait t'éclairer ! :) en effet, on utilise ces préfixes pour que les codes soient compatible d'un navigateur à un autre ! :)
Aussi, tu auras le lien pour un site web qui va te dire si la propriété que tu utilises est cross browser (c'est à dire, qu'elle est compatible avec tout les navigateurs). Je te laisse chercher la réponse vis à vis de ton border-radius, qui tu as encore raison, fait les arrondis ... :)

Mais cherche voir si tu as besoin d'un préfixe ou non, et si d'autres préfixes sont nécessaires ou non ! pour que sur chaque navigateur ton code ai bien des arrondis ! ;D

Et oui, passons au deuxième code ! Montre le moi corrigé ! :)

et n'hésites pas si tu as d'autres petites questions ! :)

_________________________________________

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 : 20
Dim 22 Jan 2017 - 20:30
Bonsoiiir ♪

Je n'ai jamais fait ça je crois ou alors j'ai oublié du coup ça s'annonce compliqué x) . J'ai l'impression de tout confondre, entre span, div class, id, ... Pourtant avec le cours que j'ai lu c'était expliqué mais je mélange tout.

J'ai lu le tuto, merci du lien ^^ . Mais les préfixes faut les chercher du coup, parce qu'il n'y a que des exemples ici, non ? En tout cas pour border-radius si j'ai bien compris il n'y a rien besoin de faire. Mais bon je le sais parce que la personne qui a fait le tuto l'a écrit xD , honnêtement je n'ai pas trop compris l'utilisation du site " Can I use " . Je n'ai pas vu le nom des préfixes dessus. Alors j'ai tapé "  border-radius " en haut, si j'ai bien saisi tous le supportent sauf Opera Mini. Mais je ne sais pas si c'est ainsi qu'il faut l'utiliser, parce que quand on clique dessus il y a tout de suite pleins de tableaux de comptabilité avec les noms de navigateur et les cases vertes et rouges mais ça j'ai absolument rien compris ^^' .


Alors je ne sais pas trop comment faire avec le deuxième code pour ne pas dire pas du tout x) ...
Pour centrer le tout c'est bien margin: auto ?
Du coup j'ai enlevé tous les " moz " aussi. C'est juste ?
Les
Code:
<br>
je ne sais pas trop si je dois enlever ou pas et mettre plutôt padding, du coup j'ai laissé.

Pour la suite je sais pas comment procéder non plus. Déjà les trois div style différents je dois les laisser ainsi ou tout doit être rassembler ( text-align, font-family, text-shadow, ... ) ? Je ne sais plus comment j'avais fait ce code mais comme l'autre j'avais dû faire avec ce que j'ai trouvé sans trop chercher à comprendre xD . Là encore j'ai l'impression de tout mélanger avec tous ces div.
Bref en fait je vois pas du tout quoi faire... Je n'ai pas compris avec le span comment faire pour que mes titres aient une certaine mise en page et les champs en aient une autre . Je t'avais dit que j'étais nulle haha.
Pour le premier titre j'ai quand même modifié les balises pour la police et l'alignement à gauche parce que sinon c'est la honte, j'ai réussi qu'à centrer le truc et encore je suis même pas sûre que ce soit juste. Raaah j'ai trop l'impression d'être un boulet.


Code:
<div style="center; width: 700px; margin: auto; overflow: auto; background-image: url('http://i57.servimg.com/u/f57/15/06/04/58/fondcl10.jpg'); border-radius-topleft: 30px; border-radius-topright: 30px; border-radius-bottomright: 30px;  border-radius-bottomleft: 30px; border: 3px solid #A90033;padding:12px;"><br><br><link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css'>
<div style="text-align:center; font-family: 'The Girl Next Door', cursive; font-size: 100px; "><div style="text-shadow: 3px 3px 8px black; color: #564A4E;">Nom</div></div>
<br>
<div style="text-shadow: 2px 2px 8px black; color: #564A4E; font-size: 20px; font-family: Trebuchet MS; text-align: left;">I. Identité
</div>
[left][color=#A90033][b]Nom :[/b][/color] Écrire ici.
[color=#A90033][b]Sexe :[/b][/color] Écrire ici.
[color=#A90033][b]Âge :[/b][/color] Écrire ici.

[color=#A90033][b]Meute :[/b][/color] Écrire ici.
[color=#A90033][b]Rang :[/b][/color] Écrire ici.


<div style="text-shadow: 2px 2px 8px black; color: #564A4E; font-size: 20px;">[font=Trebuchet MS]II. Histoire, caractère & apparence[/font]</div>

<fieldset style="border: 2px solid #B8B8BA; height: 350px; width: 600px;"><legend style=" color: #A90033; text-align: center: 20px; ; letter-spacing:2px; "><div style="text-shadow: 0px 0px 4px #000000;">♪ Mon histoire</div></legend><div style="height : 345px; width : 595px; overflow : auto;">
Votre histoire ici. 10 lignes minimum.
</div>
</fieldset>

<fieldset style="border: 2px solid #B8B8BA; height: 230px; width: 600px;"><legend style=" color: #A90033; text-align: center: 20px; ; letter-spacing:2px; "><div style="text-shadow: 0px 0px 4px #000000;">♪ Mon caractère</div></legend><div style="height : 225px; width : 595px; overflow : auto;">
Votre caractère ici. 5 lignes minimum.
</div>
</fieldset>
<div style="center; background-color: #B8B8BA; border: 1px solid #A90033;padding:12px; width: 600px; overflow : auto;">♪ Points forts :
♪ Points faibles :

♪ J'aime :
♪ Je n'aime pas :
</div>

<fieldset style="border: 2px solid #B8B8BA; height: 200px; width: 600px;"><legend style=" color: #A90033; text-align: center: 20px; ; letter-spacing:2px; "><div style="text-shadow: 0px 0px 4px #000000;"><a class="imag" href="#">♪ Mon apparence ( Place ton curseur sur " Mon apparence " )
<span><img border="0" alt="toto" src="ADRESSEURLDELIMAGE" /></span></a></div></legend><div style="height : 195px; width : 595px; overflow : auto;">
Votre apparence ici. 5 lignes minimum.</div>
</fieldset>


<div style="text-shadow: 2px 2px 8px black; color: #564A4E; font-size: 20px;">[font=Trebuchet MS]III. Administration[/font]</div>

[color=#A90033][b]As-tu lu le règlement ?[/b][/color] Écrire ici.
[color=#A90033][b]Quel est le code ?[/b][/color] Écrire ici.

[color=#A90033][b]T'engages-tu à être vraiment actif sur ce forum ?[/b][/color] Écrire ici.

[color=#A90033][b]Comment as-tu découvert Loup Sauvage ?[/b][/color] Écrire ici.


<div style="text-shadow: 2px 2px 8px black; color: #564A4E; font-size: 20px;">[font=Trebuchet MS]IV. Qui suis-je ?[/font]</div>

[color=#A90033][b]Prénom ou surnom :[/b][/color] Écrire ici.
[color=#A90033][b]Âge :[/b][/color] Écrire ici.
[color=#A90033][b]Animal(aux) préféré(s) :[/b][/color] Écrire ici.

[color=#A90033][b]Que penses-tu de ce forum à première vue ?[/b][/color] Écrire ici.
[color=#A90033][b]Quelque chose pour l'améliorer ?[/b][/color] Écrire ici.

[color=#A90033][b]Autre :[/b][/color] Écrire ici.
[/left]
</div>

Bonne soirée ^^ .
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 : 2474
Lun 23 Jan 2017 - 18:04
Citation :
J'ai lu le tuto, merci du lien ^^ . Mais les préfixes faut les chercher du coup, parce qu'il n'y a que des exemples ici, non ? En tout cas pour border-radius si j'ai bien compris il n'y a rien besoin de faire. Mais bon je le sais parce que la personne qui a fait le tuto l'a écrit xD , honnêtement je n'ai pas trop compris l'utilisation du site " Can I use " . Je n'ai pas vu le nom des préfixes dessus. Alors j'ai tapé " border-radius " en haut, si j'ai bien saisi tous le supportent sauf Opera Mini. Mais je ne sais pas si c'est ainsi qu'il faut l'utiliser, parce que quand on clique dessus il y a tout de suite pleins de tableaux de comptabilité avec les noms de navigateur et les cases vertes et rouges mais ça j'ai absolument rien compris ^^' .

Oui, à présent, la propriété border-radius est comprise par l'ensemble des navigateurs, donc, on n'a plus besoin d'écrire de préfixe !
Can I use te dis quels navigateurs ne supportent pas la propriété ou ceux qui ont besoin d'un préfixe. Tu as de la chance, la plupart des propriétés CSS utilisées ici n'ont plus besoin de préfixe, mais comme tu les avais mis dans ton code, je voulais faire un aparté sur cette notion ! :)

Si tu trouves des codes sur internet, demandes toi tjrs la pertinence de ces codes. Si ils sont vieux, si ils sont à adapter. Là en cooccurrence le code devait dater de l'époque où chrome ne supportait pas le border radius, qu'il n'arrivait pas à l'implémenter sans préfixe ! :)

Du coup, sur can I use, tu as en rouge, là où ce n'est pas supportés, donc que la propriété ne marchera pas sur le navigateur. Et en vert, sur lesquels ça marche. Et dans chaque colonne, tu as les différents version des navigateurs. Les navigateurs sont régulièrement mis à jour, et en général, les personnes traînant sur les forums ont plutôt des navigateurs à jour et utilisent chrome/firefox. Mais il se peu qu'on croise des gens sur internet explorer ou autre navigateur exotique, et quand on développe un site web, un code quel qu'il soit, il faut penser à tous les potentiels utilisateurs, pour pas qu'ils se retrouvent avec un rendu complètement dégueulasse ! ^^
D'où l'importance de te familiarisé avec les différences de compatibilité !

J'espère c'est un peu plus claire comme notion dans ta tête ! :)


Pour centrer, c'est bien un margin:auto; oui ! car avec un margin auto tu dis au navigateur d'équilibré les marges des deux côtés. Cela étant dit, pour être pointilleux il faut écrire : margin: 0 auto;
Car les marges, il y en a 4 ! une en haut, une à droite, une en bas, une à gauche. ça tourne dans les aiguille d'une montre.
du coup, tu pourrais écrire :
margin: 15px;
ce qui a pour rendu de faire une marge en haut, à droite, en bas et à gauche de 15px. Mais tu peux aussi vouloir préciser une marge que en haut ou que en bas. Là tu peux spécifier : margin-left:10px;
ou alors écrire : margin: 0 0 0 15px;
ça revient au même ! Revenons à l'auto, en fait, on peut pas dire qu'on veut une marge auto en haut et en bas, le navigateur ne sait pas jusqu'à 'où' vers le bas il doit optimiser, du coup, il laisse le bloc en haut. Du coup, il faut écrire qu'on ne veut pas de marge en haut (valeur : 0) mais que à gauche et droite on va avoir une automatique.
quand on écrit la version raccourcis à deux valeurs c'est margin: hautETbas gaucheETdroite.

Dis moi si c'est pas claire ! :)


Tu n'es pas un boulet, ne t'inquiètes pas ! :)

On va y aller tranquille et tu vas voir, ça va être bien !

1) je ne veux plus de BBCode au prochain truc que tu me montres ! ;) ça, c'est facile à faire d'enlever le BBCode ! ;)

2) Ensuite, on va décomposer ton code, c'est ce que je fais toujours ! :)
Là, quand on regarde le rendu je vois :
- un cadre qui entour de le tout et qui une bordure et un fond.
- un titre en haut
- un bloc identité
- un bloc histoire
- un bloc caractère
etc...

tu comprends où je veux en venir ?
Maintenant regardons ton code :

tu as un bloc qui entoure, ça je suis d'accord (je ne m'arrête pas sur le CSS, on optmisera après, d'abord, l'architecture).
Ensuite, tu as des br, ce qui est inutile, je t'ai dit, on va faire des marges avec les padding et margin, alors on vire ! :)
Ensuite, tu as un bloc, puis un autre bloc (uand je dis bloc je parle de balise div) tout ça pour écrire un nom. Là, tu peux réunir en 1 seul et même bloc non ?

Ensuite, tu as un bloc pour le sous titre. Puis, du bbcode (grrrrr) dégage moi ça !!!

ps: j'ai remarqué que tu mettais tes link pour les polices dans les codes, personnellement, je les sorts tjrs et les met en premier avant même le code HTML, car ces lignes techniquement, sont à mettre dans la partie head d'une page HTML (on verra ça plus tard), mais juste dès à présent, prend l'habitude de séparer tes codes pour mieux organiser, donc la balise link, en premier).


Puis, après tu as les balises fieldset. D'ailleurs tu sais pour quoi sont faites ces balises ? Je sais que là, tu voulais simplement pouvoir avoir l'effet du cadre coupé grâce au code legende, mais ce n'est pas très approprié comme utilisation ....

du coup, après avoir fait un premier clean du code, je te donne comme mission de te renseigner sur la balise fielset ! :D

_________________________________________

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 : 20
Lun 23 Jan 2017 - 19:36
Re :) !

Merci beaucoup pour les explications supplémentaires, j'ai mieux compris !

Concernant les marges, j'ai quasiment tout compris. J'avais lu cela dans le cours, mais c'est bien comme rappel :) . Il y a juste un point sur lequel je m'interroge ; pourquoi il faut écrire qu'on ne veut pas de marge en haut puisque de toute façon il ne sait pas où ça s'arrête ?

C'est facile oui mais quand on sait où mettre les propriétés XD .

Oui je vois où tu veux en venir avec les blocs. Du coup chaque div = un bloc, c'est ça ?

Pour les br et padding, comment je peux être précise ? Je veux dire qu'il va forcément falloir regarder mon rendu pour savoir la valeur que je veux du coup, c'est ça ? J'ai enlevé les br du coup, et j'ai vu en plus que j'avais déjà un padding 12 px juste avant x) . Je dois augmenter la valeur c'est ça ?

En ce qui concerne la police d'écriture, j'avoue n'avoir jamais capté comment qu'il fallait faire exactement, j'ai bêtement copié d'autres trucs et changé la police. Et j'étais encore plus embrouillée par le cours que j'avais lu, qui m'indiquait que pour qu'un utilisateur puisse voir une police il fallait qu'il l'ait sur ton ordinateur, ou alors on pouvait forcer son téléchargement en l'ayant nous même dans nos documents mais en fait il n'y a pas besoin de tout ça.
Du coup la police faut présenter ça comment ?
C'est comme j'ai déjà vu des codes d'un membre de mon forum avec le CSS au tout début mais tout ça c'est très flou pour moi.

Pour ce qui est des différents blocs de mon code, je peux pas sauter de lignes sinon ça va tout décaler, non ? Bref désolée je te réponds un peu dans le désordre. Je me permets de découper le code afin de mieux analyser chaque partie, je n'ai pas trop compris si c'est ce que je devais faire mais ça me permet de mieux cerner les choses peut-être et de poster une question sur chaque partie.

Code:
<div style="center; width: 700px; margin: 0 auto; overflow: auto; background-image: url('http://i57.servimg.com/u/f57/15/06/04/58/fondcl10.jpg'); border-radius-topleft: 30px; border-radius-topright: 30px; border-radius-bottomright: 30px;  border-radius-bottomleft: 30px; border: 3px solid #A90033;padding:12px;"><link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css'>
<div style="text-align:center; font-family: 'The Girl Next Door', cursive; font-size: 100px; color: #564A4E; text-shadow: 3px 3px 8px black;">Nom</div>

Du coup ici, c'est ce que tu as dit avec le fond, le cadre, ... Donc le tout est centré, les bords arrondis, il y a un cadre continu de 3px. Jusque là ok.
Ensuite le titre, et justement ici, j'ai modifié avant de lire ce que tu disais à ce sujet, à savoir que je pouvais tout regrouper x) . Au moins j'ai pu me corriger avant de voir que c'était bel et bien faux :) . Je suis vraiment bête d'avoir fait deux div, il était temps que je me mette au codage x') . Cela n'a sans doute aucune importance mais j'ai essayé de suivre une certaine logique ; d'abord la couleur du texte, sa taille, ensuite l'ombre, ... Mais bon ça c'est plus pour m'y retrouver.

Après il y a un br de nouveau.

Code:
<div style="text-align:center; font-family: 'The Girl Next Door', cursive; font-size: 100px; color: #564A4E; text-shadow: 3px 3px 8px black;">Nom</div>
<div style="text-align: left; font-family: Trebuchet MS; font-size: 20px; color: #564A4E; text-shadow: 2px 2px 8px black;">I. Identité</div>

Du coup le padding, je dois le mettre plutôt dans la div du nom ou I. Identité ? Ou dans les deux ? J'ai enlevé le br du coup et je mettrais plutôt padding dans le truc du nom mais au final je ne sais pas si c'est important qu'il soit dans l'un ou dans l'autre. J'attends que tu m'éclaircisses là dessus :3 .

Ensuite, ça se complique XD . Comme je t'ai dit je ne sais pas comment faire avec le span, où le placer et tout. Je suppose que je vais devoir entourer " Nom " , " Sexe " , " Age ", ... de
Code:
<span class="Nom">...</span>
?
Mais cette class je dois bien le mettre quelque part. Faut mettre un . devant suivi du nom puis des accolades ça je sais, mais je mets tout ça où ? Au tout début ? Ça fait moche nan ? XD
Bon du coup j'ai préparé le truc avec span ci-dessous mais sans l'inclure au code pour l'instant, mais j'ai déjà ajouté les balises au formulaire. J'ai aussi corrigé les autres titres du coup qui contenaient du BBcode et j'ai enlevé le left que j'avais oublié en bas. Normalement il n'y en a plus, si j'en ai oublié, pas tapé xD .

Code:
.champs
{
color : #A90033;
font-weight: bold;
}
( D'ailleurs, on doit sauter une ligne supplémentaire entre le nom du truc et { ou c'est bon ainsi ? )

Code:
<div style="center; width: 700px; margin: 0 auto; overflow: auto; background-image: url('http://i57.servimg.com/u/f57/15/06/04/58/fondcl10.jpg'); border-radius-topleft: 30px; border-radius-topright: 30px; border-radius-bottomright: 30px;  border-radius-bottomleft: 30px; border: 3px solid #A90033;padding:12px;"><link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css'>
<div style="text-align:center; font-family: 'The Girl Next Door', cursive; font-size: 100px; color: #564A4E; text-shadow: 3px 3px 8px black;">Nom</div>
<div style="text-align: left; font-family: Trebuchet MS; font-size: 20px; color: #564A4E; text-shadow: 2px 2px 8px black;">I. Identité</div>
<span class="champs">Nom :</span> Écrire ici.
<span class="champs">Sexe :</span> Écrire ici.
<span class="champs">Âge</span> Écrire ici.

<span class="champs">Meute :</span> Écrire ici.
<span class="champs">Rang :</span> Écrire ici.


<div style="text-align: left; font-family: Trebuchet MS; font-size: 20px; color: #564A4E; text-shadow: 2px 2px 8px black;">II. Histoire, caractère & apparence</div>

<fieldset style="border: 2px solid #B8B8BA; height: 350px; width: 600px;"><legend style=" color: #A90033; text-align: center: 20px; ; letter-spacing:2px; "><div style="text-shadow: 0px 0px 4px #000000;">♪ Mon histoire</div></legend><div style="height : 345px; width : 595px; overflow : auto;">
Votre histoire ici. 10 lignes minimum.
</div>
</fieldset>

<fieldset style="border: 2px solid #B8B8BA; height: 230px; width: 600px;"><legend style=" color: #A90033; text-align: center: 20px; ; letter-spacing:2px; "><div style="text-shadow: 0px 0px 4px #000000;">♪ Mon caractère</div></legend><div style="height : 225px; width : 595px; overflow : auto;">
Votre caractère ici. 5 lignes minimum.
</div>
</fieldset>
<div style="center; background-color: #B8B8BA; border: 1px solid #A90033;padding:12px; width: 600px; overflow : auto;">♪ Points forts :
♪ Points faibles :

♪ J'aime :
♪ Je n'aime pas :
</div>

<fieldset style="border: 2px solid #B8B8BA; height: 200px; width: 600px;"><legend style=" color: #A90033; text-align: center: 20px; ; letter-spacing:2px; "><div style="text-shadow: 0px 0px 4px #000000;"><a class="imag" href="#">♪ Mon apparence ( Place ton curseur sur " Mon apparence " )
<span><img border="0" alt="toto" src="ADRESSEURLDELIMAGE" /></span></a></div></legend><div style="height : 195px; width : 595px; overflow : auto;">
Votre apparence ici. 5 lignes minimum.</div>
</fieldset>


<div style="text-align: left; font-family: Trebuchet MS; font-size: 20px; color: #564A4E; text-shadow: 2px 2px 8px black;">III. Administration</div>

<span class="champs">As-tu lu le règlement ?</span> Écrire ici.
<span class="champs">Quel est le code ?</span> Écrire ici.

<span class="champs">T'engages-tu à être vraiment actif sur ce forum ?</span> Écrire ici.

<span class="champs">Comment as-tu découvert Loup Sauvage ?</span> Écrire ici.


<div style="text-align: left; font-family: Trebuchet MS; font-size: 20px; color: #564A4E; text-shadow: 2px 2px 8px black;">IV. Qui suis-je ?</div>

<span class="champs">Prénom ou surnom :</span> Écrire ici.
<span class="champs">Âge :</span> Écrire ici.
<span class="champs">Animal(aux) préféré(s) :</span> Écrire ici.

<span class="champs">Que penses-tu de ce forum à première vue ?</span> Écrire ici.
<span class="champs">Quelque chose pour l'améliorer ?</span> Écrire ici.

<span class="champs">Autre :</span> Écrire ici.
</div>

Et donc le dernier div ici c'est celui du tout début, en gros le cadre, le fond, ... qui englobe le tout.

Bref, si je résume le tout, au niveau des titres et des champs c'est bon, ainsi que le titre général ( Nom ) et la bordure globale et le fond. Enfin si c'est bon, j'en sais rien, mais j'ai modifié ce qui me semblait faux x) .
Du coup il reste les trucs de la deuxième partie : Histoire, caractère, physique, j'aime/j'aime pas.

Et justement, concernant les balises fieldset, j'ai regardé sur Internet pour savoir exactement x) ... Elle est utilisée pour les formulaires, pour regrouper les champs... Je ne sais plus où je l'avais trouvé du coup et pourquoi je l'ai pris ^^' . Parce qu'effectivement c'est complètement inappropriée. Aaaah la boulet :') . Mais je sais pas trop comment remplacer ça... Par border tout simplement ? Mais je pourrais pas écrire le titre comme actuellement du coup... Si ?
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 : 2474
Mer 25 Jan 2017 - 19:21
Je te réponds ici à ton MP ! ;)

Je suis pas à la fac mais dans une école ! désolé, si j'ai dis la fac, c'est une vieille habitude x) Mais je suis une formation pour être développeuse de site web ! ;)

Citation :
pourquoi il faut écrire qu'on ne veut pas de marge en haut puisque de toute façon il ne sait pas où ça s'arrête ?
oups, j'ai écris ça ?
non, en fait, il ne faut pas mettre de marge AUTOMATIQUE en bas et haut, car il ne sait pas où est la fin, et donc, sur combien il doit égaliser.
Tu peux tout à fait mettre une marge en pixel en haut et base d'un bloc ça pas de soucis ! :D


Du coup chaque div = un bloc, c'est ça ?
Tout à fait ! :D Les balises sont des blocs. D'autres balises ont également un comportement de bloc !
La balise paragraphe ! Les balises de titre >> tu sais, h1, h2 etc...


Citation :
Pour les br et padding, comment je peux être précise ? Je veux dire qu'il va forcément falloir regarder mon rendu pour savoir la valeur que je veux du coup, c'est ça ? J'ai enlevé les br du coup, et j'ai vu en plus que j'avais déjà un padding 12 px juste avant x) . Je dois augmenter la valeur c'est ça ?
Oui, si tu veux plus d'espacement, tu augmentes la valeur ! :)

Citation :
En ce qui concerne la police d'écriture, j'avoue n'avoir jamais capté comment qu'il fallait faire exactement, j'ai bêtement copié d'autres trucs et changé la police. Et j'étais encore plus embrouillée par le cours que j'avais lu, qui m'indiquait que pour qu'un utilisateur puisse voir une police il fallait qu'il l'ait sur ton ordinateur, ou alors on pouvait forcer son téléchargement en l'ayant nous même dans nos documents mais en fait il n'y a pas besoin de tout ça.
Du coup la police faut présenter ça comment ?
C'est comme j'ai déjà vu des codes d'un membre de mon forum avec le CSS au tout début mais tout ça c'est très flou pour moi.
Alors il y a plusieurs façon de faire.
Oui, pour qu'un utilisateur voit une police il faut que l'ordinateur l'interprète. Les ordi ont un certains nombre de police de base, et il est possible d'en rajouter en les téléchargeant et installant.
OU, tu utilises une police googlefont, et du coup, via une balise link, tu vas charger la police sur le site que tu utilises, dans ce cas là, les utilisateurs vont voir ta police même si ils ne l'ont pas sur le pc. C'est ce que tu as fait avec ton link ! :) Le navigateur ne cherche pas sur l'ordinateur la font (= police) mais sur le site de googlefont.

Pour savoir où mettre ces link, il faut qu'on fasse un bref aparté sur ce qu'est une page HTML. Très brièvement (car je pense, on verra ça plus tard), dans une page HTML on a deux parties : une partie contenue entre les balises HEAD. et une partie entre les balises BODY.
Entre le body on place TOUT ce qui s'affiche à l'écran. C'est le contenu de ton site, les titres, les paragraphes, les images etc etc... Entre les balises HEAD, ce sont les informations complémentaires, le titre qui va s'afficher dans l'onglet, si il y a un favicon (= le petit logo) particulier...
Dans la partie HEAD va également se placer des liens, un lien faire la fiche de style (on sépare à terme le style des balises HTML qui structure le contenu) et également les balises liens pour les google font !

Un forum c'est un site web ! Il respecte donc l'architecture d'un page HTML ! Si tu as forum test, tu peux vérifier mes dires en allant dans le templates overall_header. Tu verras que les premières lignes sont la déclaration du doctype (on verra ça plus tard, en étudiant les pages HTML dans le détail), ouverture de la balise HTML, puis la fameuse balise HEAD et plus bas, le body !

Et c'est dans ce head, aux lignes 4/5 que tu dois ajouter les balises link des google font de ton sites ! C'est ce qui se fait de plus propre ! :D Tu l'ajoutes là, une fois, et c'est valable pour TOUT ton site ! Ce dernier étant contenu entre les balises HTML qui viennent de s'ouvrir dans ce templates et ne se fermeront qu'à la toute fin !
Va voir, ça prend pas longtemps, mais tu te familiariseras avec les notions ! :)

du coup, dans l'idéale, on sépare le HTML (balise + contenu) du CSS (en utilisant des class et id (mais les id sont limités)) et les link pour appeler les google font.

Evidemment, la plupart du temps, tu es sur d'autres forum que le tiens, et tu n'as pas accès aux templates, mais du coup, mets ce link en début de message, pour séparer un minimum ! :)

---------- fin de cette longue parenthèse ...


Tu fais bien de découper si ça te semble plus clair ! :)

Partie 1/ cadre + titre
c'est parfait pour la structure si tu sors la balise link la prochaine fois ! :)
par contre, dans le CSS
  • attention tu as une valeur qui traine sans propriété (la toute première) : center;
  • tu écris que tu as un border-radius pour tous de 30px. En effet, alors pourquoi écrire pour chacun des angles puisqu'ils sont tous pareil ? border-radius-topleft: 30px; border-radius-topright: 30px; border-radius-bottomright: 30px; border-radius-bottomleft: 30px; peut être réduit à : border-radius: 30px; Optimises ! ça allège le code !
  • dernier point d'optimisation : as tu besoin de la propriété overflow: auto; ? à quoi sert cette propriété ? :)


Pour ce qui est de l'organisation du CSS, soit de l'ordre des propriétés:valeurs; ça n'a pas d'importance ^^ Mais fait comme tu préfères, chaque codeur a son ordre qu'il fait inconsciemment, et c'est comme chacun préfère ^^

Partie 2/ sous titre

Citation :
Du coup le padding, je dois le mettre plutôt dans la div du nom ou I. Identité ? Ou dans les deux ? J'ai enlevé le br du coup et je mettrais plutôt padding dans le truc du nom mais au final je ne sais pas si c'est important qu'il soit dans l'un ou dans l'autre. J'attends que tu m'éclaircisses là dessus :3 .
Un padding c'est une marge INTERNE à un bloc. Un margin c'est une marge EXTERNE à un bloc. N'hésites pas à bombarder ton code de : border:1px solid red; à tes blocs pour visualiser où ils commencent où ils terminent. Et une fois que tu es contente des positionnement, tu enlèves les bordures inutiles ^^ Moi, j'utilise beaucoup cette technique, celle ci, on de mettre des background bidon, pour mieux visualiser les alignements et faire des débugs ! :)

Mais la question n'étais pas là, la question c'était margin ou padding ? Et sur quel élément ? Et bien, ça dépend de ce que tu veux faire ! Mais ici, ça n'a pas beaucoup d'importance...
Mais imaginons que tu voulais faire une bordure bottom à ton sous titre, alors c'était mieux de mettre un padding à ce dernier, pour ne pas déformer la bordure... Si tu voulais une bordure top, alors c'est mieux de donner un margin bottom à ton titre, pour éviter d'avoir un espace disgracieux entre la bordure top de ton sous titre et ton texte ... Essayes les différents cas avec les bordures, tu comprendras mieux ! :) mais ici, le choix pencherait plus vers une marge sur les éléments sous titre en eux même. Regarde, le sous titre n°2 se retrouve collé à la liste des span (caractéristiques). Or, si tout tes sous titres avaient un margin top ça résoudrait le problème ... :)

Un peu d'optmisation de CSS quand même pour la route !
  • pourquoi avoir écrit : text-align: left; ? :) Quand tu écris une propriété, toujours se demandé si c'est vraiment utile! si c'est pas juste des mots en plus qui allonge le code pour rien ! ;)


Partie 3/ les spans
tu as très bien entouré les critères ! c'est parfait ! :D
et tu as très bien écrit le CSS qui allait avec ! C'est comme ça ! L'espace/retour à la ligne n'est pas obligatoire ! Tu peux, si tu trouves cela plus lisible, mais c'est vraiment pas obligé tu peux même tout coller si le coeur t'en dis ! Mais pour plus de lisibilité, en général, on écrit :
Code:
.champs{
color : #A90033;
font-weight: bold;
}

mais ça est aussi correct: et on utilise cette forme quand on poste dans les messages de forum actif, car sinon, les retour à la ligne ça fait planter le code ... il est capriceux !
Code:
.champs{color : #A90033;font-weight: bold;}
tout comme comment tu avais écrit ! ;)

ensuite, comme je disais, on sépare CSS de HTML etc...
Du coup, sur forum actif, on a une feuille de CSS, dans laquelle on colle le CSS tel que, et c'est appelé dans le templates overall_header, dans la partie HEAD ! ;)

Quand tu n'as pas accès au panneau d'admin, il existe les balises STYLES qui peuvent entourer le CSS que tu veux lier à cette partie, tout simplement, tu écris ton code CSS dans ces balises avant ton code HTML et c'est bon ! :)
Code:
<style>.champs{color : #A90033;font-weight: bold;}</style>

vas y teste ! :)


-----------

je vais m'arrêter là, on continuera la suite dans code quand tu auras déjà assimilé tout le début ! ;D Et que tu me donnes au prochain coup, tout le début parfait ! ;D
D'ailleurs, tes titres allant se répéter 3 fois, tu ferais peut être mieux de mettre ça dans une classe ! :)
on va voir le fieldset au prochain coup, mais oui, c'est assez inapproprié comme choix...

_________________________________________

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 : 20
Jeu 26 Jan 2017 - 18:18
Coucou Jamy :) !

Oh c'est cool ça :) ! Bon courage pour ta formation ! Mais je pense que tu t'en sors très bien puisque ça a l'air d'être ton truc ;) .


Citation :
oups, j'ai écris ça ?
non, en fait, il ne faut pas mettre de marge AUTOMATIQUE en bas et haut, car il ne sait pas où est la fin, et donc, sur combien il doit égaliser.
Tu peux tout à fait mettre une marge en pixel en haut et base d'un bloc ça pas de soucis ! :D

C'est moi qui explique mal xD . Tu m'as bien dit qu'il ne fallait pas de marge automatique en haut et en bas, j'ai compris pourquoi, mais du coup ce que je demandais c'est pourquoi il fallait préciser :
Code:
margin: 0 auto;
Mais bon c'est pour être pointilleux et exact comme tu l'as dit, mais du coup comme de toute façon le navigateur ne savait pas où était le haut et le bas je pensais qu'il n'interprèterait pas le auto pour ces deux côtés. Haha bref je vais chercher loin mais j'ai saisi l'idée !


D'accord je vois pour les blocs, merci ^^ .


Citation :
Oui, si tu veux plus d'espacement, tu augmentes la valeur ! :)
Ok ^^ , du coup faut regarder le rendu à chaque fois pour savoir. Donc on peut toujours se passer des br dans un code ? Ou ils peuvent quand même s'avérer utile ?


J'en arrive maintenant à tes explications sur la police d'écriture et le HTML :) . Je te remercie pour toutes ces informations et de prendre de ton temps pour m'expliquer :) !
Cela me semble plus simple en utilisant Googlefont x) . On ne peut utiliser que ce site ? Et toutes les polices sont gratuites dessus ?
Mais je saisis mieux comment ça marche maintenant :) .

Concernant la page HTML, j'avais lu qu'effectivement il y avait deux parties et tout, du coup je pense que ça m'aide pour ce cours mais je souhaite effectivement tout revoir quand on arrivera à cela :) . De façon interactive et en pratiquant comme dit je devrais encore mieux m'en sortir.

Puisque tu parles du HTML et du CSS d'ailleurs, comment on sait quelles propriétés mettre plutôt en CSS et lesquelles mettre en HTML ? Par exemple les marges, border-radius, ... Parce qu'un membre de mon forum avait fait un code pour une fiche de RP pour un autre membre et en fait elle avait mis au début des attributs avec style et elle avait utilisé une div class avec le nom de l'attribut et à côté de nouveau « style » avec d'autres propriétés ( largeur, espacement des lettres, marge, ... ) mais du coup on pouvait pas l'inclure dans le truc style du début tout simplement ?
Et du coup div style ça sert à quoi ? Enfin tout ce qui est dedans on pourrait le considérer comme du CSS ? Désolée ça fait beaucoup de questions :S .

Concernant mes liens pour la police d'écriture, il faut les mette entre balise style ou bien juste les mettre tel quel, dans un post de forum par exemple au tout début d'un code ? J'ai essayé en mettant tel quel, sans aucune balise entre, ça marche, mais je préfère demander parce que le navigateur peut l'interpréter correctement mais ce n'est pas pour autant la façon de faire.

Je suis allée voir ce template dans mon forum test, la partie head est hyper grande, j'ai dû faire une recherche pour trouver la fin x) .
On peut ajouter le link n'importe où ? Enfin après title ou bien après les trucs suivants ( meta... ) ?
J'ai essayé et j'ai mis le lien après title mais rien a changé xD . Je suppose qu'il faut l'appliquer quelque part mais les templates j'y comprends pas grand chose, c'est un miracle que j'ai su modifier les phrases du QEEL mdr.
Mais en tout cas j'ai déjà repéré les balises html, head et body, ce qu'on voit donc à l'écran.

Citation :
Tu l'ajoutes là, une fois, et c'est valable pour TOUT ton site !
Tu veux dire de manière générale, ou bien vraiment dans CE template ? Parce que ce template correspond juste au haut de page d'après la description.


Citation :
Du coup, dans l'idéale, on sépare le HTML (balise + contenu) du CSS (en utilisant des class et id (mais les id sont limités)) et les link pour appeler les google font.
D'accord, du coup l'ordre ce serait ainsi : Police → CSS → HTML ? ( pour un code d'un post par exemple )


En tout cas merci beaucoup encore pour toutes ces explications :) . Et j'espère vraiment ne pas t'embêter avec mes questions !

--------------------------------------------------------

Partie 1/ Cadre + Titre
Du coup je refais en séparant, sans mettre de balise style autour comme je ne sais pas trop ^^ .
Code:
<link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css'>

<div style=" width: 700px; margin: 0 auto; background-image: url('http://i57.servimg.com/u/f57/15/06/04/58/fondcl10.jpg'); border-radius: 30px; border: 3px solid #A90033;padding:12px;">
<div style="text-align:center; font-family: 'The Girl Next Door', cursive; font-size: 100px; color: #564A4E; text-shadow: 3px 3px 8px black;">Nom</div>
Si je sautes une ligne pour le lien de la police ça va décaler le tout plus bas non ?

J'ai aussi supprimé la valeur qui était toute seule xD . En fait c'était pour centrer le tout mais je suis bête, c'est margin auto qui s'en charge... Quelle quiche xD . Et doublement quiche en ce qui concerne les angles. C'est vrai que c'est idiot de tous les noter haha. Du coup, c'est modifié ! Effectivement ça allège clairement le code et ça le rend plus simple.

La propriété overflow sert à afficher des barres de défilement. En fait c'est vrai que je n'avais besoin de le préciser que pour les blocs histoire, caractère, apparence, étant donné que je n'ai pas précisé de hauteur du formulaire. Du coup là il s'étend jusqu'à la fin du formulaire. Par contre si j'avais mis une hauteur et que le texte sortait, là j'aurais dû mettre overflow, c'est ça ?
Je l'ai enlevée du coup ^^ .

D'accord concernant l'ordre des propriétés et valeurs ^^ .


Partie2/ Sous-titre

Citation :
Un padding c'est une marge INTERNE à un bloc. Un margin c'est une marge EXTERNE à un bloc. N'hésites pas à bombarder ton code de : border:1px solid red; à tes blocs pour visualiser où ils commencent où ils terminent. Et une fois que tu es contente des positionnement, tu enlèves les bordures inutiles ^^ Moi, j'utilise beaucoup cette technique, celle ci, on de mettre des background bidon, pour mieux visualiser les alignements et faire des débugs ! :)

Ah oui mince j'ai confondu ! D'accord, ce n'est pas bête comme technique, merci de l'astuce :) .

Citation :
Mais la question n'étais pas là, la question c'était margin ou padding ? Et sur quel élément ? Et bien, ça dépend de ce que tu veux faire ! Mais ici, ça n'a pas beaucoup d'importance...
Mais imaginons que tu voulais faire une bordure bottom à ton sous titre, alors c'était mieux de mettre un padding à ce dernier, pour ne pas déformer la bordure... Si tu voulais une bordure top, alors c'est mieux de donner un margin bottom à ton titre, pour éviter d'avoir un espace disgracieux entre la bordure top de ton sous titre et ton texte ... Essayes les différents cas avec les bordures, tu comprendras mieux ! :) mais ici, le choix pencherait plus vers une marge sur les éléments sous titre en eux même. Regarde, le sous titre n°2 se retrouve collé à la liste des span (caractéristiques). Or, si tout tes sous titres avaient un margin top ça résoudrait le problème ... :)

Alors, j'ai voulu essayer les différents cas car j'ai vraiment eu du mal à saisir mais j'ai eu quelques soucis. J'ai d'abord voulu faire la technique de la bordure ( pour délimiter le bloc pour me familiariser pour commencer ) et ça n'a pas entouré le mot " Nom " comme je pensais.
J'ai écris :
Code:
<div style="text-align:center; font-family: 'The Girl Next Door', cursive; font-size: 100px; color: #564A4E; text-shadow: 3px 3px 8px black; border: 2px solid red;">Nom</div>

Ça a donné :


Comment ça se fait ?

Bref du coup j'ai voulu essayer ce que tu as dit ci-dessous mais je n'ai vraiment pas compris Sad . Titre = Nom et sous-titre = I. Identité ? Et que veux tu dire par déformer ? Parce que le trait il reste droit x) . J'ai réussi à mettre les bordures en haut ou en bas et j'ai compris que margin c'est la marge entre deux blocs et padding c'est la marge intérieur d'un bloc, par exemple la marge entre la bordure et le texte... mais j'ai vraiment pas compris cette partie, désolée, du coup j'ai pas compris quoi faire dans le code pour essayer.


En parlant des marges et br, j'ai mis le formulaire sur notepad, j'oubliais que ce n'était pas comme forumactif et donc " Nom " , " Sexe " , " Age ", ... se retrouvent tous sur la même ligne. Du coup, par rapport à ma question au-dessus, ici le br serait approprié ? Ou il faudrait aussi jouer avec les marges, à insérer avec le span class ?
D'ailleurs sur Notepad il y a déjà beaucoup d'espace entre le haut de la bordure et Nom, ainsi qu'entre Nom et Identité, or je n'ai précisé aucune marge, comment ça se fait ? Parce que le même formulaire sur FA ne me donne pas le même rendu, là tout est collé mais Nom, sexe, âge, ... sont sur une ligne différente.


Citation :
Pourquoi avoir écrit : text-align: left; ? :) Quand tu écris une propriété, toujours se demandé si c'est vraiment utile! si c'est pas juste des mots en plus qui allonge le code pour rien ! ;)

Je l'avais écrit pour que le texte soit à gauche mais... il l'est d'office en fait nan ? xD Du coup c'est inutile c'est ça ?


Partie3/ Les spans

D'accord merci :) .
Oki je vois pour la forme. Donc soit je peux mettre le truc tel quel dans la feuille de style et l'utiliser sur tout le forum avec le nom " champs ", soit juste dans un code avec la balise style.

La feuille de style se trouve que dans le template overall-header ?

J'ai essayé, ça marche hihi :3 . J'ai remis ci-dessous le code avec le CSS ajouté et une span créée pour les sous-titres. Pour les différents noms de class par contre je peux aller à la ligne c'est bon ?
Par contre, ça ne marche pas pour les sous-titres et je ne vois pas pourquoi >< . J'ai essayé en mettant tout sur la même ligne et en séparant avec ; mais rien à faire, ça marche pas.

Code:
<link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css'>
<style>.champs{color : #A90033;font-weight: bold;}
.soustitre{font-family: Trebuchet MS; font-size: 20px; color: #564A4E; text-shadow: 2px 2px 8px black;}</style>

<div style=" width: 700px; margin: 0 auto; background-image: url('http://i57.servimg.com/u/f57/15/06/04/58/fondcl10.jpg'); border-radius: 30px; border: 3px solid #A90033;padding:12px;">
<div style="text-align:center; font-family: 'The Girl Next Door', cursive; font-size: 100px; color: #564A4E; text-shadow: 3px 3px 8px black;">Nom</div>
<span class="soustitre">I. Identité</span>
<span class="champs">Nom :</span> Écrire ici.
<span class="champs">Sexe :</span> Écrire ici.
<span class="champs">Âge</span> Écrire ici.

<span class="champs">Meute :</span> Écrire ici.
<span class="champs">Rang :</span> Écrire ici.


<span class="soustitre">II. Histoire, caractère & apparence</span>

<fieldset style="border: 2px solid #B8B8BA; height: 350px; width: 600px;"><legend style=" color: #A90033; text-align: center: 20px; ; letter-spacing:2px; "><div style="text-shadow: 0px 0px 4px #000000;">♪ Mon histoire</div></legend><div style="height : 345px; width : 595px; overflow : auto;">
Votre histoire ici. 10 lignes minimum.
</div>
</fieldset>

<fieldset style="border: 2px solid #B8B8BA; height: 230px; width: 600px;"><legend style=" color: #A90033; text-align: center: 20px; ; letter-spacing:2px; "><div style="text-shadow: 0px 0px 4px #000000;">♪ Mon caractère</div></legend><div style="height : 225px; width : 595px; overflow : auto;">
Votre caractère ici. 5 lignes minimum.
</div>
</fieldset>
<div style="center; background-color: #B8B8BA; border: 1px solid #A90033;padding:12px; width: 600px; overflow : auto;">♪ Points forts :
♪ Points faibles :

♪ J'aime :
♪ Je n'aime pas :
</div>

<fieldset style="border: 2px solid #B8B8BA; height: 200px; width: 600px;"><legend style=" color: #A90033; text-align: center: 20px; ; letter-spacing:2px; "><div style="text-shadow: 0px 0px 4px #000000;"><a class="imag" href="#">♪ Mon apparence ( Place ton curseur sur " Mon apparence " )
<span><img border="0" alt="toto" src="ADRESSEURLDELIMAGE" /></span></a></div></legend><div style="height : 195px; width : 595px; overflow : auto;">
Votre apparence ici. 5 lignes minimum.</div>
</fieldset>


<span class="soustitre">III. Administration</span>

<span class="champs">As-tu lu le règlement ?</span> Écrire ici.
<span class="champs">Quel est le code ?</span> Écrire ici.

<span class="champs">T'engages-tu à être vraiment actif sur ce forum ?</span> Écrire ici.

<span class="champs">Comment as-tu découvert Loup Sauvage ?</span> Écrire ici.


<span class="soustitre">IV. Qui suis-je ?</span>

<span class="champs">Prénom ou surnom :</span> Écrire ici.
<span class="champs">Âge :</span> Écrire ici.
<span class="champs">Animal(aux) préféré(s) :</span> Écrire ici.

<span class="champs">Que penses-tu de ce forum à première vue ?</span> Écrire ici.
<span class="champs">Quelque chose pour l'améliorer ?</span> Écrire ici.

<span class="champs">Autre :</span> Écrire ici.
</div>


Voilà ^^ . Du coup bon courage pour répondre à toutes mes questions et j'espère vraiment ne pas t'embêter ^^' .


Passes une bonne soirée :)
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 : 2474
Sam 28 Jan 2017 - 12:11
Coucou ! :)

Je ne réponds pas à la première partie, il semble que tu ais compris l'histoire des margin à présent ! N'hésites pas si plus tard, une notion que tu avais compris te semble encore obscure, on reviendra dessus :)


Citation :
Ok ^^ , du coup faut regarder le rendu à chaque fois pour savoir. Donc on peut toujours se passer des br dans un code ? Ou ils peuvent quand même s'avérer utile ?
Oui, en effet, pour savoir combien on va décaler les éléments, il faut regarder le rendu, mais si tu code sur code pen, ou js bin ou autre site du genre, tu as l’aperçu en même temps ! c'est très pratique pour des petits codes ! Après ce premier exo, on codera une PA, et là, on créera une page HTML et je t'apprendrai à modifier des trucs sur un navigateur directement pour pas avoir à essayer 15 valeurs avant de trouver le bon espacement ! cela étant dit, ça t’entraîne à mémoriser les espacements, à te rendre compte combien 10px prennent comme place ... :)

Citation :
J'en arrive maintenant à tes explications sur la police d'écriture et le HTML :) . Je te remercie pour toutes ces informations et de prendre de ton temps pour m'expliquer :) !
Cela me semble plus simple en utilisant Googlefont x) . On ne peut utiliser que ce site ? Et toutes les polices sont gratuites dessus ?
Alors, oui sur google font, toutes les polices sont gratuites ! Il existe d'autres sites, mais perso, en tant que developpeur, je n'utilise que celui là ! x) Je trouve tjrs mon bonheur ! Les graphistes utilisent d'autres typo, mais je ne suis pas graphiste ... Et quand on me donne une maquette à intégrer avec une typo particulière, dans ce cas là, on me la fournis, car bien souvent elle est payante...
https://www.fontsquirrel.com/ est un bon site également que j'utilise, mais ça requiers un peu plus de technique, il faut installer les polices puis les héberger et les installer dans le CSS, on verra ça après les PA si tu veux ! :) car je pense, c'est un peu trop tôt pour t'embrouiller avec ça maintenant ^^


Citation :
Puisque tu parles du HTML et du CSS d'ailleurs, comment on sait quelles propriétés mettre plutôt en CSS et lesquelles mettre en HTML ? Par exemple les marges, border-radius, ... Parce qu'un membre de mon forum avait fait un code pour une fiche de RP pour un autre membre et en fait elle avait mis au début des attributs avec style et elle avait utilisé une div class avec le nom de l'attribut et à côté de nouveau « style » avec d'autres propriétés ( largeur, espacement des lettres, marge, ... ) mais du coup on pouvait pas l'inclure dans le truc style du début tout simplement ?
Et du coup div style ça sert à quoi ? Enfin tout ce qui est dedans on pourrait le considérer comme du CSS ? Désolée ça fait beaucoup de questions :S .
Ne t'excuses pas, tu fais très bien d'en poser des questions ! :D
En effet, c'est possible d'écrire :
Code:
<div style="border: 1px solid red;"></div>
quand faut il le faire ? =>> JAMAIS.
voilà qui répond à ta question ? hahahaha en fait, c'est tout simplement pas propre de coder comme ça. Et comme tu dis, si on regroupe tout avant le code, c'est plus simple. Et aussi le fait de tout réunir au même endroit permet de centraliser les informations et d'être plus efficace pour les modifications, car sinon, on ne sait plus où donner de la tête pour si tu veux changer une couleur par exemple, si un coup la bordure et dans la feuille CSS, un coup dans le code lui même ... soit on passe tout entre les balises styles (donc au début du code, comme je vais te pousser à le faire de plus en plus, car c'est la meilleur méthode à faire), soit on utilise l'attributs style comme dans le code que je t'ai écrit plus haut.
Les mots class, id, style qu'on place dans les balises HTML, qui sont suivit d'un égale et des guillemets sont appelés des attributs.


Citation :
Concernant mes liens pour la police d'écriture, il faut les mette entre balise style ou bien juste les mettre tel quel, dans un post de forum par exemple au tout début d'un code ? J'ai essayé en mettant tel quel, sans aucune balise entre, ça marche, mais je préfère demander parce que le navigateur peut l'interpréter correctement mais ce n'est pas pour autant la façon de faire.
Je suis allée voir ce template dans mon forum test, la partie head est hyper grande, j'ai dû faire une recherche pour trouver la fin x) .
On peut ajouter le link n'importe où ? Enfin après title ou bien après les trucs suivants ( meta... ) ?
J'ai essayé et j'ai mis le lien après title mais rien a changé xD . Je suppose qu'il faut l'appliquer quelque part mais les templates j'y comprends pas grand chose, c'est un miracle que j'ai su modifier les phrases du QEEL mdr.
Mais en tout cas j'ai déjà repéré les balises html, head et body, ce qu'on voit donc à l'écran.
Tu veux dire de manière générale, ou bien vraiment dans CE template ? Parce que ce template correspond juste au haut de page d'après la description.
il faut les mettre tel que ! la balise link est une balise justement ! ;D du coup, pas de balise à rajouter, et vis à vis de la position, tu peux la placer n'importe où tant que ça reste dans le head ! donc avant après la balise meta, ou titre ! ;)
il ne faut pas la mettre dans une balise par mégarde, mais sinon, tu es libre ! :)

Mais oui, ce templates est grand hahahaha
comment ça, ça n'a rien changé ? Tu as bien validé le templates ? Et utilisé cette bolise quelque part ? Et la police ne s'est pas modifiée ? Car normalement, ça fonctionne très bien ! Cela étant dit, on verra comment marche un forum avec les templates après les PA sinon, je vais te perdre et te démotiver ! x)

Mais je te le reconfirme, ça fonctionne pour TOUT ton site, pas seulement le templates, car les templates s'appelle les uns les autres ! ;) c'est un petit puzzle, genre, ça comment avec le template overall header, mais à un moment il y a une variable qui va afficher un autre templates à une certaine ligne etc etc ... :)

Code:
D'accord, du coup l'ordre ce serait ainsi : Police → CSS → HTML ? ( pour un code d'un post par exemple )
Tout à fait, restons sur cette base ! :)



Mais de rien, et non tu m'embêtes pas, ça fait plaisir de voir que tu es curieuse et motivée pour apprendre  ! ;D
Et moi ça m’entraîne à expliquer les notions ! :)


Première partie, on est bon ! :D
Citation :
Si je sautes une ligne pour le lien de la police ça va décaler le tout plus bas non ?
si, ça va t'ajouter un espace avant le début de ta div, comme l'interpréteur des messages sur FA prend en compte les retour à la lignes avec le entrée alors que le HTML non ! mais laisse ainsi pour le moment, ça aère le code comme on le corrige ! :)


Citation :
La propriété overflow sert à afficher des barres de défilement. En fait c'est vrai que je n'avais besoin de le préciser que pour les blocs histoire, caractère, apparence, étant donné que je n'ai pas précisé de hauteur du formulaire. Du coup là il s'étend jusqu'à la fin du formulaire. Par contre si j'avais mis une hauteur et que le texte sortait, là j'aurais dû mettre overflow, c'est ça ?
Je l'ai enlevée du coup ^^ .
c'est exactement ça ! :D à ne mettre que si on a une hauteur définie et qu'on risque d'en sortir avec des élements ! :)


partie 2
c'est vraiment étrange ton rendu ! moi ça fonctionne très bien pourtant !
Je viens de tester ici, et en effet, sur FA, ça plante sec dès qu'on a un font-size supérieur à 40 Oo
Je ne comprends pas ce bugg et je vais faire des recherches dessus !
En attendant, ouvre :
http://codepen.io/
et copie colle dans la case HTML :
Code:
<div style="background: grey;">
 
  <div style="font-size:28px;">Un titre</div>
  <div style="background: orange;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident deserunt, aperiam vero nemo perferendis tempora nostrum ea nam obcaecati harum in labore, velit sequi dolor asperiores placeat! Nesciunt, iusto, voluptate!B</div>
  </div>

c'est très moche graphiquement, mais c'est la question du jour ! xDDD
Là, comme tu peux le constater, tout est coller, c'est pas très chouette ...

ce qu'il faudrait c'est espacer les éléments pour déjà que le mot titre et le bloc orange ne soit pas collé au bord du cadre gris.
Et puis, il faudrait que le texte du paragraphe ne soit pas collé au bord non plus. Et enfin, qu'on est un espace entre le titre et le bloc orange.

et on va pratique pour que tu comprennes mieux les margin / padding ! et on reviendra sur ton code ensuite pour les spans ! :)

_________________________________________

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 : 20
Dim 29 Jan 2017 - 15:01
Coucou

Je profite de mon post pour vous félicitez du nouveau design :) ! Il est vraiment très chouette !!


J'en viens maintenant à mon cours :3 .


Oui j'ai compris normalement ^^ . Maintenant je vais pratiquer ça en fin de post j'ai vu, ça m'aidera davantage à comprendre encore :) .
D'acc, je n'hésiterais pas si j'ai des questions alors, merci :) . Mais je pense relire tout notre topic prochainement et à plusieurs reprises pour bien tout mémoriser.


Citation :
Oui, en effet, pour savoir combien on va décaler les éléments, il faut regarder le rendu, mais si tu code sur code pen, ou js bin ou autre site du genre, tu as l’aperçu en même temps ! c'est très pratique pour des petits codes ! Après ce premier exo, on codera une PA, et là, on créera une page HTML et je t'apprendrai à modifier des trucs sur un navigateur directement pour pas avoir à essayer 15 valeurs avant de trouver le bon espacement ! cela étant dit, ça t’entraîne à mémoriser les espacements, à te rendre compte combien 10px prennent comme place ... :)

D'accord merci ^^ . Je ne connaissais pas code pen et js bin. C'est vrai que cela s'avère pratique du coup. J'ai toujours utilisé les posts de forum ou bien plus récemment Notepad++ mais je faisais que de tous petits trucs pour tester.
Pfiou je suis curieuse d'essayer de faire cette PA mais je sens que je vais m'arracher les cheveux mdr. D'accord ^^ .


Citation :
Alors, oui sur google font, toutes les polices sont gratuites ! Il existe d'autres sites, mais perso, en tant que developpeur, je n'utilise que celui là ! x) Je trouve tjrs mon bonheur ! Les graphistes utilisent d'autres typo, mais je ne suis pas graphiste ... Et quand on me donne une maquette à intégrer avec une typo particulière, dans ce cas là, on me la fournis, car bien souvent elle est payante...
https://www.fontsquirrel.com/ est un bon site également que j'utilise, mais ça requiers un peu plus de technique, il faut installer les polices puis les héberger et les installer dans le CSS, on verra ça après les PA si tu veux ! :) car je pense, c'est un peu trop tôt pour t'embrouiller avec ça maintenant ^^

Oki :) , j'utiliserai google font dans ce cas, il y a du choix effectivement.
Ah oui fontsquirrel semble plus compliqué x) . Pourquoi pas le voir tout de même, histoire d'avoir des connaissances supplémentaires hihi !


Citation :
En effet, c'est possible d'écrire :

Code:
<div style="border: 1px solid red;"></div>

quand faut il le faire ? =>> JAMAIS.
voilà qui répond à ta question ? hahahaha en fait, c'est tout simplement pas propre de coder comme ça. Et comme tu dis, si on regroupe tout avant le code, c'est plus simple. Et aussi le fait de tout réunir au même endroit permet de centraliser les informations et d'être plus efficace pour les modifications, car sinon, on ne sait plus où donner de la tête pour si tu veux changer une couleur par exemple, si un coup la bordure et dans la feuille CSS, un coup dans le code lui même ... soit on passe tout entre les balises styles (donc au début du code, comme je vais te pousser à le faire de plus en plus, car c'est la meilleur méthode à faire), soit on utilise l'attributs style comme dans le code que je t'ai écrit plus haut.
Les mots class, id, style qu'on place dans les balises HTML, qui sont suivit d'un égale et des guillemets sont appelés des attributs.

Je suis rassurée de savoir que mes questions ne t'embêtent pas .
Eh oui, cela répond bien à ma question xD .  D'accord, je comprends. Mais par exemple dans mon code de présentation, le div style avec le fond, la bordure et tout, celui-ci faut le laisser non ? Ou on peut aussi faire ça avec un span class et inclure tout le reste du formulaire dedans ?
D'acc !


Ok pour la balise link ! Je retiens tout ça ^^ .

Citation :
Comment ça, ça n'a rien changé ? Tu as bien validé le template ? Et utilisé cette bolise quelque part ? Et la police ne s'est pas modifiée ? Car normalement, ça fonctionne très bien ! Cela étant dit, on verra comment marche un forum avec les templates après les PA sinon, je vais te perdre et te démotiver ! x)

Oui je l'ai validé mais justement je n'ai rien fait d'autre que le mettre dans le head XD . Je ne sais pas trop où l'appliquer, je comprends rien au fonctionnement des templates, c'est un charabia pour moi Ordi .
Oui je veux bien voir les templates, une fois que je serais effectivement familiarisée avec le reste ^^ .


Citation :
Mais je te le reconfirme, ça fonctionne pour TOUT ton site, pas seulement le templates, car les templates s'appelle les uns les autres ! ;) c'est un petit puzzle, genre, ça comment avec le template overall header, mais à un moment il y a une variable qui va afficher un autre templates à une certaine ligne etc etc ... :)

Oh je ne savais pas qu'ils étaient tous liés les uns les autres. Donc si j'ai bien compris, par exemple en mettant un lien d'une police d'écriture dans le template overall header, je pourrais l'appliquer dans n'importe quel autre template sans pour autant remettre le lien, c'est ça ?
Je pense que lorsqu'on sera à cette partie ce sera plus clair pour moi ^^ .

Ok pour l'ordre Police → CSS → HTML !

Je me répète mais tant mieux si je ne t'embête pas avec mes questions et si ça t'aide de ton côté pour expliquer les notions . J'en aurais sûrement pleins d'autres encore x) .


1ère partie

Parfait si tout est juste à présent :) !

Ok pour l'espace entre le link et la div ainsi que l'overflow ;) .


2ème partie

Ah bon, c'est un bug du coup. Mais ce que j'ai écris autrement c'est juste alors ?
Code:
<div style="text-align:center; font-family: 'The Girl Next Door', cursive; font-size: 100px; color: #564A4E; text-shadow: 3px 3px 8px black; border: 2px solid red;">Nom</div>
Tu me diras ce qu'il en est, si tu trouves la raison ^^ . Et si jamais ça marche vraiment pas, comment il faudrait faire du coup pour que la bordure entoure complètement ce qu'elle est censé entouré ? Enfin en gros on peut donner des dimensions à une bordure ( hormis la largeur du trait ) ?


Par contre du coup tu as juste oublié une de mes questions x) : Pourquoi sur Notepad il y a déjà beaucoup d'espace entre le haut de la bordure et Nom, ainsi qu'entre Nom et Identité, sachant que je n'ai précisé aucune marge ?


Exercice

J'ai ouvert codepen et mis le code que tu m'as fourni ^^ . Effectivement il y a mieux xD .
Du coup j'ai fait les modifications que tu m'as demandé, en espérant que je n'ai rien oublié et que ce soit correct. Pour les espaces je ne savais pas trop si tu parlais uniquement du côté gauche ou de tous les côtés du coup j'ai fait un truc différent par fond.
Code:
<div style="background: grey; padding: 8px 10px;">
 
  <div style="font-size:28px;">Un titre</div>
  <div style="background: orange; padding: 12px; margin: 15px 0 0 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident deserunt, aperiam vero nemo perferendis tempora nostrum ea nam obcaecati harum in labore, velit sequi dolor asperiores placeat! Nesciunt, iusto, voluptate!B</div>
  </div>

Désolée si je devais sauvegarder ou faire différemment, mais il faut un compte sur le site je crois.


D'accord ;) . Oui la pratique c'est la seule façon d'apprendre convenablement :3 ! Ok pour les spans ;) , je souhaite comprendre effectivement pourquoi ça ne marche pas ce que j'ai fait x) . Du coup je ne remets pas le code complet dans ce post.


Bonne après-midi ^^ !
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 : 2474
Sam 4 Fév 2017 - 20:57
Coucou ! :D
pardon pour mon absence! Mais du coup, j'étais concentrée sur mes partiels, et même si je suis passée sur épicode, j'avais pas trp envie de relire les codes etc... :s mais me revoilà ! :D

du coup, point par point !! ;D


Citation :
Eh oui, cela répond bien à ma question xD .  D'accord, je comprends. Mais par exemple dans mon code de présentation, le div style avec le fond, la bordure et tout, celui-ci faut le laisser non ? Ou on peut aussi faire ça avec un span class et inclure tout le reste du formulaire dedans ?
alors, je suis pas sur de comprendre ce que tu voulais dire par cette phrase. Ici, on va laisser le style dans la balise si c'était ça ta question. Une fiche de RP, c'est pas forcément nécessaire de séparer le CSS du HTML. Car après tout, tu n'as pas tjrs accès à la feuille CSS quand tu postes un RP sur un forum (sauf si tu es admin). Mais, pour le cas d'une fiche de présentation par exemple, que tu mets à la disposition du membre pour se présenter sur ton forum, si, il faut mettre une class dans ta balise et séparer le CSS. Déjà, pour faciliter la vie à ton petit membre qui va avoir un code plus léger que si tu avais des lignes et des lignes de CSS, et qui devrait chercher après le mot NOM à remplacer au milieu de ce bordel, et puis pour les MAJ, pour te simplifier la vie pour modifier les couleurs de TOUTES les fiches d'un coup ! :)

Si c'était pas ça la question, je m'en excuse, tu peux la reformuler auquel cas ?


Citation :
Oui je l'ai validé mais justement je n'ai rien fait d'autre que le mettre dans le head XD . Je ne sais pas trop où l'appliquer, je comprends rien au fonctionnement des templates, c'est un charabia pour moi Ordi .
Oui je veux bien voir les templates, une fois que je serais effectivement familiarisée avec le reste ^^ .
Oh je ne savais pas qu'ils étaient tous liés les uns les autres. Donc si j'ai bien compris, par exemple en mettant un lien d'une police d'écriture dans le template overall header, je pourrais l'appliquer dans n'importe quel autre template sans pour autant remettre le lien, c'est ça ?
Je pense que lorsqu'on sera à cette partie ce sera plus clair pour moi ^^ .
On verra ça plus tard si tu veux bien, car j'ai l'impression de te perdre dans toutes ces digressions du sujet principal !
Mais promis, une fois qu'on a terminé cette fiche, on passera au page HTML, pour t'expliquer l'organisation de tout ça et ça deviendra plus clair je pense ! :D
Cela étant dit, oui, une fois que tu as le lien dans le overall header, dans les balises head, que ton templates est validé, alors, tu n'as plus besoin d'écrire le link nulle part ailleurs, la police est importés sur ton forum, et tu peux l'utiliser partout, dans tes postes, pour le titre des tes caté etc etc... ! :)


Citation :
Ah bon, c'est un bug du coup. Mais ce que j'ai écris autrement c'est juste alors ?
Code:
<div style="text-align:center; font-family: 'The Girl Next Door', cursive; font-size: 100px; color: #564A4E; text-shadow: 3px 3px 8px black; border: 2px solid red;">Nom</div>
Tu me diras ce qu'il en est, si tu trouves la raison ^^ . Et si jamais ça marche vraiment pas, comment il faudrait faire du coup pour que la bordure entoure complètement ce qu'elle est censé entouré ? Enfin en gros on peut donner des dimensions à une bordure ( hormis la largeur du trait ) ?
oui,c'est juste ! :)
et non, tu ne peux pas donner une hauteur à ta bordure, étant donné que la bordure c'est bin, le contours de ton cadre ! En revanche tu peux donner une hauteur à ton cadre oui, et ça peut surement résoudre le bug de FA !

Mais je pense ici, le problème vient du fait du font-size extrême que tu utilises ... dire que tu veux mettre un titre à 100px, c'est énorme... Et je pense c'est ça qui fait planter le truc...


Citation :
Par contre du coup tu as juste oublié une de mes questions x) : Pourquoi sur Notepad il y a déjà beaucoup d'espace entre le haut de la bordure et Nom, ainsi qu'entre Nom et Identité, sachant que je n'ai précisé aucune marge ?
ha je suis désolé d'avoir manqué une question ! :s excuse moi ! Mais encore une fois, c'est ton font-size qui fait tout planter je pense ... Moi, quand je code, je dépasse rarement le 30px pour un titre ... Par exemple, les titres des catégories sur épicode sont en 30px, et c'est déjà gros !


Exercices.
C'est PARFAIT ! :D
C'est exactement ce genre de chose que j'attendais (et je n'attendais aps que tu partages le lien vers le codePen don't worry ! ;) je n'en ai même pas un, je copie/colle le code également ! :) )

du coup, j'espère cela t'a permis de mieux comprendre les différences entre padding/margin ! N'hésites pas si c'est encore flou !


Du coup, on retourne sur ton code. Et on va voir une notion assez importante ! Celle des propriétés de base des balises. On en a déjà parlé, mais vaut mieux bien être à l'aise avec cette notion ! Comme tu sais une balise span est une balise inline et la balise div est une balise block. Mais tu pourrais m'en dire plus sur ce que cela implique ?
et par conséquent, pourquoi dans ton code, tes éléments se placent ainsi ? :)


pour rappel de ton code :
Code:
<link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css'>
<style>.champs{color : #A90033;font-weight: bold;}
.soustitre{font-family: Trebuchet MS; font-size: 20px; color: #564A4E; text-shadow: 2px 2px 8px black;}</style>

<div style=" width: 700px; margin: 0 auto; background-image: url('http://i57.servimg.com/u/f57/15/06/04/58/fondcl10.jpg'); border-radius: 30px; border: 3px solid #A90033;padding:12px;">
<div style="text-align:center; font-family: 'The Girl Next Door', cursive; font-size: 100px; color: #564A4E; text-shadow: 3px 3px 8px black;">Nom</div>
<span class="soustitre">I. Identité</span>
<span class="champs">Nom :</span> Écrire ici.
<span class="champs">Sexe :</span> Écrire ici.
<span class="champs">Âge</span> Écrire ici.

<span class="champs">Meute :</span> Écrire ici.
<span class="champs">Rang :</span> Écrire ici.


<span class="soustitre">II. Histoire, caractère & apparence</span>

<fieldset style="border: 2px solid #B8B8BA; height: 350px; width: 600px;"><legend style=" color: #A90033; text-align: center: 20px; ; letter-spacing:2px; "><div style="text-shadow: 0px 0px 4px #000000;">♪ Mon histoire</div></legend><div style="height : 345px; width : 595px; overflow : auto;">
Votre histoire ici. 10 lignes minimum.
</div>
</fieldset>

<fieldset style="border: 2px solid #B8B8BA; height: 230px; width: 600px;"><legend style=" color: #A90033; text-align: center: 20px; ; letter-spacing:2px; "><div style="text-shadow: 0px 0px 4px #000000;">♪ Mon caractère</div></legend><div style="height : 225px; width : 595px; overflow : auto;">
Votre caractère ici. 5 lignes minimum.
</div>
</fieldset>
<div style="center; background-color: #B8B8BA; border: 1px solid #A90033;padding:12px; width: 600px; overflow : auto;">♪ Points forts :
♪ Points faibles :

♪ J'aime :
♪ Je n'aime pas :
</div>

<fieldset style="border: 2px solid #B8B8BA; height: 200px; width: 600px;"><legend style=" color: #A90033; text-align: center: 20px; ; letter-spacing:2px; "><div style="text-shadow: 0px 0px 4px #000000;"><a class="imag" href="#">♪ Mon apparence ( Place ton curseur sur " Mon apparence " )
<span><img border="0" alt="toto" src="ADRESSEURLDELIMAGE" /></span></a></div></legend><div style="height : 195px; width : 595px; overflow : auto;">
Votre apparence ici. 5 lignes minimum.</div>
</fieldset>


<span class="soustitre">III. Administration</span>

<span class="champs">As-tu lu le règlement ?</span> Écrire ici.
<span class="champs">Quel est le code ?</span> Écrire ici.

<span class="champs">T'engages-tu à être vraiment actif sur ce forum ?</span> Écrire ici.

<span class="champs">Comment as-tu découvert Loup Sauvage ?</span> Écrire ici.


<span class="soustitre">IV. Qui suis-je ?</span>

<span class="champs">Prénom ou surnom :</span> Écrire ici.
<span class="champs">Âge :</span> Écrire ici.
<span class="champs">Animal(aux) préféré(s) :</span> Écrire ici.

<span class="champs">Que penses-tu de ce forum à première vue ?</span> Écrire ici.
<span class="champs">Quelque chose pour l'améliorer ?</span> Écrire ici.

<span class="champs">Autre :</span> Écrire ici.
</div>

zoub !

_________________________________________

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 : 20
Mar 7 Fév 2017 - 22:57
Hellooo !

Pas de soucis ne t'en fais pas ;) ! J'étais moi-même plutôt occupée ces jours-ci. J'espère que tes partiels se sont bien passés !

Tu as répondu à ma question en disant qu'on allait laisser le style dans la balise ^^ . Mais par exemple, juste pour savoir, ce serait pas possible un truc du genre :

Code:
.cadre{width: 700px; margin: 0 auto; background-image: url('http://i57.servimg.com/u/f57/15/06/04/58/fondcl10.jpg'); border-radius: 30px; border: 3px solid #A90033;padding:12px;}</style>

<span class="cadre">Le code du reste du formulaire</span>

J'ai écrit " le code du reste du formulaire " mais je pense que tu as compris que je parlais du titre, des span pour Nom, Sexe, Age, ... Bref tout le reste x) .
D'accord pour la fiche de CSS ^^ . C'est vrai que j'aurais moins tendance à mettre dans la fiche, par peur de pas trop me retrouver, mais faudra que je prenne l'habitude x) . Ah et effectivement pour modifier des trucs ( couleur, ... ) je n'y avais pas pensé que du coup tous les posts avec le code seraient automatiquement modifiés, c'est vrai que c'est très pratique.


Citation :
On verra ça plus tard si tu veux bien, car j'ai l'impression de te perdre dans toutes ces digressions du sujet principal !
Mais promis, une fois qu'on a terminé cette fiche, on passera au page HTML, pour t'expliquer l'organisation de tout ça et ça deviendra plus clair je pense ! :D
Cela étant dit, oui, une fois que tu as le lien dans le overall header, dans les balises head, que ton templates est validé, alors, tu n'as plus besoin d'écrire le link nulle part ailleurs, la police est importés sur ton forum, et tu peux l'utiliser partout, dans tes postes, pour le titre des tes caté etc etc... ! :)

Oui ça vaut mieux qu'on voit cela plus tard ^^ .
D'accord :) .
Oh c'est cool ça !


Citation :
oui,c'est juste ! :)
et non, tu ne peux pas donner une hauteur à ta bordure, étant donné que la bordure c'est bin, le contours de ton cadre ! En revanche tu peux donner une hauteur à ton cadre oui, et ça peut surement résoudre le bug de FA ! Mais je pense ici, le problème vient du fait du font-size extrême que tu utilises ... dire que tu veux mettre un titre à 100px, c'est énorme... Et je pense c'est ça qui fait planter le truc...

Ah d'accord xD . Je vois les choses en grand haha !

Pas de soucis pour la question oubliée ;) . D'accord, faudra que je revoie la taille de mes titres alors et que je sois moins gourmande xD .


Exercice
Je suis contente si j'ai bien réalisé ce que tu m'as demandé :) !
D'accord :)
Oui j'ai bien mieux compris, merci ! :)


Code:
Du coup, on retourne sur ton code. Et on va voir une notion assez importante ! Celle des propriétés de base des balises. On en a déjà parlé, mais vaut mieux bien être à l'aise avec cette notion ! Comme tu sais une balise span est une balise inline et la balise div est une balise block. Mais tu pourrais m'en dire plus sur ce que cela implique ?
et par conséquent, pourquoi dans ton code, tes éléments se placent ainsi ? :)

Ouh, alors j'ai lu la différence entre les deux mais expliquer avec mes mots... XD
La balise span c'est pour un mot, ou une phrase.
La balise div ben, un bloc justement mdr. Le paragraphe c'en est un, je crois... Enfin je sais plus ^^' . Honnêtement si j'en dis plus c'est j'aurais regardé sur Internet.

Du coup dans mon code, eh bien div pour le cadre car c'est tout un bloc, tout le formulaire, pas simplement un truc qui tient en une ligne. C'est n'importe quoi mon explication j'en suis consciente mais j'ai toujours du mal à définir les choses ^^' .
Pour les champs " Nom " et tout ça ce sont simplement des mots, ce ne sont pas des blocs.
Je ne suis vraiment pas satisfaite de ma réponse >< .


Passes une bonne soirée, bisous
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 : 2474
Ven 10 Fév 2017 - 19:52
Citation :
Tu as répondu à ma question en disant qu'on allait laisser le style dans la balise ^^ . Mais par exemple, juste pour savoir, ce serait pas possible un truc du genre :

Code:
.cadre{width: 700px; margin: 0 auto; background-image: url('http://i57.servimg.com/u/f57/15/06/04/58/fondcl10.jpg'); border-radius: 30px; border: 3px solid #A90033;padding:12px;}</style>
<span class="cadre">Le code du reste du formulaire</span>
>> oui c'est tout à fait possible et c'est correct ! :)


Citation :
Ouh, alors j'ai lu la différence entre les deux mais expliquer avec mes mots... XD
La balise span c'est pour un mot, ou une phrase.
La balise div ben, un bloc justement mdr. Le paragraphe c'en est un, je crois... Enfin je sais plus ^^' . Honnêtement si j'en dis plus c'est j'aurais regardé sur Internet.

Du coup dans mon code, eh bien div pour le cadre car c'est tout un bloc, tout le formulaire, pas simplement un truc qui tient en une ligne. C'est n'importe quoi mon explication j'en suis consciente mais j'ai toujours du mal à définir les choses ^^' .
Pour les champs " Nom " et tout ça ce sont simplement des mots, ce ne sont pas des blocs.
Je ne suis vraiment pas satisfaite de ma réponse >< .

>> pas de soucis ne t'en fait pas ! Au moins tu essayes, et j'en suis contente !
C'est un peu confus quand même il me semble, alors je fais bien de m'arrêter sur cette notion ... J'espère que je vais réussir à expliquer simplement et clairement la notion ! :)

Un élément en bloc va provoquer un retour à la ligne.
Un élément en ligne ne va pas en provoquer.

ça semble bête, mais tout est dit.
Un bloc, on va pouvoir lui donner une taille (par défaut 100% du conteneur), une hauteur, des marges.
Un élément en ligne, on ne peut pas lui donner de taille, hauteur, marges...

démonstration :
3 blocs, même si les blocs ne prennent pas toute la place on a un retour à la ligne.



Code:
<div style="background: pink; height:50px;"></div><div style="background: grey; width:200px; height:200px;"></div><div style="background: orange; width:10px; height:50px;"></div>

et 3 éléments inline, qui se collent les un à la suite des autres ! :)
texte non j'irai pas à la ligne pas question

Code:
<span style="background:orange">texte</span><span style="background:pink"> non j'irai pas à la ligne</span><span style="background:red"> pas question</span>


Est ce que c'est plus clair ? :)

si oui, comprends tu la raison pourquoi tes informations de ton code nom, sexe, âge ... sont les uns à la suite des autres ? :)


_________________________________________

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 : 20
Sam 11 Fév 2017 - 15:23
Coucou :) !

D'accord merci :) .

Ah oui j'ai oublié de dire ça ^^ . Alors effectivement ça me confirme que le paragraphe est une balise block puisque chaque paragraphe va à la ligne.

Citation :
Un bloc, on va pouvoir lui donner une taille (par défaut 100% du conteneur), une hauteur, des marges.
Un élément en ligne, on ne peut pas lui donner de taille, hauteur, marges...

J'ai saisi mais quand tu dis qu'on peut pas donner de taille à un élément en ligne, c'est dans quel sens ? Parce que par exemple pour un mot on peut agrandir sa taille, faire que le truc soit décalé, ... Non ? Je pourrai écrire ça :

Code:
.champs{color : #A90033;font-weight: bold; font-size: 8px}


Pour les blocs, on peut pas forcer pour que deux soient sur la même ligne ?


En tout cas c'est déjà plus clair oui, merci ^^ .
Oui, ils se suivent tous car ils font parti de la balise span qui est inline. Mais c'est sur un éditeur de texte seulement puisque FA tient compte des sauts de ligne.
Par contre du coup, pour un éditeur de texte, faudrait mettre br partout ?
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 : 2474
Ven 17 Fév 2017 - 13:22
Pardon, excuse mon délai de réponse !

Alors, je disais la taille pour la hauteur et la largueur de l'élément. En effet, on peut styliser la taille du texte, mais pas du span.
exemple :

avec une div de 50px haut, 250 de large
ok

Code:
<div style="background: pink; height:50px; width:250px">ok</div>

la même chose avec span :
pas ok
Code:
<span style="background: pink; height:50px; width:250px">pas ok</span>


Citation :
Pour les blocs, on peut pas forcer pour que deux soient sur la même ligne ?
oui on peut ! :)
en utilisant :
display: inline-block;

ok
ok

Code:
<div style="background: pink; height:50px; width:250px;display: inline-block; ">ok</div><div style="background: green; height:50px; width:250px;display: inline-block;">ok</div>

Après, on a d'autres façon possible pour positionner des éléments blocs, on va les voir également !


Citation :
Mais c'est sur un éditeur de texte seulement puisque FA tient compte des sauts de ligne.
Par contre du coup, pour un éditeur de texte, faudrait mettre br partout ?
oui c'est tout à fait ça ! il faut mettre des br, ou alors utiliser les padding et margin pour mieux espacer les éléments !

du coup, si c'est tout bon, on revient à ton code et on optimise la partie des span ? :)

_________________________________________

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 : 20
Mar 21 Fév 2017 - 11:49
Hey ^^ !

Pas de soucis ne t'en fais pas.

Ah oui d'accord je vois bien la différence entre les deux du coup. Donc span c'est vraiment juste pour personnaliser le texte en-lui même.


J'avais déjà vu cette propriété pour aligner quelque part mais j'avais oublié. Merci pour la réponse :) .
Hâte de voir commencer positionner des éléments blocs ^-^ !


Citation :
oui c'est tout à fait ça ! il faut mettre des br, ou alors utiliser les padding et margin pour mieux espacer les éléments !

Ok :) !


Ouaip on peut revenir à mon code :) . Du coup je le reposte ci-dessous.

Code:
<link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css'>
<style>.champs{color : #A90033;font-weight: bold;}
.soustitre{font-family: Trebuchet MS; font-size: 20px; color: #564A4E; text-shadow: 2px 2px 8px black;}</style>

<div style=" width: 700px; margin: 0 auto; background-image: url('http://i57.servimg.com/u/f57/15/06/04/58/fondcl10.jpg'); border-radius: 30px; border: 3px solid #A90033;padding:12px;">
<div style="text-align:center; font-family: 'The Girl Next Door', cursive; font-size: 100px; color: #564A4E; text-shadow: 3px 3px 8px black;">Nom</div>
<span class="soustitre">I. Identité</span>
<span class="champs">Nom :</span> Écrire ici.
<span class="champs">Sexe :</span> Écrire ici.
<span class="champs">Âge</span> Écrire ici.

<span class="champs">Meute :</span> Écrire ici.
<span class="champs">Rang :</span> Écrire ici.


<span class="soustitre">II. Histoire, caractère & apparence</span>

<fieldset style="border: 2px solid #B8B8BA; height: 350px; width: 600px;"><legend style=" color: #A90033; text-align: center: 20px; ; letter-spacing:2px; "><div style="text-shadow: 0px 0px 4px #000000;">♪ Mon histoire</div></legend><div style="height : 345px; width : 595px; overflow : auto;">
Votre histoire ici. 10 lignes minimum.
</div>
</fieldset>

<fieldset style="border: 2px solid #B8B8BA; height: 230px; width: 600px;"><legend style=" color: #A90033; text-align: center: 20px; ; letter-spacing:2px; "><div style="text-shadow: 0px 0px 4px #000000;">♪ Mon caractère</div></legend><div style="height : 225px; width : 595px; overflow : auto;">
Votre caractère ici. 5 lignes minimum.
</div>
</fieldset>
<div style="center; background-color: #B8B8BA; border: 1px solid #A90033;padding:12px; width: 600px; overflow : auto;">♪ Points forts :
♪ Points faibles :

♪ J'aime :
♪ Je n'aime pas :
</div>

<fieldset style="border: 2px solid #B8B8BA; height: 200px; width: 600px;"><legend style=" color: #A90033; text-align: center: 20px; ; letter-spacing:2px; "><div style="text-shadow: 0px 0px 4px #000000;"><a class="imag" href="#">♪ Mon apparence ( Place ton curseur sur " Mon apparence " )
<span><img border="0" alt="toto" src="ADRESSEURLDELIMAGE" /></span></a></div></legend><div style="height : 195px; width : 595px; overflow : auto;">
Votre apparence ici. 5 lignes minimum.</div>
</fieldset>


<span class="soustitre">III. Administration</span>

<span class="champs">As-tu lu le règlement ?</span> Écrire ici.
<span class="champs">Quel est le code ?</span> Écrire ici.

<span class="champs">T'engages-tu à être vraiment actif sur ce forum ?</span> Écrire ici.

<span class="champs">Comment as-tu découvert Loup Sauvage ?</span> Écrire ici.


<span class="soustitre">IV. Qui suis-je ?</span>

<span class="champs">Prénom ou surnom :</span> Écrire ici.
<span class="champs">Âge :</span> Écrire ici.
<span class="champs">Animal(aux) préféré(s) :</span> Écrire ici.

<span class="champs">Que penses-tu de ce forum à première vue ?</span> Écrire ici.
<span class="champs">Quelque chose pour l'améliorer ?</span> Écrire ici.

<span class="champs">Autre :</span> Écrire ici.
</div>

Donc le titre, cadre et span « champs » c'était ok. Il faudra voir le fieldset et comme tu viens de le dire, les span d'abord !
Du coup j'avais le problème du span « soustitre » qui ne marchait pas sans que je comprenne pourquoi. D'ailleurs, en le postant tel quel dans ce message et en faisant « Prévisualiser » , juste pour vérifier que ça ne marchait bel et bien pas, ben la couleur pour les champs Nom, Sexe, ... n'apparait plus non plus alors qu'il me semble qu'avant j'avais réussi >< . Le gras c'est bon mais pas le rose. Raaah je vais m'arracher les cheveux ! Colère


Passes une bonne journée !
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 : 2474
Lun 27 Fév 2017 - 16:57
Coucou toi !

Citation :
D'ailleurs, en le postant tel quel dans ce message et en faisant « Prévisualiser » , juste pour vérifier que ça ne marchait bel et bien pas, ben la couleur pour les champs Nom, Sexe, ... n'apparait plus non plus alors qu'il me semble qu'avant j'avais réussi >< . Le gras c'est bon mais pas le rose. Raaah je vais m'arracher les cheveux !

Ok ! relax, c'est parce que tu as mal écris la partie style ... tu as mis ça :

Code:
<link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css'>
<style>.champs{color : #A90033;font-weight: bold;}
.soustitre{font-family: Trebuchet MS; font-size: 20px; color: #564A4E; text-shadow: 2px 2px 8px black;}</style>

Or, dans les réponses messages de FA, il ne faut pas faire de retour à la ligne dans le style, sinon, ça fait tout planter et c'est la loose .... du coup, pas de retour à la ligne entre la fin de champ et le début de sous titre, comme ça :
Code:
<link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css'>
<style>.champs{color : #A90033;font-weight: bold;} .soustitre{font-family: Trebuchet MS; font-size: 20px; color: #564A4E; text-shadow: 2px 2px 8px black;}</style>

et là, le style est de nouveau prit en compte ! ^^

Je vois que tu utilises des span pour tes titres... Personnellement, j'utiliserai des div à ta place, pour avoir des retours à la ligne, c'est plus hiérarchisé comme ça ...

Pour remplacer les fieldset, on va utiliser des div !
L'astuce c'est :
un trait , un texte, un trait. C'est 3 éléments sont positionnés sur une même ligne ! :)
Et en dessous, un bloc qui a une bordure à droite, gauche et en bas ! :)

Je te laisse essayer de bidouiller ? :)
Avec le display:inline-block; vu précédemment, tu devrais pouvoir réussir à faire quelque chose ! :)

N'hésites pas si tu as besoin de plus d'infos ! :)

_________________________________________

Life is a journey, enjoy the ride

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

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 : 2474
Mer 1 Mar 2017 - 19:08
@SLEEPY HOLLOW c'est ton anniversaiiiiire ? cadeau Célébration lutin

HAPPY BIRTHDAAAAAY !! :D

_________________________________________

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 : 20
Ven 3 Mar 2017 - 12:17
Coucouuu

Vraiment désolée, j'avais pas vu que tu avais répondu !

Merci beaucoup pour le joyeux anniversaire, c'est très gentil de me le souhaiter, mais en fait j'avoue que... Je n'ai pas mis la bonne date . Ça me gêne d'autant plus que tu me le souhaites. C'est que sur Internet, quand je connais pas trop, j'évite de donner des infos sur moi ( oui je sais c'est débile parce que c'est pas avec une date de naissance que je risque grand chose haha ). Bon si ça peut te rassurer j'ai juste décalé d'un mois xD . En fait je suis née le 1er avril x) . Désolée du coup T-T , vraiment je suis gênée, en tout cas l'attention me touche beaucoup ! Du coup, j'ai quand même modifié sur mon profil pour mettre la bonne date.


J'en viens maintenant à mon cours .

Citation :
Or, dans les réponses messages de FA, il ne faut pas faire de retour à la ligne dans le style, sinon, ça fait tout planter et c'est la loose .... du coup, pas de retour à la ligne entre la fin de champ et le début de sous titre

Ah oui maintenant ça marche hihi. Merci ! Je ne savais pas qu'il suffisait simplement d'un espace entre deux styles appliqués. Du coup maintenant c'est bon pour les deux.


Citation :
Je vois que tu utilises des span pour tes titres... Personnellement, j'utiliserai des div à ta place, pour avoir des retours à la ligne, c'est plus hiérarchisé comme ça ...

Ah d'accord. J'allais dire  « de nouveau mettre div style ? Parce que tu m'avais dit de changer » mais j'ai bugué pendant une minute et j'ai de nouveau confondu div / span / class / id, mais là c'est revenu xD . Heum, du coup ça donnerait ça ? :

Code:
<link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css'>
<style>.champs{color : #A90033;font-weight: bold;} .soustitre{font-family: Trebuchet MS; font-size: 20px; color: #564A4E; text-shadow: 2px 2px 8px black;}</style>

<div style=" width: 700px; margin: 0 auto; background-image: url('http://i57.servimg.com/u/f57/15/06/04/58/fondcl10.jpg'); border-radius: 30px; border: 3px solid #A90033;padding:12px;">
<div style="text-align:center; font-family: 'The Girl Next Door', cursive; font-size: 100px; color: #564A4E; text-shadow: 3px 3px 8px black;">Nom</div>
<div class="soustitre">I. Identité</div>
<span class="champs">Nom :</span> Écrire ici.
<span class="champs">Sexe :</span> Écrire ici.
<span class="champs">Âge</span> Écrire ici.

<span class="champs">Meute :</span> Écrire ici.
<span class="champs">Rang :</span> Écrire ici.


<div class="soustitre">II. Histoire, caractère & apparence</div>

<fieldset style="border: 2px solid #B8B8BA; height: 350px; width: 600px;"><legend style=" color: #A90033; text-align: center: 20px; ; letter-spacing:2px; "><div style="text-shadow: 0px 0px 4px #000000;">♪ Mon histoire</div></legend><div style="height : 345px; width : 595px; overflow : auto;">
Votre histoire ici. 10 lignes minimum.
</div>
</fieldset>

<fieldset style="border: 2px solid #B8B8BA; height: 230px; width: 600px;"><legend style=" color: #A90033; text-align: center: 20px; ; letter-spacing:2px; "><div style="text-shadow: 0px 0px 4px #000000;">♪ Mon caractère</div></legend><div style="height : 225px; width : 595px; overflow : auto;">
Votre caractère ici. 5 lignes minimum.
</div>
</fieldset>
<div style="center; background-color: #B8B8BA; border: 1px solid #A90033;padding:12px; width: 600px; overflow : auto;">♪ Points forts :
♪ Points faibles :

♪ J'aime :
♪ Je n'aime pas :
</div>

<fieldset style="border: 2px solid #B8B8BA; height: 200px; width: 600px;"><legend style=" color: #A90033; text-align: center: 20px; ; letter-spacing:2px; "><div style="text-shadow: 0px 0px 4px #000000;"><a class="imag" href="#">♪ Mon apparence ( Place ton curseur sur " Mon apparence " )
<span><img border="0" alt="toto" src="ADRESSEURLDELIMAGE" /></span></a></div></legend><div style="height : 195px; width : 595px; overflow : auto;">
Votre apparence ici. 5 lignes minimum.</div>
</fieldset>


<div class="soustitre">III. Administration</div>

<span class="champs">As-tu lu le règlement ?</span> Écrire ici.
<span class="champs">Quel est le code ?</span> Écrire ici.

<span class="champs">T'engages-tu à être vraiment actif sur ce forum ?</span> Écrire ici.

<span class="champs">Comment as-tu découvert Loup Sauvage ?</span> Écrire ici.


<div class="soustitre">IV. Qui suis-je ?</div>

<span class="champs">Prénom ou surnom :</span> Écrire ici.
<span class="champs">Âge :</span> Écrire ici.
<span class="champs">Animal(aux) préféré(s) :</span> Écrire ici.

<span class="champs">Que penses-tu de ce forum à première vue ?</span> Écrire ici.
<span class="champs">Quelque chose pour l'améliorer ?</span> Écrire ici.

<span class="champs">Autre :</span> Écrire ici.
</div>

Tout simplement ?


Remplacement des fieldset

Code:
Pour remplacer les fieldset, on va utiliser des div !
L'astuce c'est :
un trait , un texte, un trait. C'est 3 éléments sont positionnés sur une même ligne ! :)
Et en dessous, un bloc qui a une bordure à droite, gauche et en bas ! :)

Ouh là là je sens que je vais galérer xD . J'ai vraiment aucune idée de comment faire... Il faut 4 div ? Un pour chaque trait, le texte, puis le bloc ?
D'ailleurs je voulais tout rassembler dans une div avec les marges mais en fait je crois pas que je peux sinon l'ombre du texte ne va pas s'appliquer qu'au titre mais au contenu dans le cadre aussi. Enfin je crois ^^ . Et je ne souhaite pas que mon titre soit centré mais juste un peu décalé comme avec fieldset.

J'ai vu que pour faire un trait il faut utiliser la balise
Code:
<hr>
mais je ne sais pas où la placer. Et encore je ne suis pas sûre qu'elle serve à ça dans mon code.

J'ai réfléchi mais vraiment je ne vois pas du tout comment faire >< .

Bonne journée !
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 : 2474
Sam 11 Mar 2017 - 22:45
haaaa pas grave !
bah, je te l'aurai dit en avance ! En vrai, je regarde rarement les anniversaires en plus, j'étais tombé sur le tiens par coup de chance x)

Alors, oui ton code, c'est bien ça ! :D

Maintenant passons au fieldset :)

Citation :
Ouh là là je sens que je vais galérer xD . J'ai vraiment aucune idée de comment faire... Il faut 4 div ? Un pour chaque trait, le texte, puis le bloc ?
D'ailleurs je voulais tout rassembler dans une div avec les marges mais en fait je crois pas que je peux sinon l'ombre du texte ne va pas s'appliquer qu'au titre mais au contenu dans le cadre aussi. Enfin je crois ^^ . Et je ne souhaite pas que mon titre soit centré mais juste un peu décalé comme avec fieldset.

J'ai vu que pour faire un trait il faut utiliser la balise hr
Alors, on va pas utiliser la balise hr. Oui, elle existe, mais elle est pas très pratique, elle fait une ligne de base de la même couleur  que le fond. Mais moi, je pensait à une balise div, qui a une bordure, mais une height toute petite ! ;)

Et pour gérer cela, on va utiliser le display !
On va y aller progressivement.

Je t'ai montré pas mal de truc sur les displays, avec els explications, n'hésites pas à remonter pour relire ça ! :)

et sinon, regardes ce code:
2 balises mises en inline block. Il existe une propriété : vertical align, qui permet de les aligner les deux par le centre de façon vertical. La premiere balise est vide, juste une bordure. La deuxième contient le texte.

Reste plus qu'à jouer sur les tailles, et on peut avoir un petit trait, le texte, puis une gros trait :)
ok

Code:
<div style="border: 3px solid pink; height:0; width:200px; display: inline-block; vertical-align:middle;"></div><div style="border:1px solid green; width:250px;display: inline-block; vertical-align:middle; padding-left: 3px;">ok</div>

_________________________________________

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 : 20
Mar 21 Mar 2017 - 14:10
Hello !

J'espère que tu vas bien. Je suis désolée d'avoir autant tardé à répondre, j'avais des jours où mes horaires de boulot m'empêchaient d'aller sur l'ordinateur et j'ai en parallèle dû préparer un dossier et une lettre de motivation pour un oral, qui m'a pris des heures et des heures x) .

Haaan mais ça porte malheur :OO ! Hahaha j'rigole x)


Citation :
Alors, oui ton code, c'est bien ça ! :D

D'accord merci :) .


Citation :
Alors, on va pas utiliser la balise hr. Oui, elle existe, mais elle est pas très pratique, elle fait une ligne de base de la même couleur  que le fond. Mais moi, je pensait à une balise div, qui a une bordure, mais une height toute petite ! ;)

Ok, je m'en doutais qu'on allait pas utiliser hr ^^ . Hr... ça me fait penser à Person of Interest


Ah oui donc il va falloir utiliser plusieurs div ^^ . Ça fait lourd comme code en fait x) . Merci pour les explications supplémentaires :) .
Je me suis servie de ton code pour m'aider, mais je comprends pas trop l'utilisation du vertical-align:middle malgré tes explications. J'ai recopié ton code et je les ai enlevés pour voir mais je n'ai pas vu de différence.

Et du coup on peut faire un bloc div et le fermer sans rien écrire entre ? Comme tu avais fait là :

Code:
<div style="border: 3px solid pink; height:0; width:200px; display: inline-block; vertical-align:middle;"></div>


Bref du coup j'ai fait le début avec déjà les couleurs que j'avais prises mais je suis pas sûre du tout que ce soit ça en fait, parce que tu as dit qu'il ne reste plus qu'à jouer sur les tailles pour avoir un petit trait, le texte, puis une gros trait. Dans mon code le cadre a la même largeur partout ^^ .

Code:
<div style="border: 1px solid #B8B8BA; height:0; width:30px; display: inline-block; vertical-align:middle;"></div>Texte<div style="border:1px solid #B8B8BA; height:0; width:600px;display: inline-block; vertical-align:middle; "></div>

Rendu :
Texte



J'attends de savoir ce qu'il en est avant d'essayer de poursuivre. Tu avais dit :
Citation :
Et en dessous, un bloc qui a une bordure à droite, gauche et en bas ! :)

Du coup je suppose que ça va être un code avec border-left, right et bottom. Mais ça me semble bizarre en fait le tout comme construction pour inclure un contenu dedans, enfin ça doit être parce que je n'ai pas l'habitude x) .


Bonne journée !
Contenu sponsorisé
Page 1 sur 1

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