Lier ma page html à la feuille css
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Lier ma page html à la feuille css
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
Re: Lier ma page html à la feuille css
Bonjour,
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 :
Pour plus d'infos, je vous invite à lire :
- 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 .
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 !
Disons légèrement . Mais n'ayez crainte, c'est normal au début !J'espère ne pas être confus
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;
[...]
}
Pour plus d'infos, je vous invite à lire :
- 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 .
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 !
Re: Lier ma page html à la feuille css
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.
Re: Lier ma page html à la feuille css
Alors ^^
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)
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 :
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...
Bonne journée
Donc vous avez bien la différence entre grille et tableau, je n'en étais pas certain au départMais 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.
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>
- 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...
Bonne journée
Re: Lier ma page html à la feuille css
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 :
Et le html
Une sacré différence avec la compléxité du code en table. Là ça parait tout simple.
Et regardez le résultat :
Tadam ! pas si mal pour un début.
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.
Et regardez le résultat :
- ma première grid:
Tadam ! pas si mal pour un début.
Re: Lier ma page html à la feuille css
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
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 :
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... )
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
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
Avoir des grilles avec une classe ne vous empêche pas d'avoir un morceau de grille stylisé au cas par cas en plus
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>
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... )
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
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
Re: Lier ma page html à la feuille css
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.
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.
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.
Re: Lier ma page html à la feuille css
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
Je dirais surtout qu'il faut tester
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
Bonne soirée
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
Je dirais surtout qu'il faut tester
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
Bonne soirée
Re: Lier ma page html à la feuille css
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à.
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à.
Sujets similaires
» Feuille CSS séparée pour page HTML
» Lier une feuille css hébergée aux messages du forum
» Problème pour lier du CSS et du Html
» Lier sa page a google +
» Afficher une annonce html sans avoir besoin de faire appel à une page HTML
» Lier une feuille css hébergée aux messages du forum
» Problème pour lier du CSS et du Html
» Lier sa page a google +
» Afficher une annonce html sans avoir besoin de faire appel à une page HTML
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum