avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 9 Jan - 15:40
Hop, désolée du retard, j'avais pas vu que tu m'avais répondu >///<

J'ai bien envie d'essayer quelque chose pour le nouveau concours oui ! Il faut que je prépare une maquette/schéma de mon côté pour commencer ?
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Mer 10 Jan - 0:36
Coucou,

En effet on aura besoin d'un schéma, je te laisse donc t'en charger.
Tu peux le mettre en hide si tu veux que ça soit cacher.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 11 Jan - 23:09
Du coup, voila, c'est tout simple et je sais pas si c'est bien (moi j'aime bien en tout cas, mais voila ^^'), mais j'ai fait ça :

C'est pas vraiment 100% à l'échelle, la police est random il faudra que j'en choisisse une sur Google Fonts, j'ai oublié d'intégrer le bouton pour aller vers le dernier message posté dans mon schéma.... mais j'imagine que je le placerai à côté ou sous le pseudo du posteur, sa place habituelle quoi.

Wala, du coup, comment je dois m'y prendre maintenant ? D'ailleurs, je pense coder ça avec un tableau, du coup. Sauf si tu en profite pour m'apprendre à coder sans, je sais pas ? Mais ça m'a l'air facile avec un tableau, en fait.
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Ven 12 Jan - 1:37
Je trouve ça joli. Par contre tu ne penses pas avoir quelque chose de réactif ? Un hover, une sorte de transition ou un truc du genre, si tu vois ce que je veux dire. Les gens aiment les trucs qui bougent XD.

Pour la forme c'est comme tu veux. Tu peux coder ça en tableau si tu veux, mais le problème avec les tableaux c'est que ça rend la gestion du CSS un peu plus difficile. Aussi comme les tableaux ne sont pas fait pour structurer du contenu et que cette fois le code sera aussi jugé dans le concours ça risque de te pénaliser. Mais après c'est pas si important, notre but est de pratiquer le codage et non de gagner le concours.

Sinon on peut aussi en profiter pour apprendre le positionnement vu qu'on a fini avec le HTML. Ce qui suit sera essentiellement pratique parce que le CSS ça se retient avec la pratique et ce n'est pas aussi strict et limité que le HTML.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 12 Jan - 16:10
Ah, oui, j'ai pas noté pour mes effets d'hover, mais je pensais mettre des petites choses toutes simples, du style la couleur de fond qui change ou les bords qui s'arrondissent quand on passe la souris (sur les sous-forum par exemple), les lettres du titre qui s'espacent... Enfin un peu le genre que j'avais fait pour le cotm, j'adore ce genre de truc ! ^^'

Alors que genre mettre une image qui cache le dernier message ou les sous-forum et qui disparait au survol de la souris, je suis pas du tout fan, j'aime bien quand tout est visible du premier coup d'œil. À la limite si le dernier message est trop voyant et gênant, je pourrais en baisser l'opacité un peu (qu'on puisse un peu le lire quand même) pour le faire apparaitre à 100% au passage de la souris, ça peut être sympa aussi. J'sais pas, c'est une idée qui m'a traverser l'esprit là comme ça, mais ça m'a l'air pas si mal...

Du coup, j'aimerais bien essayer de voir le positionnement pour faire ça. Si c'est trop compliqué et que j'y arrive pas, je pourrais toujours revenir aux tableaux après, au pire x'3

Envoyé depuis l'appli Topic'it
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Ven 12 Jan - 23:01
Bonsoir,

C'est bon alors si tu veux faire des effets simples ça veut dire qu'on va pas trop altérer la structure HTML du code et qu'on va aussi éviter le positionnement en relatif et absolu qui est la partie la plus difficile à comprendre dans le positionnement à mon avis. Du coup je ne pense pas qu'on aura de soucis.

Je dis que le positionnement via la propriété position est le plus dur mais logiquement c'est le premier type de positionnement à apprendre. Si tu veux, tu peux voir ce tutoriel qui est une introduction aux différents types de positionnement. Il y a certainement des parties pas assez claires donc si tu as des questions je suis là. Sache juste que ça te servira simplement pour connaître déjà les différents mode de positionnement et non pour les apprendre. Donc même si tu ne comprends pas tout ce n'est pas grave on reviendra là-dessus après.

Le type de positionnement dont on aura plutôt besoin est le flexbox. Dans un ordre chronologique ça devrait être la dernière chose à apprendre pourtant c'est le type de position le plus simple mais aussi le plus moderne et le plus correct. Donc le tuto qui nous intéresse est celui-là.

Je te passe le tuto à l'avance pour que tu aies le temps de le voir autant de fois que tu veux avant qu'on se lance dans le CSS.

Pour l'instant, on va commencer la structure HTML de notre catégorie.
Pour être le plus fidèle possible au template, sache que le titre de catégorie est un h2, le titre du forum doit être un lien tout comme le titre du dernier sujet et bien sûr les sous-forums. Je pense qu'il sera plus simple d'utiliser la balise p pour la description. Pour le reste on utilisera des div.

Une petite astuce qui peut te servir sur codepen, tu peux introduire rapidement une class dans ta balise en tapant balise.nom_de_class et taper la touche Tab.
Par exemple : h2.cat_titre + Tab va donner :
Code:
<h2 class="cat_titre"></h2>

Petite question : Quelle est la différence entre class et id ?


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 13 Jan - 22:11
Waoh, c'est hyper compliqué ?_? Je sais même pas quelle question poser, tellement j'ai l'impression d'avoir rien compris X_x Je vois à peu près comment je devrais coder avec un tableau, mais avec le positionnement, c'est le trou noir !

Bon, alors du coup, j'ai commencé à faire quelque chose... j'ai déjà mis le plus gros du css je pense (couleurs, polices, etc), j'ai juste rien mis pour ce qui concerne le positionnement et tout, vu que j'ai rien compris... j'ai pas mis d'effets hover non plus mais c'est pas important, j'attends ton avis vu que j'ai peut-être aussi fait du total n'importe quoi pour le reste ?_? Tu me diras !



Je vais me cacher très très loin maintenant... >///<

Ah ! Et la différence entre id et class, eh bien... id c'est pour un élément précis qui ne sert qu'une fois sur la page, alors que class ça peut s'appliquer à plusieurs éléments. C'est bien ça ? C'est parce que je devrais utiliser un id quelque part dans mon code que tu demande ?
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Dim 14 Jan - 0:11
Salut,

Ah tu es rapide :p

ça me semble être une bonne base. Je n'ai pas vérifié ton CSS en détail mais dans l'ensemble c'est bon aussi.

Première des choses c'est la police, il est recommandé de mettre le lien dans le HTML pour que la police charge au même temps que le contenu. Donc tu l'ajoutes au début du code via la balise link qui est une balise orpheline. D'ailleurs tu trouveras le lien directement sur Google Fonts.

Aussi on va éviter la balise br qui est déconseillée. Si tu regardes bien la partie dernier message tu as un lien par ligne donc on peut simplement cibler la balise lien de cette partie et modifier son type d'affichage de inline (par défaut) à block via la propriété display.
Quand je dis cibler c'est donc de cette façon :

Code:
.dernier_message a {
display:block;
}

l'espace entre le nom de la classe et la balise qu'on cible est important, ça veut dire que dans l'élément dont le nom de class est "dernier_message" toutes les balises lien a auront ce CSS.

Dans la même optique, on va parler des liens des sous-forums.
Les liens sont par défaut inline et la valeur par défaut correspond au rendu de notre maquette. Quand tu mets un lien par div, ça va te mettre un lien par ligne et on va devoir définir une largeur à chaque bloc et le positionner, ce qui va juste compliquer la tâche pour rien. Sache que les éléments inline ne prennent pas les propriétés margin, width et height. Toutes les autres propriétés sont normalement applicables, dans ce cas, le background-color et le padding.
Donc on va plutôt mettre tous les liens dans une div et cibler les liens pour leur attribuer le CSS.

Au fait je ne suis pas sûre parce que je n'ai pas lu le sujet du concours mais je crois qu'on doit faire seulement un forum ? Je te laisse vérifier comme ça tu ne fais pas deux fois le travail pour rien.

Pour le tuto, qu'est ce que tu trouves compliquer, le premier ? le deuxième ? les deux ?
En tout cas on va voir ça en détail dès qu'on aura arranger notre HTML.

Edit : Ah pour l'id c'est bon, c'est plutôt le contraire, le code des catégories est répété autant de fois qu'on a des catégories dans le forum et donc les id sont à proscrire.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Dim 14 Jan - 3:00
Ahah, je sais pas si je suis rapide, j'ai mis au moins 3 ou 4h pour faire ce code, mais je tenais absolument à l'avancer un maximum pour avoir l'impression de pouvoir faire quelque chose, après avoir fait face à mon incompétence totale en me perdant dans les explications du positionnement

Héé, pour la police, d'habitude je met dans le HTML, mais au moment de la sélectionner, j'ai remarqué qu'on pouvait la mettre dans le css et je m'étais dit que ce serait peut-être mieux. je  me suis trompé apparemment, je la déplace dans le HTML alors !

Pour le lien des derniers messages, je connaissais cette façon de cibler les liens oui (je l'ai d'ailleurs utilisé dans mon code pour mettre tous les liens en gris et enlever le surlignement, je sais pas si c'est bien de l'avoir fait comme je l'ai fait mais bon.. x'3). Mais bref, je savais pas qu'il fallait éviter les br. Du coup, je fait comme t'as dit !

Pour les sous-forums, je me demandais un peu justement comment on allait faire en les mettant dans des div... j'aurais du y penser XD Mais leur mettre la même hauteur que le bloc du nombre de sujets et messages, ça va être compliqué non ?

Pour le concours, c'est au moins un forum, rien nous empêche d'en mettre plusieurs, si j'ai bien lu. Je préfère en mettre deux parce que c'est plus visuel, ça permet d'en mettre un avec des sous-forums, l'autre sans, ce genre de truc, ça donne une meilleure idée, je trouve. Enfin, c'est juste moi. C'est vrai que tant que le code est pas prêt, c'est plus simple de travailler avec un seul, j'en supprimer un ^^'

Bref ! Voila le nouveau code avec mes modifications maintenant !



Pour les tutos, c'est surtout le deuxième que j'ai vraiment rien compris du tout ! Le premier, je pense avoir compris le principe du fonctionnement pour les position relative et absolute, même si je pense que j'aurais bien du mal à le mettre en pratique... Par contre, j'ai appris l'existence de display:inline-block tout à l'heure du coup, et je me demande si c'est pas utilisable pour mon cas, en fait ? Genre avec un float:left sur l'image et... c'est probablement une mauvaise idée en fait, je dis n'imp ^^'

Sinon, je comprends pas trop en quoi utiliser un paragraphe est plus simple pour la description ? Les marges en haut et en bas risquent de gêner non ? Il faudra ajouter un margin:0px du coup ?

Sorry, je parle trop >//<
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Lun 15 Jan - 15:34
En regardant le CSS de plus près :
- Tu n'es pas obligée d'utiliser h3 pour le titre du forum, de plus c'est un lien donc bon pas besoin de balise bloc vu que tu n'attribues pas de hauteur ou marge à ton élément.
- La div nombre_sujets aura besoin d'une largeur fixe pour qu'on puisse mettre les liens à côté. De même pour le bloc description.
- Au fait pour la description tu peux mettre une div, quand j'ai dit que c'est plus simple c'est pour gérer me texte à l'intérieur de la div. Moi je mets un p dans une div pour d'une part avoir la marge automatiquement et surtout pour que la barre de défilement ne soit pas lier à mon bloc. Par exemple quand tu veux mettre un bloc rond ou arrondi si l'overflow est appliqué à la div qui aura l'arrondi et le background elle déforme le rond. Je ne sais pas si c'est clair, au fait pour te donner une idée de quoi je parle rien ne vaut un bon exemple :  
Une seule div :
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat obcaecati asperiores et debitis unde mollitia blanditiis nihil deleniti dignissimos minus dolores, animi necessitatibus non. Deserunt ex tempore perspiciatis consectetur obcaecati.
Lorem ipsum dolor sit amet consectetur adipisicing elit.


Pour ton cas tu n'es pas obligée d'avoir deux balises donc tu peux mettre juste une div sans le paragraphe. Mais si tu veux déplacer la barre de défilement tu auras besoin d'une balise enfant dans ta div.

- J'ai vu que tu as fixé les largeurs en pourcentage, c'est bien pour un template surtout vu que ça permet d'ajuster la largeur selon celle du forum. Attention cependant aux valeurs des marges et espacement en pixels qui risquent de faire bugger ton code. Donc tu vas devoir calculer ces marges en pourcentage aussi. L'idéal serait d'avoir un code sans l'unité px.

- On va en effet utiliser un inline-block sur les liens des sous-forums. L'avantage de ce type d'affichage est justement de permettre aux éléments inline d'accepter une hauteur, largeur et marge. Dans notre cas, on va simplement définir une hauteur fixe qui égale celle du bloc des statistiques.

- Si tu penses avoir mieux compris le float, on peut très bien l'utiliser pour positionner tous les éléments. Disons que le float est la façon la plus ancienne pour positionner.
Pour le float il y a ce petit tuto posionnement float et pour plus de détails celui-là qui est en anglais mais je crois que ça ne devrait pas être un problème pour toi.

Donc pour le positionnement en float on va d'abord définir une largeur et une hauteur à tous nos éléments sauf pour les titres c'est pas obligatoire.
L'image est elle en pixel, 80x90 il me semble, donc sur une base de 800px on lui définit une largeur de 10%.

J'ai déjà écrit un pavé alors je m'arrête là pour l'instant x)


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 16 Jan - 22:11
Okayyy, donc je corrige tout çaaa !

Pour le h3, je savais pas, ahah, et vu que les catégories étaient en h2, je me suis dit que les forums devaient être en h3 XD Mais c'est vrai que maintenant que j'y pense, dans le codage de base, le nom du forum est pas écrit particulièrement grand donc c'est pas un titre... bref ! Du coup, j'ai enlevé le h3 et j'ai attribué la class directement à la balise lien, comme ça :
Code:
<a href="" class="forum_titre">Nom du forum</a>
Et donc j'ai changé le css de la classe forum_titre de cette façon :
Code:
.forum_titre {
  font-family:'Merienda';
  font-size:30px;
  color:#bdd5e0 !important;
  display:block;
}
Le !important après la couleur est là parce que sinon le lien s'affichait en gris, à cause de ma classe forum_bloc, qui englobe tout l'affiche du forum et pour lequel j'ai mis que les liens s'affichaient en gris (pour pas avoir à le remette partout après...).

2h plus tard...

Booon, du coup j'ai défini une largeur en % partout, j'ai changé certains trucs, et j'ai utilisé un float:left et des display:inline-block pour mettre les blocs côte à côte, ce dont je parlais sur mon message précédent... Parce que je comprends rien à rien au reste et à ce qu'on fait et je sais plus du tout ce que je suis en train de faire là maintenant ! Je me suis perdu, le résultat est là, mais je suis sûre que mon code c'est du grand n'importe quoi, mais là ça me donne mal à la tête, je crois que je vais abandonner... Le codage, c'est vraiment pas pour moi, je laisse tomber...

Désolée de t'avoir fait perdre ton temps, voila mon truc final du coup :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Mer 17 Jan - 1:02
@Tigrlion a écrit:
Pour le h3, je savais pas, ahah, et vu que les catégories étaient en h2, je me suis dit que les forums devaient être en h3 XD Mais c'est vrai que maintenant que j'y pense, dans le codage de base, le nom du forum est pas écrit particulièrement grand donc c'est pas un titre...
Au fait si, à la base le titre des forums est un h3 mais la plupart de temps on supprime cette balise en modifiant le template. Comme j'ai dit avant si le CSS par défaut d'une balise te gêne, comme les marges des headings, tu peux ne pas l'utiliser.

@Tigrlion a écrit:Le !important après la couleur est là parce que sinon le lien s'affichait en gris, à cause de ma classe forum_bloc, qui englobe tout l'affiche du forum et pour lequel j'ai mis que les liens s'affichaient en gris (pour pas avoir à le remette partout après...).

Si tu veux te débarrasser de la mention important tu peux sortir le lien de la div forum_bloc.

@Tigrlion a écrit:Booon, du coup j'ai défini une largeur en % partout, j'ai changé certains trucs, et j'ai utilisé un float:left et des display:inline-block pour mettre les blocs côte à côte, ce dont je parlais sur mon message précédent... Parce que je comprends rien à rien au reste et à ce qu'on fait et je sais plus du tout ce que je suis en train de faire là maintenant ! Je me suis perdu, le résultat est là, mais je suis sûre que mon code c'est du grand n'importe quoi, mais là ça me donne mal à la tête, je crois que je vais abandonner... Le codage, c'est vraiment pas pour moi, je laisse tomber...

J'ai du mal à prendre ça au sérieux, non mais tu as fait un très bon travail, ton code est très bien ! Crois-moi quand le positionnement n'est pas bon y a aucun moyen d'avoir le bon rendu x)
J'espère juste que mes réponses ne sont pas exaspérantes, j'avance doucement pour ne pas écrire trop de choses dans un seul message et te décourager. Je ne m'attendait pas à ce que tu t'attaques au positionnement déjà, j'avais l'intention de t'expliquer ça dès qu'on aurait fixé d'abord les largeurs et hauteurs c'est pour ça que j'ai dit que je m'arrête là dans mon message précédent avec l'intention de poursuivre dans le prochain. Je ne sais pas si tu as fait attention mais quand je t'ai donnée les tutos j'ai dit que c'était juste pour te donner une idée sur ce qu'on va faire après.

Donc voici mes dernières remarques sur ce travail :

En réduisant la fenêtre du navigateur, le code nécessite une largeur minimale de 570px environ pour que tout reste en place. Du coup que dis-tu d'ajouter un min-width ?

Il y a deux façons générales pour noter les marges.

> Les marges individuelles :
- margin-top
- margin-right
- margin-bottom
- margin-left
Quand on veut utiliser les marges individuelles l'ordre n'est pas important et bien sûr si la marge d'un côté est la valeur par défaut tu n'as pas à spécifier la marge de ce côté.

> Le raccourci :
- margin
Si tu veux utiliser le raccourci, tu n'as plus le droit de mettre les marges individuelles, de plus ici l'ordre est important.

Le raccourci se présente selon le nombre de valeurs fournies de 4 façons :
- margin : top right bottom left;
remarque que la direction suit celle des aiguilles d'une montre.

- margin : top right/left bottom;
donc on a trois valeurs, la marge du haut et du bas sont différentes mais la marge à droit est égale à la marge à gauche.

- margin : top/bottom right/left;
ici margin-top = margin bottom et margin-left = margin-right. et donc on a deux valeurs.

- margin : valeur;
ici la marge est égale de chaque côté.

Pour centrer un bloc la marge droite et gauche doivent prendre la valeur auto.

Donc si on veut par exemple centrer un bloc et lui mettre une marge en haut de 5px on écrit :
Code:
margin: 5px auto 0;

J'espère que c'est clair.

Donc avec ça on aurait fini l'exercice libre, j'attends ta réponse pour voir si tu veux qu'on reprend nos cours et on entame la partie CSS.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 17 Jan - 4:55
Je suis désolée pour tout à l'heure, j'étais pas très bien et je me suis vraiment sentie nulle et inutile alors j'ai craqué... Mais c'est ma faute aussi, je veux aller trop vite, quand on commence à me montrer un truc, je veux tout savoir faire tout de suite alors je tente et comme j'y arrive pas, ça me décourage.

Enfin bref.

Ça me dérange pas de laisser le !important, vu que je préfère laisser les liens du forum_bloc, ça me parait mieux ainsi, parce que ça permet d'affecter à la fois les sous forums et les derniers messages, ainsi que les liens qu'on pourrait éventuellement mettre dans la description, ou ce genre de chose. Non ?
Oh, et en parlant de liens, le display:block sur les derniers messages me dérange un peu, vu que ça fait que le lien se met sur la ligne tout entière plutôt que seulement sur le texte (de même sur le forum_titre que j'ai ajouté quand j'ai enlevé le h3), c'est dérangeant si je remet les br comme j'avais fait au début ?

J'ai mis un min-width à 575px du coup, c'est vrai que c'est mieux ! Pour les margins, je ne savais pas du tout pour les raccourcis (et tes explications sont très claires, oui !), je mettais toujours partout des trucs style
Code:
margin:auto;
margin-top:5px;
si je voulais centrer un bloc avec une marge de 5 px en hauteur... J'aurais pourtant du les deviner, vu qu'avec les paddings, j'ai bien utilisé le raccourci. Je vais corriger mon code à ce niveau à du coup !

Donc mon code est plutôt bien au final ?

J'attends ton approbation sur ça, et après c'est bon, on en aura fini avec ce code et je pourrais le terminer de mon côté pour le présenter au concours !

Je veux bien qu'on reprenne le cours maintenant, désolée pour tout ça ! Je crois qu'avoir voulu tenter de voir le positionnement pour ce code était pas forcément la meilleure idée, même si je suis heureuse de l'avoir fait sans utiliser de tableau, ça me parait effectivement beaucoup mieux ainsi ! Mais je vais essayer de moins me précipiter maintenant pour qu'on y aille lentement et que je ne m'y perde plus... ^^'
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Mer 17 Jan - 12:15
@Tigrlion a écrit:Ça me dérange pas de laisser le !important, vu que je préfère laisser les liens du forum_bloc, ça me parait mieux ainsi, parce que ça permet d'affecter à la fois les sous forums et les derniers messages, ainsi que les liens qu'on pourrait éventuellement mettre dans la description, ou ce genre de chose. Non ?

Tu peux garder ça mais quand j'ai dit de sortir de lien c'est simplement déplacé ça :
Code:
<a href="" class="forum_titre">Nom du forum</a>
avant la div forum_bloc pour qu'il ne prend pas le gris appliqué aux liens du bloc du forum, ça n'a rien à voir avec les autres liens parce que tout ce qui est dans la div sera gris.

Code:
Oh, et en parlant de liens, le display:block sur les derniers messages me dérange un peu, vu que ça fait que le lien se met sur la ligne tout entière plutôt que seulement sur le texte (de même sur le forum_titre que j'ai ajouté quand j'ai enlevé le h3), c'est dérangeant si je remet les br comme j'avais fait au début ?
Tu peux remettre les br si ça t'arrange mieux, y a pas de soucis là-dessus.
Ah ça me fait penser au fait tu veux mettre le code dans une page HTML ou directement dans le message ? Et pour le h3 tu peux le remplacer par une div pour éviter les marges si tu veux avoir le lien dans un bloc par contre, là on a pas mis de display: block, si ? Tu peux aussi éviter la div si tu mets le lien en dehors du bloc comme dit avant.

Donc je crois que c'est bon, là c'était juste des suggestions et tu fais ce qui te semble le plus simple. Si tu veux mon avis je pense qu'il est pas tellement grave d'avoir des br dans un bloc de texte, donc pour le dernier message c'est plus simple que d'essayer d'avoir un saut de ligne avec du CSS. Par contre pour le titre c'est beaucoup plus simple d'utiliser les propriétés des div que des br. Donc que tu mets le lien avant la div du forum ou dans une div propre à lui c'est mieux et plus correct que de "positionner" avec deux br à la suite.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 17 Jan - 12:52
D'accord, ça marche !

Si je le met pas dans la div forum_bloc, je suis obligé d'ajouter un text-decoration:none ainsi un margin-left dans mon forum_titre pour l'aligner avec le reste, du coup je prends la deuxième option, ça veut dire que je met une div vide comme ça autour de mon lien forum_titre ?
Code:
<div><a href="" class="forum_titre">Nom du forum</a></div>

Code:
Ah ça me fait penser au fait tu veux mettre le code dans une page HTML ou directement dans le message ?
Je comptais mettre ça dans une page HTML à la fin, oui.

Du coup, là c'est bon ! ^^'
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Mer 17 Jan - 13:10
C'est bon !
Juste pour infos, j'étais entrain de coder tout à l'heure et j'ai mis des liens verticalement du coup je me suis rappelée qu'au fait pour que la largeur ne soit pas toute cliquable il vaut mieux utiliser display : inline-block plutôt que block pour aligner les liens verticalement et que seul le texte soit cliquable.

Sinon aussi pour infos, on utilise jamais inline-block sans height. Sur firefox ça fonctionne mais sur Chrome ou Safari sans la hauteur ça donne un truc bizarre x)


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 17 Jan - 13:36
Mais si je fais inline-block, ça revient pas à la ligne du coup ?_? À moins que je mette une largeur à 100% pour chaque bloc ? Je crois que je vais rester sur les br pour cette fois ^^'

Du coup, tu m'as fait réalisé que je pensais jamais à aller voir ce que donnaient mes codes sur Chrome, alors je suis allé voir et j'ai pu corriger quelques détails qui apparaissaient pas pareils que sur Firefox effectivement ! x'3 Et tous mes inline-block ont bien une hauteur défini du coup, maintenant, tout est bon ! ^o^

Merci beaucoup pour ton aide, je crois qu'on peut reprendre les cours maintenant :3
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Mer 17 Jan - 16:20
Je me rappelle avoir promis de parler des tableaux donc voilà :)

Un tableau c'est quoi ?

Un tableau est un ensemble structuré de données présentées en lignes et colonnes.
Il permet de rechercher rapidement et facilement des valeurs qui indiquent un type de connexion entre différents types de données. Par exemple : des étudiantes et leurs notes, des produits et leurs prix, un jour et la semaine etc.
Dans ce sens, un tableau peut avoir un titre ou légende, un entête et un pied.
Attention, les tableaux HTML doivent être utilisés pour les tables de données uniquement et non pour faire de l'organisation et mise en page.

Création des tableaux :

En exemple, je vais prendre un tableau de données qui présente les notes d'un petit groupe d'élèves.

Pour créer un tableau, comme tu le sais déjà, on utilise la balise double table qui veut dire simplement "tableau" en anglais.
Pour créer une cellule, on utilise la balise double td > table data qui veut dire table de données. Logique puisqu'une cellule sert à afficher des données.
Une succession de cellule génèrera automatiquement une ligne, c'est à dire que si on mets 10 fois une suite des td on aura les 10 cellules sur une même ligne. Donc les td ont une propriété qui ressemble à la propriété inline, ils seront toujours juxtaposés à l'intérieur du tableau, on appelle ça un display: table-cell;
Pour mieux organiser notre tableau et générer des lignes on entoure les cellules de chaque ligne par la balise double tr > table row qui veut dire ligne de tableau. Rappelle-toi que row veut dire ligne, c'est un mot très présent dans le codage. Remarque que tr ressemble à une div dans un tableau vu qu'elle génère un saut de ligne, on appelle son type d'affichage display: table-row;
Je ne donne pas d'exemple à ce stade puisque tu sais déjà comment utiliser ces balises, je me contente donc d'expliquer le sens pour mieux comprendre ton tableau.

On a donc un ensemble de données organisées dans un tableau. Mais pour comprendre ces données on a besoin d'un titre. Pour se faire, on crée évidement une nouvelle ligne au début du tableau mais cette fois dans la ligne tr on ne va pas mettre des données (td) mais un titre (th) table heading

Voilà donc à quoi ressemble mon tableau :



Maintenant, imagine que je dois imprimer les notes d'une promotion d'au moins 500 étudiants et je veux qu'il y est dans mon tableau la moyenne de la promo, la meilleure note et la note la plus basse, enfin les statistiques de la promo. Pour celà je vais m'assurer d'avoir la ligne des titres bien en haut du tableau et les stats à la fin. Pour ce faire, je vais ajouter thead (table header > entête du tableau) et mettre dedans la ligne de mes titres (la ligne des th) et puis juste après j'ajoute directement mon pied du tableau (tfoot > table footer) avec les données que je veux voir à la fin. Après je renseigne le tbody et donc le corps du tableau où il y aura les noms, les notes, mentions etc, donc tous les données de notre tableau dont l'ordre importe peu. Donc mon tableau peut être imprimer sur 10 pages ou plus, je suis sûre que j'aurai l'entête au début de chaque page et les stats à la fin peu importe le nombre d'élèves qu'il y aura.
Une autre utilisation de la structure avancée du tableau (thead tfoot et tbody) sera comme suite. Je veux intégrer ce même tableau des notes dans la plate-forme de l'université. Là encore je ne vais quand même pas faire un tableau de 200 km mais bel et bien spécifié une hauteur à mon tableau et mettre l'overflow. Par contre on va s'assurer de garder l'entête et le pied affichés et on ne va appliquer l'overflow qu'à la balise tbody pour parcourir la liste des étudiantes tout en gardant les informations importantes du tableau.

Bien sûr on a les deux attributs pour fusionner les cellules ou les lignes :
- colspan (columns span > fusionner des colonnes) permet de fusionner plusieurs cellules de cette façon colspan="x", avec x le nombre de cellules à fusionner.
- rowspan > pour fusionner des lignes de même rowspan="y" avec y le nombre de lignes à fusionner.

Si tu as des questions n'hésite pas.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 17 Jan - 20:51
Il y a juste cette partie que je comprends pas trop :
@Reine des Ténèbres a écrit:Là encore je ne vais quand même pas faire un tableau de 200 km mais bel et bien spécifié une hauteur à mon tableau et mettre l'overflow. Par contre on va s'assurer de garder l'entête et le pied affichés et on ne va appliquer l'overflow qu'à la balise tbody pour parcourir la liste des étudiantes tout en gardant les informations importantes du tableau.
J'ai beau faire des essais de toute sortes, je ne comprends pas où/comment mettre l'overflow et la hauteur ?

EDIT : Je devrais peut-être te mettre mes essais ? Donc voila, j'ai juste repris ton code, en ajoutant des trucs en en-tête et en pied de page, et j'ai voulu mettre une overflow pour le reste comme t'as dit, que j'ai mis dans le css du tbody, mais même en mettant une hauteur ridicule de 50px, il se passe rien, c'est peut-être mon html qui n'est pas bon ?
https://codepen.io/anon/pen/XVyrVO
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Jeu 18 Jan - 19:09
Ah non t'inquiètes pas ton code est OK.
J'ai pas parlé du display de thead, tbody et tfoot. Au fait ces balises comme elles contiennent des lignes de tableau, la valeur de défaut est display: table-row-group. (un groupe de lignes d'un tableau). Pour appliquer l'overflow on a besoin d'une hauteur comme tu le sais déjà, mais pour avoir une hauteur on va d'abord changer le display par block.

Voilà ce que ça donne, le CSS est à ajuster mais bon



avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 19 Jan - 0:44
Oh d'accord, j'ai compris !
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Ven 19 Jan - 13:28
Coucou,
Je passe directement donc au CSS.
Voici quelques questions de base pour évaluer tes connaissances :

CSS c'est quoi ?
Comment on peut lier une feuille CSS à un document HTML ?
Comment on peut mettre du CSS directement dans un document HTML ?
Comment mettre du CSS directement dans une balise HTML ?
Comment on sélectionne un élément par son nom de balise ?
Comment on sélectionne un élément par son nom de class ?
Comment on sélectionne un élément par son nom d'id ?
A quoi sert la mention !important ?
Comment ajouter plusieurs class à un même élément ?
Quelle couleur sera afficher pour cet élément et pourquoi ?

Code:
<span class="rouge" id="bleu">élément</span>

Code:
span {
  color: white;
}
.rouge {
  color: red;
}
#bleu {
  color: blue;
}
span {
  color: black !important;
}

Je te laisse examiner
Et sans toucher au HTML, essaie de mettre titre 3 en rouge.

Dernière question, sais-tu comment attribuer une même propriété à plusieurs sélecteurs pour raccourcir notre code CSS.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 19 Jan - 19:26
CSS c'est quoi ? C'est ce qui permet de personnaliser les couleurs et tout ça sur la page web, en complément du HTML qui mettait juste la structure.

Comment on peut lier une feuille CSS à un document HTML ? Avec la balise link ? De cette façon :
Code:
<link href="lien de la feuille de style" rel="stylesheet" type="text/css">

Comment on peut mettre du CSS directement dans un document HTML ? Entre la balise style, comme ça :
Code:
<style type="text/css">contenu de la feuille de style</style>

Comment mettre du CSS directement dans une balise HTML ? En utilisant l'attribut style, comme ça par exemple, dans une balise div :
Code:
<div style="color:white; background-color:blue; padding:5px; width:150px;">Texte de la div</div>
qui affichera cela :
Texte de la div


Comment on sélectionne un élément par son nom de balise ? Je suis pas sûre d'avoir compris la question (pas sûre de ce que tu veux dire par "sélectionner un élément par"), donc je vais répondre ce que je crois avoir compris ? x'3
Donc il faut mettre juste le nom de la balise, puis les propriétés css entre { et } (je sais pas comment ça s'appelle... ^^'), comme ça :
Code:
div { }
span { }

Comment on sélectionne un élément par son nom de class ? C'est en mettant un point devant le nom de la classe (qu'on peut nommer comme on veut, mais sans espace) cette fois, comme ça :
Code:
.grand_titre { }
.description { }

Comment on sélectionne un élément par son nom d'id ? Avec un # devant (plutôt qu'un point comme pour les classes) :
Code:
#grand_titre { }
#description { }

A quoi sert la mention !important ? A appliquer de force une propriété même si elle est en contradiction avec une autre que l'élément possède déjà. C'est mal expliqué mais je pense que tu comprends ce que je veux dire ? x'3

Comment ajouter plusieurs class à un même élément ? Si je me souviens bien (j'ai rarement fait ça...), il faut simplement mettre les deux noms des classe dans l'attribut class, séparés par un espace, comme ça :
Code:
<div class="class1 class2">Contenu de la div</div>

Quelle couleur sera affichée pour cet élément et pourquoi ? Noir, parce qu'il y a le !important devant ?

Je te laisse examiner ce code et sans toucher au HTML, essaie de mettre titre 3 en rouge. Euh, là, j'avoue c'est pas facile, j'ai fait ça comme ça, mais c'est un peu chelou, non ? (je met sous spoiler, avec en gras ce que j'ai ajouté)
Spoiler:
.class1 {
 font-family : Arial;
 background-color : aliceblue;
 padding : 10px;
 color:black !important;
}
.left {
 float : left;
   width : 45%;
}

.right {
   float : right;
   width : 50%;
}

.class2 {
 font-family : Cursive;
 background-color : beige;
 padding : 20px;
}

h2 {
 color:red;
}

Dernière question, sais-tu comment attribuer une même propriété à plusieurs sélecteurs pour raccourcir notre code CSS. Il faut les mettre les uns à la suite, séparés par une virgule, comme ça :
Code:
.grand_titre, .petit_titre, .description { }
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Lun 22 Jan - 2:02
Coucou,

Je vois que tu connais très bien les bases et les sélecteurs ce qui est génial.
Pour le petit exercice pour "sélectionner" le titre 3.
Cet élément est un h2 mais vu qu'on a d'autres h2 on ne peut pas utiliser la balise pour le sélectionner. Il a la classe class2 mais il n'est pas le seul élément à l'avoir. Ce qu'on fait alors c'est la combinaison de ces deux sélecteurs vu que c'est le seul h2 dont le nom de class est class2, on écrit :

Code:
h2.class2 {
color: red;
}

Ce qui veut dire que seul les h2 dont le nom de classe est class2 seront rouges.

{ et } sont des accolades.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Lun 22 Jan - 14:55
Oh je ne connaissais pas du tout ça ! Je note ! :3

Envoyé depuis l'appli Topic'it
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum