Forum : Peut-on relié le CSS sur plusieurs pages ? // Je débute // | Grafikart

Je suit les cours CSS sur ce site, j'ai réussi à mettre du CSS sur ma page d'accueuil Uniquement

Hors je voudrais, mettre du CSS, comme sur la Page D'accueil. sur mes Pages, Contact et Plantes !
Dois-je le faire manuellement dans ma struture HTML, ou il y a une méthode rapide ???
Que me conseiller vous ???

Mon site n'est pas en ligne, je peut pas vous le montrer désolé !

46 réponses

Réponse acceptée

Bonjour,

Si tu développe dans un environnement PHP tu peux utiliser les includes : https://www.php.net/manual/fr/function.include.php

L'idée est de faire l'entête dans un fichier à part puis de l'inclure dans chaque fichier.

floriqn

Réponse acceptée

Alors réponse bête mais qui devrait t'aider, tu le fais de la même facon que tu l'as fait pour ta page d'accueil. En fonction de ton niveau et de ton apprentissage tu vas découvrir plusieurs techniques.

Au début on appelle son fichier css sur chaque page, ensuite on decompose son html en bloc (comme te le suggère Soundboy) puis on finit pas centraliser le tout.

Auteur

@Soundboy39
Merci mais je n'en suis pas, à PHP. je suis sur CSS et HTML. je te remerceie !

Auteur

@floriqn
Ok mais il n'ont pas montrer cela dans les vidéo !!! je vais voir

Le principe est le même, je suppose que dans le html de ta page d'accueil tu as quelque chose du genre :

<link href="main.css" rel="stylesheet">

Tu n'as plus qu'a répéter cette opération sur chacune de tes pages. Mais ca c'est au début ;)

Auteur

@floriqn

<body>
    <header class="header">
        <div class="header-bar">
            <h1 class="header-title">Alkaline Market</h1>
                <nav class="header-nav">
                <a href="index.html" title="Accueuil">Accueuil</a>
                <a href="plantes.html" title="Les plantes">Plantes</a>
                <a href="contact.html" title="Nous contacter">Contact</a>
                <a href="https://bolingobalance.com/" title="Bolingobalance" class="link-external">Bolingobalance</a>
            </nav>
        </div>
    </header>

Auteur

<link href="main.css" rel="stylesheet">

j'ai copier le lien sur mes 2 page: plantes.html , et contact.html. Aucun résultat !

Arzou

Montre nous le code sur une des pages ou ça ne marche pas stp :)

Auteur

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Alkaline Market, contact</title>
<meta name="description" content="Une plante médicinale est une plante utilisée pour ses propriétés particulières bénéfiques pour la santé humaine, voire animale.">
</head>
<body>
<header>
<h1>Nous contacter</h1>
<nav>
<link href="style.css" rel="stylesheet">
<a href="index.html" title="Accueuil">Accueuil</a>
<a href="plantes.html" title="Les plantes">Plantes</a>
<a href="contact.html" title="Nous contacter">Contact</a>
</nav>
</nav>
</nav>
<img src="img/fondcontact.jpg" alt="fond d'image d'accueuil" width="800" height="600">
</header>
<section>
<h2>Où nous trouver</h2>
<p>
667 rue de la detox<br>
38000 Golmont<br>
Afrance
</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2812.20296269299!2d5.703119215759867!3d45.18298756018397!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478af36377f956ef%3A0xb76f1a299c0abf40!2s32%20Rue%20Amp%C3%A8re%2C%2038000%20Grenoble!5e0!3m2!1sfr!2sfr!4v1629824768583!5m2!1sfr!2sfr" width="1200" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

    <h2>Nous envoyer un email</h2>
    <form action="contact.html">
        <div>
            <label for="email">Votre email<sup>*</sup></label>
            <input type="email" required id="email" name="email" placeholder="Votre@email.fr">
        </div>
        <div>
            <label for="firstname">Votre prénom<sup>*</sup></label>
            <input type="text" id="firstname" name="firstname">
        </div>
        <div>
            <label for="message">Votre message<sup>*</sup></label>
            <textarea required id="message" name="message"></textarea>
            <button type="submit">Envoyer votre email</button>
        </div>
        <input type="checkbox">J'accepte les conditions</input>
    </form>
</section>

</body>
</html>

Arzou

Il faut que tu mette ton <link href="style.css" rel="stylesheet"> dans le <head> :)

Reprends bien le cours, toujours dans le head l'import de fichier css. Et utilises correctement les balises pour poster ton code car la c'est difficilement lisible.

Auteur

Sa marche pas, j'ai copier coller sur toute mais pages.

je vais essayé de me débouiller !
comme je peux

Auteur

Je vous aurait bien envoyer des Capture d'écrans mais leurs forum ne permette pas de partager des image c'est con

Arzou

Tu l'as bien copié dans le head ?
Ton fichier css est ou par rapport aux autres fichiers ? Dans le même dossier ? Dans un dossier différent ?
Toutes tes pages html sont dans le même dossier ?
Comment s'appelle ton fichier css ?

Auteur

mon dossier s'apelle "style.css"

Arzou

ça c'est ton fichier css, mais est ce qu'il est dans un dossier ? Ou est ce qu'il est avec les pages html ?

Auteur

il et avec les pages html, et non dans un dossier apart !

Arzou

Ok, donc en gros tu as bien écris ton code comme ça ? :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="ta description">
  <link rel="stylesheet" href="style.css">
  <title>Ton titre</title>
</head>
<body>
  <header>
    <h1>Nous contacter</h1>
  </header>
</body>
</html>

Auteur

j'utilise VS code, comme éditeur de texte.

Arzou

ça ne change rien ça :)

Auteur

Oui voilà, j'ai fait comme cela dans chacunes de mes pages Html !

Auteur

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="description" content="ta description">

le mien :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Alkaline Market</title>
<meta name="description" content="Une plante médicinale est une plante utilisée pour ses propriétés particulières bénéfiques pour la santé humaine, voire animale.">
<link href="style.css" rel="stylesheet">
</head>

Arzou

Si ton fichier css est avec ton html, qu'il s'appelle bien style.css, et qu'il est bien placé dans le head .. alors ça devrait marcher. Surtout si il marche pour l'index.
Quand tu vas sur ta page contact par exemple, et que tu ouvres ton inspecteur, ton style n'est pas pris en compte du tout ?

Auteur

Non !!!

{
box-sizing: border-box;
}

Arzou

C'est quoi ce bout de style ?

A mon avis il y a d'autres problèmes ;)

Auteur

cela irai plus vite si on pouvait partager les captures d'écrans

Arzou

floriqn, à mon avis aussi ;)

F12 (ca ouvre ton inspecteur), regardes si tu as une erreur.

Si tu dis que ca fonctionne sur ta page d'accueil, alors compares tes deux pages. Quelle différence il y a entre les deux ? (à part ce qu'il y a dans la balise body)

Auteur

ma page d'accueuil, index.Html. marche j'ai apliquer tout ce qu'ils ont dit dans les "Les bases" en CSS, pas de problèmes. C'est après, avoir fini les modules, que je me suis poser la question. Comment apliquer mon CSS sur mes deux autres pages ?

Arzou

Oui, et donc si tu copie / colle de la 1ere ligne jusqu'a la fermeture de la balise <head> dans tes 2 autres pages, ça devrait marcher, sinon c'est que le problème est ailleurs

Auteur

index.html Cette page à le css pas de problèmes :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Alkaline Market</title>
<meta name="description" content="Une plante médicinale est une plante utilisée pour ses propriétés particulières bénéfiques pour la santé humaine, voire animale.">
<link href="style.css" rel="stylesheet">
</head>

contact.html :

<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Alkaline Market, contact</title>
<meta name="description" content="Une plante médicinale est une plante utilisée pour ses propriétés particulières bénéfiques pour la santé humaine, voire animale.">
<link href="style.css" rel="stylesheet">
</head>

plantes.html :

<head>
<meta charset="UTF-8">
<title>Alkaline Market</title>
<meta name="description" content="Une plante médicinale est une plante utilisée pour ses propriétés particulières bénéfiques pour la santé humaine, voire animale.">
<link href="style.css" rel="stylesheet">
</head>

Tu melanges tout là, je pars du principe que tu as un dossier qui s'appelle mondossier. Dans ce dossier tu as ta page index.html, ton fichier styles.css et une autre page qu'on appelera madeuxiemepage.html. Si tout ce qu'il y a dans la balise <head> est identique entre tes deux pages html alors ca doit fonctionner (a l'exception du title évidemment).

Regardes également que toutes balises (div, nav...) soient bien fermées et qu'il n'y est pas de balises orphelines.

Et si ca ne fonctionne toujours pas,l'erreur est entre la chaise et l'écran ;)

Peut être en vidant le cache de ton navigateur (dernier espoir).

Auteur

plus d'espoir alors lol c'est fait !! Cela vient peut être de ma structure CSS.

Arzou

Envoi ton code css pour voir

J'espère que tu as écris du css pour tes autres pages ?

Auteur

{
box-sizing: border-box;
}

html, body {
font-size: 15px;
}

body {
margin: 0;
line-height: 1.4;
font-family: sans-serif;
}

.header {
text-decoration: black;
background: yellowgreen;
padding: 50px;
height: 30;
color: black;
z-index: 2;
}

.header img {
width: auto;
height: auto;
}

.header-title {
text-align: center;
margin: 0;
font-style: italic;
text-transform: capitalize;
z-index: 4;
width: 330px;
}

.header-nav {
overflow: hidden;
text-align: center;
z-index: 3;
}

.header-nav a {
color: inherit;
text-decoration: none;
}

.header-nav a:hover {
text-decoration: underline;
}

.main{
position: relative;
background: lightgrey;
padding: 70px 20px 20px;
font-size: 16px;
z-index: 1;
}

.main p {
text-align: start;
margin-bottom: 1.5rem;
overflow-wrap: break-word;
}

.footer {
background:rgb(185, 84, 84);
padding: 10px 20px;
}

.main {
font-size: 15px;
}

.button {
color: green;
background:yellowgreen;
text-decoration: none;
font-size: 20px;
padding: 0.2em 0.5em;
}

.alignright {
float: right;
margin-left: 15px;
}

.alignleft {
float: left;
margin-right: 15px;
}

hr {
clear: both;
}

.header-bar {
display: flex;
justify-content: space-between;
align-items: center;
}

.header-nav {
width: 100%;
display: flex;
justify-content: space-evenly;
}

.header-title {
white-space: nowrap;
}

.banner {
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
height: 300px;
background: greenyellow;
}

.banner h1 {
margin: 0 0 10px 0;
}

.banner p {
margin-top: 0;
}

.banner a {
padding: 5px 10px;
background: blue;
color: wheat;
text-decoration: none;
line-height: 1;
}

Ces classes css sont utilisées dans le.html des pages qui ne fonctionnent pas ?

Arzou

Si tout en bas de ton fichier css, tu mets :

body {
background: red !important;
}

Et ce que tu as un background rouge sur toutes les pages ?

Auteur

j´en es pas !

NOUVEL EDIT depuis un pc c'est plus simple :) Je te mets un code de test.

Tu crées 3 nouveaux fichiers (page1.html, page2.html et style.css) dans un nouveau dossier.

page1.html tu mets :

<html lang="fr">
<head>
    <title>page1</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="page1">
        <a href="page2.html">Page 2</a>
    </div>
</body>
</html>

page2.html tu mets :

<html lang="fr">
<head>
    <title>page2</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="page2">
        <a href="page1.html">Page 1</a>
    </div>
</body>
</html>

style.css tu mets :

div {
    height: 200px;
}
.page1 {
    background-color: red;
}
.page2 {
    background-color: yellow;
}

Si tu cliques sur les liens ca doit changer de couleur non ?

As mentioned three ways:

version 1 : echo a snippet.

<? echo ‘<link href=”PATH/your_style.css” media="" >’ ?>
version 1 include/require. ( Not being the following snippet, pretty nice… but it works )

<style><? include_once ”PATH/your_style.css" media ="" ?></style>
//
<style><? require_once ”PATH/your_style.css" media ="" ?></style>
version 2: same as you normally do in a HTML file.

<?
<head>
<link href=”PATH/your_style.css” >
</head>
?>
version 3:

Consider your CSS file as a PHP file.

( instead of your_style.css, work with your_style.php )

<?
header("Content-type: text/css; charset: UTF-8");

$style_tipo = "Helvatica, Arial, sans-serif";
$style_colour= rgba(255, 255, 255, 30);
....

a { color: <? echo tyle_colour ?> }
....
?>
Hope it helps

Amazon Promo Codes

Tu melanges tout là, je pars du principe que tu as un dossier qui s'appelle mondossier. Dans ce dossier tu as ta page index.html, ton fichier styles.css et une autre page qu'on appelera madeuxiemepage.html. Si tout ce qu'il y a dans la balise <head> est identique entre tes deux pages html alors ca doit fonctionner (a l'exception du title évidemment Tinder ruling).

Regardes également que toutes balises (div, nav...) soient bien fermées et qu'il n'y est pas de balises orphelines.

Et si ca ne fonctionne toujours pas,l'erreur est entre la chaise et l'écran ;)

Auteur

serjora, merci ! j'avait régler le probleme, c'était ma faute car je n'avais pas mis les <...class="..."> merci