Lier ma page html à la feuille css

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Lier ma page html à la feuille css

Message par L'ange noir Sam 18 Déc 2021 - 18:24

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome, Opera
Personnes concernées par le problème : Moi uniquement
Lien du forum : https://sangsmelesoriginels.forumactif.com/

Description du problème

Bonjour à tous,

Je me lance dans la création d'une grid css. Je débute de zéro, zéro et je lis tout ce que je peux sur le sujet pour comprendre comment cela fonctionne. Je me suis dis que le mieux serait de faire des essais sur mon forum test.

Donc, mon premier blocage vient de comment lier la page html de mon post (sur un topic du forum) avec la feuille css ?

Jusqu'à présent, le codage css du forum tirait ses class et id des templates (enfin je crois), mais là, faut il que j'ajoute une class dans le sujet des posts (topics) dans un templates ou puis je simplement mettre une class dans mon post et le relier au CSS ? Si oui, comment ?

J'espère ne pas être confus, ce n'est déjà par très clair pour moi alors l'expliquer n'est pas simple.

Merci pour votre aide
L'ange noir

L'ange noir
****

Messages : 294
Inscrit(e) le : 17/05/2016

https://vampires-kingdom.forumactif.com/
L'ange noir a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Lier ma page html à la feuille css

Message par chattigre Sam 18 Déc 2021 - 20:38

Bonjour,

J'espère ne pas être confus
Disons légèrement Very Happy . Mais n'ayez crainte, c'est normal au début !

Donc, mon premier blocage vient de comment lier la page html de mon post (sur un topic du forum) avec la feuille css ?

Jusqu'à présent, le codage css du forum tirait ses class et id des templates (enfin je crois), mais là, faut il que j'ajoute une class dans le sujet des posts (topics) dans un templates ou puis je simplement mettre une class dans mon post et le relier au CSS ? Si oui, comment ?

Là où je bloque personnellement c'est quand vous parlez de "La page HTML de mon post"...

Allez-vous travailler dans un message du forum ou sur une Page HTML ? (URL en /hxx- sur votre forum)

Si vous travaillez sur un message, la feuille de style est liée au contenu du message comme elle est liée à l'affichage du sujet, des messages, etc. en bref à l'ensemble de la page.

Si vous travaillez sur une page HTML, je vous conseille d'utiliser le haut et le bas de page du forum (option à la création / modification de la page), ce qui aura pour effet de lier le CSS du forum à la page et ainsi de vous éviter de reconstruire toute la base visuelle.

Il vous faut ensuite définir les classes dans votre codage HTML, au moyen de l'attribut class="maclasse" ou encore id="monidunique", puis définir le style associé dans la feuille CSS du forum avec des règles sous la forme :
Code:
.maclasse {
background: red;
color: white;
[...]
}

#monid {
background: blue;
color: orange;
padding: 5px;
[...]
}
(ce ne sont que des exemples basiques)

Pour plus d'infos, je vous invite à lire :
- Tuto Le CSS, comment ça marche
- Si vous utilisez une page HTML : Gestion des pages HTML

- Et un site externe de référence : Une mine d'or pour apprendre le HTML et le CSS (j'ai quasiment tout trouvé sur ce site à mes débuts !) :
Mozilla Developer Networks (MDN) - Le HTML - Le CSS
Vous trouverez non seulement des documentations globales mais aussi des documentations granulaires sur toutes les balises et attributs HTML et tous les sélecteurs et propriétés CSS Smile .

Je reste disponible pour toute question, n'hésitez pas aussi à dire ce que vous voulez faire et à donner vos pistes de codes pour que l'on puisse vous aider de manière ciblée !
chattigre

chattigre
Aidactif
Aidactif

Masculin
Messages : 3584
Inscrit(e) le : 17/04/2019

https://test1-chattigre.forumactif.fr
chattigre a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Lier ma page html à la feuille css

Message par L'ange noir Dim 19 Déc 2021 - 8:52

Very Happy

Merci pour votre réponse. Je comprends mieux maintenant ce que Oka.mi m'a expliqué dans un autre message qui parlait des tables. Pour répondre à votre question, oui, j'écris un post directement sur le forum en html. Mais jusqu'à la réponse d'Oka.mi, je faisais tout sous forme de table et il m'a fait connaitre le grid css.

Donc, si je comprends bien. J'ouvre un div avec une class et ensuite je mets cette class directement dans ma feuille css et je mets les codes css pour modifier ma grille.

J'ai mis tous les sites proposés dans mes favoris. J'ai terminé les pages sur le grid css mais j'ai besoin de faire des essais réels pour mieux comprendre, même si en fait ce n'est qu'un autre langage à apprendre comme lorsque j'ai appris le langage css.

Par contre je me suis dit que ce serait plus simple de ne faire qu'une grille vierge par la feuille CSS pour utiliser toujours la même class pour tous les journaux que je vais éditer et qu'à l'intérieur de la page html que j'écris direct sur le forum, mettre le style épaisseur des traits, font etc... sinon je vais avoir plein de code sur ma feuille css. Un petit à chaque fois pour décider de la forme général des cases et le reste codé direct sur le html. Penses vous que ce soit mieux comme ça où tout coder sur la feuille css est plus simple ?
(j'en suis déjà à organiser alors que je n'ai pas encore sorti une seule ligne.... hihihihi)

EDIT : j'ai réussi à faire un début de grille. C'est formidable. Vous êtes vraiment géniaux et super sur forumactif. Ca fait des années que je viens ici pour recevoir de l'aide et je n'ai jamais été déçu. Un grand merci Chatigre et aussi à Oka.mi. Je laisse ouvert pour la question au-dessus. Merci encore.
L'ange noir

L'ange noir
****

Messages : 294
Inscrit(e) le : 17/05/2016

https://vampires-kingdom.forumactif.com/
L'ange noir a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Lier ma page html à la feuille css

Message par chattigre Dim 19 Déc 2021 - 12:12

Alors ^^

Mais jusqu'à la réponse d'Oka.mi, je faisais tout sous forme de table et il m'a fait connaitre le grid css
Donc vous avez bien la différence entre grille et tableau, je n'en étais pas certain au départ Wink

Donc, si je comprends bien. J'ouvre un div avec une class et ensuite je mets cette class directement dans ma feuille css et je mets les codes css pour modifier ma grille.

Et ça ne marche pas qu'avec les div. Vous créez un élément HTML avec un attribut class ou id (un id est unique sur une page)

Par contre je me suis dit que ce serait plus simple de ne faire qu'une grille vierge par la feuille CSS pour utiliser toujours la même class pour tous les journaux que je vais éditer et qu'à l'intérieur de la page html que j'écris direct sur le forum, mettre le style épaisseur des traits, font etc... sinon je vais avoir plein de code sur ma feuille css. Un petit à chaque fois pour décider de la forme général des cases et le reste codé direct sur le html. Penses vous que ce soit mieux comme ça où tout coder sur la feuille css est plus simple ?
(j'en suis déjà à organiser alors que je n'ai pas encore sorti une seule ligne.... hihihihi)

Vous faites bien de tout organiser ^^

Personnellement j'ai envie de vous dire de passer par la feuille CSS et les classes plutôt que par des attributs style.
Comme ça, le jour où vous avez à faire un changement de style, vous n'avez qu'à éditer les règles de la feuille de style en gardant les classes, et pas tous les messages à éditer...

N'oubliez pas aussi, pour réduire la taille du code, que vous pouvez cumuler les classes.
Imaginons que vous ayez une grille d'une couleur différente chaque mois, vous allez avoir une classe "générale" qui définit tout, et une classe "mensuelle" qui définit juste la couleur :
Code:
<div class="grille-journal gj-dec"></div>
Et dans votre CSS :
Code:
.grille-journal {
/*definition de la grille avec une couleur par defaut*/
}

.grille-journal.gj-dec {
  background-color: red;
  /*La 2e classe, cumulée, prendra le dessus pour donner la couleur specifique du mois de decembre (dec)*/
}

Petit rappel sur les sélecteurs :
- Avec espace : .A .B : B inclus dans A
- Sans espace : .A.B : élément de classe A ET B (class="A B")
MDN : Les sélecteurs CSS Article à connaitre pour éviter les codes "doublons" en cumulant les classes... Wink

Bonne journée
chattigre

chattigre
Aidactif
Aidactif

Masculin
Messages : 3584
Inscrit(e) le : 17/04/2019

https://test1-chattigre.forumactif.fr
chattigre a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Lier ma page html à la feuille css

Message par L'ange noir Dim 19 Déc 2021 - 16:08

Oui je comprends pour le style. C'est mieux de le mettre sur le css. Plus facile à modifier. C'est noté. merci.

je vois, donc j'ai un code ma grille de base et j'ai un code qui ne changera que la couleur du mois en cours. Du coup, une seule ligne à écrire à chaque fois. Par contre je ne suis pas sure pour la grille de base, parce que le journal, je ne le fais jamais pareil. Mes cases bougent selon les articles que j'ai à écrire et les photos que je mets. Ce n'est jamais pareil sauf des choses immuables, comme le titre et les petites annonces. A part que pour les petites annonces, il peut y en avoir plus ou moins. Donc, maintenant que j'ai fait un premier petite tableau, je réalise que je vais devoir en faire un nouveau à chaque fois, sinon je vais forcément détruire le précédent. Enfin je crois....

Sinon, regardez un peu ce que j'ai réussi à faire grâce à vous :

Code:
/* GRILLE JOURNAL*/
.grille
{height:100vh;
 width:635px;
 display:grid;
 grid-template-columns: repeat(4,1fr);
 grid-template-rows: repeat(3,1fr);
grid-template-areas:"cell1 cell1 cell1 cell1" "cell2 cell2 cell2 cell2" "cell3 cell3 cell3 cell5";
  }

.cell1
{background-color:#DF0101;
 display:flex;
justify-content:center;
grid-area:cell1;}

.cell2
{background-color:#FE2EF7;
display:flex;
justify-content:center;
grid-area:cell2;}

.cell3
{background-color:#BDBDBD;
display:flex;
justify-content:center;
grid-area:cell3;}

.cell4
{background-color:#FFFF00;
display:flex;
justify-content:center;
grid-area:cell4;}

.cell5
{background-color:#81BEF7;
 display:flex;
justify-content:center;
grid-area:cell5;}


Et le html
Code:
<div class="grille"><div class="cell1">cel 1</div><div class="cell2">cel 2</div><div class="cell3">cel 3</div><div class="cell4">cel 4</div><div class="cell5">cel 5</div></div>

Une sacré différence avec la compléxité du code en table. Là ça parait tout simple.  Smile

Et regardez le résultat :
ma première grid:

Tadam ! pas si mal pour un début. I love you
L'ange noir

L'ange noir
****

Messages : 294
Inscrit(e) le : 17/05/2016

https://vampires-kingdom.forumactif.com/
L'ange noir a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Lier ma page html à la feuille css

Message par chattigre Dim 19 Déc 2021 - 17:30

Re,
Avoir des grilles avec une classe ne vous empêche pas d'avoir un morceau de grille stylisé au cas par cas en plus Wink

Ce que je peux vous conseiller si le nombre de chaque élément change, c'est de créer des zones. Les différents éléments, aussi nombreux soient-ils, se répartiront la place normalement (au moins en verticale et si c'est bien fait aussi en horizontale)

par exemple :
Code:
<div class="grille-journal">
  <div class="journal-titre></div>
  <div class="journal-article-container">
    <div class="journal-article">...</div>
    <div class="journal-article">...</div>
    <div class="journal-article">...</div>
    [...]
  </div>
  <div class="journal-annonce-container">
    <div class="journal-annonce">
    <div class="journal-annonce">
    [...]
  </div>
</div>
On peut ainsi imaginer les annonces sous le titre, lui-même sous les articles. Et chaque article prenant 50% de la largeur disponible, on peut ainsi en mettre deux par ligne. Même idée pour les annonces. Si il y en a 15, eh bien ça prendra 8 lignes. S'il y en a que 4, que 2 lignes.

Et dans une case de grille, vous pouvez mettre ce que vous voulez !
Après je vois que vous utilisez des display: flex; pour vos cases, c'est peut-être pas le plus simple pour la gestion de ce qui est à l'intérieur d'une case, mais si vous y arrivez, tout va bien !

Regardez par exemple les tutoriels de ce forum ! Aucun ne fait la même taille et pourtant une vingtaine de règles doivent suffire en tout et pour tout ! (Et tout est en tables... Very Happy )

Pour le width: 635px de la grille, j'aurais tendance à vous dire de préférer un pourcentage pour permettre de s'adapter à la largeur de l'écran / de la fenêtre de l'utilisateur Wink
Les largeurs fixes pour des conteneurs, c'est pas forcément conseillé. ça peut être utile, mais ça peut ne pas l'être ^^

Bonne journée
chattigre

chattigre
Aidactif
Aidactif

Masculin
Messages : 3584
Inscrit(e) le : 17/04/2019

https://test1-chattigre.forumactif.fr
chattigre a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Lier ma page html à la feuille css

Message par L'ange noir Dim 19 Déc 2021 - 17:44

ok pour les pourcentages de la taille de la grille.

Pour le flex, je l'ai bêtement copié sur mon ancien journal, ce n'est pas moi qui ait codé cette partie, mais sans le flex, les cases se collaient toutes ensembles. j'ai bien tenté de comprendre le flex, mais un peu trop difficile pour moi. Du coup, je mets simplement du width définir la taille des cases plutôt que d'utiliser ce fameux flex ?

Par contre, vous dites que votre forum est fait sous forme de table. Il n'est pas en grid ? Pourtant, pour le journal, vous me conseillez de le faire en grid ? je reste bien sur cette idée ? Parce que j'ai beaucoup à étudier... alors...

Sinon, faire des blocks comme vous me le dites semble le plus pertinent. Surtout que je n'ai pas encore réussi à décoller les cases les unes des autres et que j'en ai des plus minces que d'autres.

Vous allez tout de suite voir que je me lance des défis de taille. C'est ça que je dois transposer en grid sur 2 grilles différentes. La partie gauche, 1 grid, la partie droite, une autre.

Mon défi:

Du coup, je me demande s'il n'est pas plus simple de faire plusieurs grilles. Une pour le titre en haut avec la date. Une pour le gros titre et les 2 articles. 1 pour la barre transversale et une grille pour les petites annonces avec l'arbre à droite. Je peux inclure le bas de page avec les fleurs et le footer.

Ce sera peut-être plus facile à travailler avec les éléments séparés.
L'ange noir

L'ange noir
****

Messages : 294
Inscrit(e) le : 17/05/2016

https://vampires-kingdom.forumactif.com/
L'ange noir a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Lier ma page html à la feuille css

Message par chattigre Dim 19 Déc 2021 - 19:10

Re,

En soi, séparer les composants d'une seule grande grille n'est pas plus compliqué que d'en faire plusieurs tant qu'on utilise des classes pour chaque bloc de la grande grille.

Mais enrober le tout dans une div qui ne soit pas une grille et faire une grille par section peut en effet être une solution Wink

Je dirais surtout qu'il faut tester Smile
Essayer de faire une trame, bidon mais structurellement entière, et voir.
Ensuite, en faire une autre mais avec un nombre différent d'éléments (articles et annonces) pour vérifier que c'est bien modulable.

Et oui, ici tout est fait en tableau, ce serait possible aussi pour vous mais vos mises en page plus complexes se prêtent bien à une grid je pense Wink

Bonne soirée
chattigre

chattigre
Aidactif
Aidactif

Masculin
Messages : 3584
Inscrit(e) le : 17/04/2019

https://test1-chattigre.forumactif.fr
chattigre a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Lier ma page html à la feuille css

Message par L'ange noir Dim 19 Déc 2021 - 21:28

Parfait. Merci pour toutes ces infos. je pense que je vais revenir souvent vous voir. Je vais déjà travailler tout ce que l'on a vu et faire les tests. J'ai commencé à lire les lien que vous m'avez passé et je m'aperçois que j'ai encore beaucoup à apprendre. j'ai aussi vu des vidéos qui ne sont pas mal du tout. j'ai de quoi faire.

Ce sujet a été résolu et mes prochaines questions feront l'objet d'un nouveau post.

Merci et bonnes fêtes à vous si je ne vous revois pas d'ici là.

L'ange noir

L'ange noir
****

Messages : 294
Inscrit(e) le : 17/05/2016

https://vampires-kingdom.forumactif.com/
L'ange noir a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

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