avatar
Sexe : Féminin
Date d'inscription : 14/01/2017
Messages : 1529
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 xMia et Alek !  


Spoiler:

Merci Funeral !  

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 : 289
Fidèle au poste !
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 : 1529
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 xMia et Alek !  


Spoiler:

Merci Funeral !  

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 : 289
Fidèle au poste !
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 : 1529
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 xMia et Alek !  


Spoiler:

Merci Funeral !  

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 : 289
Fidèle au poste !
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 : 1529
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 xMia et Alek !  


Spoiler:

Merci Funeral !  

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 : 289
Fidèle au poste !
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...
avatar
Sexe : Féminin
Date d'inscription : 14/01/2017
Messages : 1529
Maxi-Code master
Voir le profil de l'utilisateurhttp://www.amai-gakuen.org/
# Re: La classe enflammée de Nanto !le Jeu 21 Juin 2018 - 9:32
Et bien c'est parfait ! Ce code est bien plus aéré que les précédents, tu t'en es bien sortie !
Pour l'espacement des lettres tu y étais presque ; on utilise la propriété letter-spacing suivi d'une valeur en pixels (je mets souvent 2 ou 3 pixels, pour ma part). La dernière ligne de ton CSS n'était pas nécessaire effectivement car, les div auxquelles tu n'attribues pas de “background” vont automatiquement avoir un fond transparent.

As-tu trouvé cette fiche difficile ? Ou bien l'exercice était-il relativement simple pour toi ?

Je te laisse rajouter des hovers ; tu peux la personnaliser à ta guise et, si tu veux l'ajouter en LS, il faudra juste ajouter ton crédit quelque part. :3 Je pense qu'après ça, nous pourrons voir le float, qui va nous permettre de placer différemment un texte à côté d'une image par exemple. Le float est moins recommandé car un peu désuet, mais c'est important de le connaître tout de même car il peut être utile dans certaines situations. ^^


Merci xMia et Alek !  


Spoiler:

Merci Funeral !  

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 : 289
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: La classe enflammée de Nanto !le Jeu 21 Juin 2018 - 14:02
Hey ^^ Merci !

Euh, alors, pour letter-spacing, c'est ce que j'ai fait non ? La différence réside dans la forme des lettres, qui sont plus hautes et plus fines sur le modèle, c'est différent, je crois... Pour la fin du code, ce n'était pas le background mais la couleur de la police, enfin ça revient au même je crois (juste qu'on ne voyais pas beaucoup la différence alors je préférais être sûre).

En général, c'était plutôt facile, pas hyper rapide. Mais j'ai du chercher quelques propriétés. Hum, deux trois questions d'abord, pour le cadre à droite de l'image, il y a moyen de contenir le texte à l'intérieur de la zone colorée ? Et pour les espacement, des les régler automatiquement à la largeur de la ligne ? Et de gérer les propriétés de l'overflow ?

Je vais voir ce que je peux faire (tu sais, avec le bac et tout ça, je dors debout) mais peut-être quelques illuminations au survol, et quelque chose sur l'image... ça pourrait être sympa (ou absolument pas)

Ça marche alors, direction le float !
avatar
Sexe : Féminin
Date d'inscription : 14/01/2017
Messages : 1529
Maxi-Code master
Voir le profil de l'utilisateurhttp://www.amai-gakuen.org/
# Re: La classe enflammée de Nanto !le Jeu 28 Juin 2018 - 11:14
Coucou !
Oui, la différence réside juste dans la typographie choisie mais ce n'est pas important. c: Je préférais te rappeler la propriété letter-spacing vue que tu avais dû faire des recherches pour ton exercice.
Pour contenir le texte dans le cadre, il faut le coder un petit peu autrement. Au lieu d'attribuer un overflow: auto à ton blockhistoire, tu vas encadrer ton texte d'une div, et lui attribuer une hauteur via le css. C'est à cette div que tu vas appliquer l'overflow, que tu retireras donc de ta class blockhistoire

Code:
.blockhistoire div {height: 315px; overflow: auto;}

Concernant tes deux autres questions, j'ai peur de ne pas avoir très bien compris T_T
L'espacement réglé automatiquement à la largeur de la ligne ? Tu parles du "text-align: justify" ? cette propriété permet de "justifier" le texte, c'est-à-dire qu'il occupe toute la place du block en largeur, par ligne.
Et pour ta dernière question, qu'entends-tu par les propriété de l'overflow ? :o


Merci xMia et Alek !  


Spoiler:

Merci Funeral !  

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 : 289
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: La classe enflammée de Nanto !le Jeu 28 Juin 2018 - 17:59
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.





Waw, pourquoi j'ai pas pansé au justify... Ah bah, euh...
Pour l'overflow, oui, mais ça fait moins bien comme ça... Est-il possible par exemple de gérer la scroll barre comme un objet séparé ? Par exemple dans cette fiche, la coler au cadre de la div précédente en modifiant sa hauteur et sa position ? Ou ici, sur ce forum, les barres sont bleues et plus fines, on peut faire ça en CSS ou bien c'est un autre langage ?
avatar
Sexe : Féminin
Date d'inscription : 07/06/2016
Messages : 289
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: La classe enflammée de Nanto !le Mar 17 Juil 2018 - 18:48
Coucou,

Désolée du double post, juste pour te prévenir que je vais disparaître le 21 pour partir en vacances, mais je reviens, je suis toujours aussi motivée ! (Au cas ou j'oublie de poster ça entre temps ^^')

++ <3
avatar
Sexe : Féminin
Date d'inscription : 14/01/2017
Messages : 1529
Maxi-Code master
Voir le profil de l'utilisateurhttp://www.amai-gakuen.org/
# Re: La classe enflammée de Nanto !le Mer 18 Juil 2018 - 12:12
Coucou !
Pardon pour le temps de réponse, je ne vois pas quand mes élèves postent dans le cours T_T je vais mettre le sujet en surveillé :c pas de soucis pour l'absence, en tout cas !

Concernant tes questions : non, on ne peut pas vraiment modifier la scrollbar indépendamment du reste ; on peut seulement la décoller du texte avec un padding dans celui-ci (ou la coller avec un padding: 0). Cependant, il est tout à fait possible de modifier son apparence, mais je crois que les modifications ne sont pas visibles sur tous les navigateurs (il me semble par exemple que sur firefox, qui est tout de même un navigateur très usité, le css n'est pas pris en compte).


Tu verras, dans ce code-ci (sous hide du coup) que j'ai mis la scrollbar en jaune ; et tu peux voir dans le css que le code le permettant est celui-ci :

Code:
::-webkit-scrollbar {
  width: 6px;
  background-color: #ffffff;
}

::-webkit-scrollbar-thumb
{ background-color: #decb88;
}

Le premier sélecteur modifie le fond de la scrollbar (et tu peux modifier sa taille également), et le deuxième permet de modifier le fond de l'ascenseur en lui-même (donc jaune, ici. :3)


Merci xMia et Alek !  


Spoiler:

Merci Funeral !  

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 : 289
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: La classe enflammée de Nanto !le Jeu 19 Juil 2018 - 19:26
Oh ça marche ^^ Merci ^^ (Bon, ça change tous ceux de la page, mais merci ^^ ça me servira pour mon prochain forum)
avatar
Sexe : Féminin
Date d'inscription : 07/06/2016
Messages : 289
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: La classe enflammée de Nanto !le Dim 5 Aoû 2018 - 9:27
Pardon du DP, mais je suis de retour par ici !
avatar
Sexe : Féminin
Date d'inscription : 14/01/2017
Messages : 1529
Maxi-Code master
Voir le profil de l'utilisateurhttp://www.amai-gakuen.org/
# Re: La classe enflammée de Nanto !le Sam 11 Aoû 2018 - 10:28
Coucou !
Ravie de te revoir par ici. :3 Vu que le display: inline-block semble avoir été assez bien acquis, je te propose de voir le float. Il sert par exemple pour des mises en page comme ceci :



En plaçant donc le texte à côté de l'image ; celui-ci l'entourant. On peut également positionner des blocks avec cette méthode, mais je te conseille plutôt le inline-block pour procéder ainsi.

Ce que va faire le float, c'est sortir l'élément du flux pour être placé soit à droite, soit à gauche. Ainsi, le texte va venir l'entourer naturellement ; puisqu'étant un élément inline. Voici le code utilisé pour l'exemple ci-dessus :



J'ai donc seulement ajouté un float: left à l'image, puis un petit margin pour ne pas que le texte se retrouve collé à cette dernière. :3 En soit, c'est une notion assez simple à acquérir, donc dis-moi si tu as d'éventuelles questions ! Super héro


Merci xMia et Alek !  


Spoiler:

Merci Funeral !  

Merci Naütilus. ! :'D

Merci Reine des Ténèbres !  Coeur 2

Merci Eskimo. !  Coeur


Merci Milou ! Coeur 2
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum