avatar
Sexe : Féminin
Date d'inscription : 14/01/2017
Messages : 1279
Maxi-Code master
Voir le profil de l'utilisateurhttp://www.amai-gakuen.org/
# La classe enflammée de Nanto !le Mer 6 Juin 2018 - 10:59
Coucou ! Bienvenue dans ta petite partie cours.  ^^
Je vais d'abord revenir sur ton formulaire, histoire de mieux savoir ce sur quoi nous allons travailler.

Dans un premier temps, je vais m'attarder un peu sur tes codes mis en exemples. Tu me vois venir, vu que j'ai déjà soutenu à quel point la propreté d'un code était important pour fonctionner au mieux, et pour être lisible par tous les navigateurs. En effet, j'ai pu voir beaucoup de balises br qui peuvent être retirées pour alléger considérablement le code, puisqu'on préférera les paddings ou margins pour créer ces espaces (ou encore, pour des simples sauts à la ligne d'un span à un autre, lui attribuer la fonction de block. ^^)

J'ai vu aussi passer des balises qui ont des class et des styles ; pourquoi ne pas avoir mis tout ça directement dans la class, par exemple ?

Code:
<div class="lien" style="overflow:auto; padding: 10px; height: 140px;">

tu aurais pu l'intégrer dans le CSS,  il est là pour ça ;)

Il y a beaucoup de margin avec de grandes valeurs : souhaites-tu aborder les positions dès maintenant pour pouvoir t'en passer  à l'avenir ?  ^^ On commencera par le display : inline-block ; on verra un  peu le float (même s'il est moins usité, c'est toujours mieux de te donner toutes les façons de positionner un élément) et puis quand tu auras assimilé ces deux choses, on pourra aborder la position absolute voire le flexbox ^^

Mais avant toute chose, je vais te soumettre quelques petites questions ! J'ai donné les mêmes à Chhaya :

Qu'est-ce que le HTML, et à quoi sert-il ?
Sais-tu ce qu'est une balise block, et peux-tu m'en citer une ?
Sais-tu ce qu'est une balise inline, et peux-tu m'en citer une ?
Qu'est-ce qu'une balise auto-fermante ?
Qu'est-ce que l'indentation ?
Qu'est-ce que le CSS, et à quoi sert-il ?
Connais-tu les propriétés et valeurs de positionnement, ou pas du tout ?


Je rajouterai une autre question :

Sais-tu ce que sont les sélecteurs, et à quoi ils servent ? :

Voilà ! Tu trouveras peut-être certaines questions triviales, mais elles sont là pour nous servir de base. Coeur 3


Merci Funeral !  

Spoiler:

Merci Naütilus. ! :'D

Merci Reine des Ténèbres !  Coeur 2

Merci Eskimo. !  Coeur


Merci Milou ! Coeur 2
avatar
Sexe : Féminin
Date d'inscription : 07/06/2016
Messages : 130
Membre timide
Voir le profil de l'utilisateur
# Re: La classe enflammée de Nanto !le Mer 6 Juin 2018 - 15:03
Coucou !

Oui, je sais, la propreté... Enfin je range déjà pas ma chambre, ni mon ordi, alors il va t'en falloir des efforts pour que je m'occupe de celle de mes codes ^^'

Ah oui, ça c'est parce que je n'utilisais pas les class multiples avant hier, mais j'ai tenté dans mon code hibou, je te le mets sous hide pour la proposer comme LS ensuite, mais pour l'instant c'est encore pour notepad++ et il ne fonctionne que sur fond blanc :



Oh, oui ça m'intéresse ! En général, je m'arrange surtout pour avoir un cadre de valeurs définies, qui soit centré, pour pouvoir manipuler la position des autres, mais j'ai essayer de déchiffrer le tuto de positionnement sans succès...

Voici le questionnaire rempli :

Qu'est-ce que le HTML, et à quoi sert-il ? Le HTML est un langage informatique (oui oui, sans blague), qui désigne "Hyper Text Markup Langage", soit une manière de hiérarchiser à l'aide de balise la structure des pages. On y crée l'agencement des blocs ou éléments, qui sont généralement nommés.
Sais-tu ce qu'est une balise block, et peux-tu m'en citer une ? C'est une balise dont l'élément prend par défaut toute la largeur possible. Il me semble que les balises "div" sont les plus utilisées.
Sais-tu ce qu'est une balise inline, et peux-tu m'en citer une ? Hum... Non, je ne sais pas, j'ai déjà vu le mot plusieurs fois mais c'est tout.
Qu'est-ce qu'une balise auto-fermante ? Aussi appelée "balise orpheline", c'est une balise qui n'a pas besoin d'être fermée, comme l'indique sont nom. Elles sont reconnaissables par un / juste avant la fin de la balise. C'est par exemple le cas de la balise "br/", même si je dois en limiter l'usage, j'en prend note.
Qu'est-ce que l'indentation ? C'est les tabulations en début de lignes, les alinéas non ? L'idée est surtout de créer une hiérarchie plus lisible et de pouvoir vérifier rapidement si la balise est fermée et si oui, au bon endroit.
Qu'est-ce que le CSS, et à quoi sert-il ? Le CSS est une autre langage. "Cascade Style Sheet", c'est ça ? Il permet de donner les propriétés des objets, en fonction de son "type" (?) (a, div, li...), d'une de ses class, id...
Connais-tu les propriétés et valeurs de positionnement, ou pas du tout ? Fixed, relative, absolute et j'en ai oublié... Ah, et le float, mais il m'en manque encore un, non ?
Sais-tu ce que sont les sélecteurs, et à quoi ils servent ? : Les sélecteurs, c'est la manière d'attribuer un groupe de propriétés à un groupe d'éléments. Par exemple "a" pour tous les liens, .nomdelaclass ou #nomdelid, mais on peut les combiner pour s'adresser par exemple seulement aux liens contenus directement dans un block nommé sommaire ( .sommaire > a {propriété : valeur;} ) ou inderectement contenu, c'est à dire dans une ou plusieurs balises elles-même contenues dans sommaire ( .sommaire * a {propriété: valeur;} ?)
avatar
Sexe : Féminin
Date d'inscription : 14/01/2017
Messages : 1279
Maxi-Code master
Voir le profil de l'utilisateurhttp://www.amai-gakuen.org/
# Re: La classe enflammée de Nanto !le Ven 8 Juin 2018 - 10:20
Bonjour ! Pardon pour le temps de réponse, avec le boulot et les à-côtés c'est pas toujours évident, mais me revoilà 8D

Merci d'avoir pris le temps de répondre aux questions.
Du coup, je comprends mieux pourquoi tu as intégré la propriété style en plus de l'attribution d'une class. Oh et pour la propreté, ne t'en fais pas, ça s'apprend ! Au début, je mettais des div partout et pour tout et n'importe quoi, des class pour le plus dérisoire des span et je faisais des assemblages douteux. xD Je suis restée à ce stade pendant un moment mais peu à peu, on s'améliore et on apprend à aérer notre code. c:

Le code que tu as montré est pas mal du tout ! Les balises sont mieux gérées et les styles/class ne sont plus mélangées.

Pour commencer, je pense qu'on peut déjà voir le inline-block. C'est quelque chose d'assez facile à aborder mais, avant de t'expliquer comment faire,  je veux savoir comment tu places les éléments sans le positionnement.  

J'aimerais que tu me codes une div, et dans cette div, je veux deux autres div côte à côte. Pour le CSS, c'est libre, tu peux mettre en forme comme tu le souhaites ! Le plus important c'est de voir comment tu codes deux div côte à côte sans le inline-block, entre autres. :3


Merci Funeral !  

Spoiler:

Merci Naütilus. ! :'D

Merci Reine des Ténèbres !  Coeur 2

Merci Eskimo. !  Coeur


Merci Milou ! Coeur 2
avatar
Sexe : Féminin
Date d'inscription : 07/06/2016
Messages : 130
Membre timide
Voir le profil de l'utilisateur
# Re: La classe enflammée de Nanto !le Ven 8 Juin 2018 - 10:37
T'inquiète pas de souci ^^ J'ai fait simple parce que je voulais répondre tout de suite mais que je dois aller en cours donc... (Voilà, les margin me sauvent encore la mise...) C'est ce que tu me demandais ?




Code:
<div class="autour"><div class="dedansg"></div><div class="dedansd"></div></div>
<style>.autour{height: 300px; width: 500px; border: solid black 3px;}.dedansg{height: 150px; width: 150px; border: double orange 3px;}.dedansd{height: 150px; width: 150px; border: double orange 3px; margin: -150px 0px 0px 150px;}</style>
avatar
Sexe : Féminin
Date d'inscription : 14/01/2017
Messages : 1279
Maxi-Code master
Voir le profil de l'utilisateurhttp://www.amai-gakuen.org/
# Re: La classe enflammée de Nanto !le Sam 9 Juin 2018 - 15:14
Bien ! C'était tout à fait ce que je te demandais de faire.  c:
Avant d'en venir à ma version du code, je vais revenir sur les balises inline. Je te laisse d'abord lire ce tutoriel qui t'expliquera la différence entre les balises div et span, soit une balise bloc, et une balise inline.

Tu l'auras compris, pour positionner un élément, nous avons parfois besoin qu'une div se comporte comme un span (donc une balise inline) et vice versa, tout en gardant leurs caractéristiques de base. En l’occurrence, il n'est pas possible de placer deux div à la suite (sauf avec les margins, mais on va essayer de faire autrement (; )... Sauf si on lui applique un display: inline-block !

Appliqué à une div, le display: inline-block, lui permettra de se placer à côté d'un span ou d'une div affublée de la même propriété.
Appliqué à un span, le display: inline-block lui permettra quant à lui, de se comporter comme une div, tout en gardant sa propriété inline : on pourra lui donner une hauteur, une largeur, lui attribuer des margins, etc.

C'est exactement de cette manière que l'on va procéder pour placer tes deux blocks !




Tadam ! Dans les faits, le résultat est le même. Cependant, j'ai retiré ton margin, pour appliquer le fameux display: inline-block sur le block orange.

Code:
<div class="autour"><div class="dedansg"></div><div class="dedansg"></div></div>
<style>.autour{height: 300px; width: 500px; border: solid black 3px;}.dedansg{height: 150px; width: 150px; border: double orange 3px; display: inline-block;}</style>

Et comme le CSS des deux block est le même, j'ai supprimé le .dedansd pour attribuer aux div la même class, soit .dedansg. On gagne un espace considérable dans le CSS.

As-tu des questions, ou bien est-ce que tu as assimilé les subtilités de cette propriété ?


Merci Funeral !  

Spoiler:

Merci Naütilus. ! :'D

Merci Reine des Ténèbres !  Coeur 2

Merci Eskimo. !  Coeur


Merci Milou ! Coeur 2
avatar
Sexe : Féminin
Date d'inscription : 07/06/2016
Messages : 130
Membre timide
Voir le profil de l'utilisateur
# Re: La classe enflammée de Nanto !le Sam 9 Juin 2018 - 15:33
J'ai compris merci !

Arf, j'aurai pu utiliser les class multiples aussi pour ne rajouter le margin que sur celui de droite... Bon, je teste !

Sans :



Code:
<div class="mondiv"></div><div class="mondiv"></div>
<style>.mondiv{border: red solid 3px; height: 100px; width: 150px;}</style>

Avec :



Code:
<div class="mondivbis"></div><div class="mondivbis"></div>
<style>.mondivbis{border: red solid 3px; height: 100px; width: 150px; display: inline-block}</style>

C'est magique ! Et avec les span + margin-right pour les espacer :



Code:
<span class="mondivter"></span><span class="mondivter"></span>
<style>.mondivter{border: red solid 3px; height: 100px; width: 150px; display: inline-block; margin-right: 10px;}</style>

Mais si on a des hauteurs différentes, ça s'aligne sur le bas... Il y a une méthode pour aligner ça en haut, non ? J'ai du apercevoir ça quelque part, mais je ne m'en souviens plus...



Code:
<span class="mondivquater un"></span><span class="mondivter deux"></span>
<style>.mondivquater{border: red solid 3px; width: 150px; display: inline-block; margin-right: 10px;}.un{height: 150px}.deux{height: 100px}</style>
avatar
Sexe : Féminin
Date d'inscription : 14/01/2017
Messages : 1279
Maxi-Code master
Voir le profil de l'utilisateurhttp://www.amai-gakuen.org/
# Re: La classe enflammée de Nanto !le Jeu 14 Juin 2018 - 12:16
Coucou ! C'est franchement très bien, tu as bien assimilé les tutoriels. c: Je te laisse enfin ce lien qui fait un peu tout le récap', et qui pourra te servir de mémo si jamais tu as un doute sur la fonction du inline-block. :3

Pour répondre à ta question, effectivement les blocks de hauteurs différentes s'alignent par défaut sur le bas. Pour y remédier, rien de plus simple : ajoute un

Code:
vertical-align: top;

au block que tu veux aligner en haut (ou tu peux l'ajouter sur les deux, ça marche aussi !).

Si tu te sens prête à utiliser ces propriétés, je te propose un exercice.
Je t'ai graphé cette maquette de fiche de liens :

https://zupimages.net/up/18/24/x7ku.png

J'aimerais que tu la codes tout en ayant en tête la propriété display: inline-block que nous venons de voir ensemble.  Bien sûr, je te fournis ci-dessous toutes les informations nécessaires au codage de cette petite fiche (que tu pourras mettre en LS si ça te dit ^^).

Largeur de la fiche : 500 pixels
Hauteur de la fiche : 600 pixels.
Couleur du fond : #1e1e1e
Couleur du fond du block de droite et des blocks "amis", "ennemis", "amour": #2c2c2c
Couleur des contours blancs et du texte : #ebebeb
Couleur de fond du block "Liens Recherchés" : #1a1a1a
Avatar exemple : http://i.imgur.com/Q0U2bfH.png

Pour la taille des blocks, ils ne sont pas à l'échelle, donc tu es libre à ce niveau-là. ;)
Si tu as des questions, je reste à disposition !  Coeur 2


Merci Funeral !  

Spoiler:

Merci Naütilus. ! :'D

Merci Reine des Ténèbres !  Coeur 2

Merci Eskimo. !  Coeur


Merci Milou ! Coeur 2
avatar
Sexe : Féminin
Date d'inscription : 07/06/2016
Messages : 130
Membre timide
Voir le profil de l'utilisateur
# Re: La classe enflammée de Nanto !le Jeu 14 Juin 2018 - 15:54
Coucou !

Voilà, je crois que c'est bon ! Ce ne sont pas les bonnes polices de caractères, ou bien je ne sais pas comment étirer le texte comme il le faut... Mais j'ai essayé de faire au mieux. J'ai fait quelques recherches pour le background-clip, le text-transform et un peu pour le line-height (juste que je me suis fait avoir, ce n'était pas spacing ^^')

Nantosuelte
22 ans ~ Métier exercé ~ Orientation ~ Extérieur à Amai
Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test.
Liens recherchés
Amis
Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test.
Ennemis
Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test.
Amour
Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test.





Code:
<div class="fond"><div class="titre">Nantosuelte</div><div class="soustitre">22 ans ~ Métier exercé ~ Orientation ~ Extérieur à Amai</div><div class="avatarfiche"></div><div class="blockhistoire">Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. </div><div class="liensrecherches">Liens recherchés</div><div class="liens"><div class="titrelien">Amis</div>Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. </div><div class="liens"><div class="titrelien">Ennemis</div>Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. </div><div class="liens d"><div class="titrelien">Amour</div>Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. Ceci est un texte de test. </div></div>


<style>.fond{height: 580px; width: 480px; padding: 10px; background-color: #1e1e1e; color: #ebebeb}.titre{font-size: 50px; text-align: center; letter-spacing: 5px; text-transform : uppercase;}.soustitre{font-size: 15px; text-transform : uppercase; margin-top: 5px; word-spacing: 7px;}.avatarfiche{height: 330px; width: 210px; background-image: url(http://i.imgur.com/Q0U2bfH.png); background-position: center center; background-repeat: no-repeat; border: solid 1px #ebebeb; margin-top: 20px; display: inline-block;}.blockhistoire{display: inline-block; vertical-align: bottom; height: 330px; width: 236px; padding: 5px; border: solid 1px #ebebeb; margin-left: 10px; background-clip: content-box; background-color: #2c2c2c; overflow: auto; font-size: 14px; line-height: 15px;}.liensrecherches{text-transform: uppercase; height: 30px; width: 250px; background-color: #1a1a1a; font-size: 20px; text-align: center; padding-top: 5px; float: right; margin: 10px -10px 5px 200px;}.liens{width: 140px; height: 115px; margin-right: 17px; display: inline-block; overflow: auto; font-size: 10px; padding-right: 5px; line-height:12px;}.d{margin-right: 0px;}.titrelien{font-size: 15px; background-color: #2c2c2c; padding: 5px; padding-left: 10px;}.fond div{color:#ebebeb}</style>

Pour cette dernière ligne de CSS, c'est juste un doute, mais normalement je n'en ai pas besoin je crois ? J'aurais bien ajouté aussi un hover ou deux mais j'ai préféré le laisser tel quel...
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum