[Résolu] PHP : le CSS ne s'applique pas sur la page php - Lors de l'actualisation de la page par EloiMahe - page 1

Bonjour à tous,

Je travaille actuellement sur un site web php pour un petit projet avec des amis. J'ai d'abord créé la page en HTML/CSS puis je l'ai passé en php pour ajouter de nouvelles fonctionnalités. La plupart de mes pages ont la structure suivante : navigation / header / contenu / footer. Vu que la bar de navigation et le pied-de-page (footer) restent identiques d'une page à l'autre, j'utilise la fonction include de php.

Cependant, lorsque je fais des modifications du style CSS, rien ne change. Lorsque j'actualise la page, le CSS modifié n'agis. En revanche, lorsque je modifie le code HTML, celui-ci est bien pris en compte.

Voici mon code HTML/PHP :

index.php

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css?family=Bitter|Roboto&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Oxygen+Mono&display=swap" rel="stylesheet">

    <link href="style/index.css" rel="stylesheet">

    <title>title</title>
</head>
<body>

<?php include("includes/nav.php"); ?>

<header>
    <img src="pictures/logo.webp" alt="Logo" id="im_logo"/>
    <h2>Titre</h2>
    <h1>TITRE</h1>
    <h2>Titre</h2>
</header>

<article>
    <div class="container">
        <div class="text">
            <h2>Titre</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur risus eget euismod elementum. Integer viverra turpis vel leo pellentesque tincidunt. Sed semper ligula sit amet enim laoreet, condimentum imperdiet turpis tempus. Aenean iaculis commodo elit nec malesuada.
            </p>
        </div>
        <img src="pictures/pic1.webp" alt="pic1"/>
    </div>
    <div class="container">
        <img src="pictures/pic2.webp" alt="pic2"/>
        <div class="text">
            <h2>Titre</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur risus eget euismod elementum. Integer viverra turpis vel leo pellentesque tincidunt. Sed semper ligula sit amet enim laoreet, condimentum imperdiet turpis tempus. Aenean iaculis commodo elit nec malesuada.
            </p>
        </div>
    </div>
    <div class="container">
        <div class="text">
            <h2>Titre</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur risus eget euismod elementum. Integer viverra turpis vel leo pellentesque tincidunt. Sed semper ligula sit amet enim laoreet, condimentum imperdiet turpis tempus. Aenean iaculis commodo elit nec malesuada. Ut et tortor vel libero molestie rhoncus eu id ipsum. Fusce elementum est lectus, eu bibendum ligula placerat elementum. Nullam euismod aliquet vehicula.
            </p>
        </div>
        <img src="pictures/pic3.webp" alt="pic3" class="col-sm"/>
    </div>
</article>
<form method="post" action="">
    <div class="titre">
        <h2>Nous<br/> contacter</h2>
        <img src="pictures/bandeau.webp" alt="bande_deco_form">
    </div>
    <div class="entries">
        <div class="un">
            <input type="text" name="pseudo" id="pseudo" placeholder="Pseudo *"/>
            <input type="text" name="pseudo" id="email" placeholder="Email *"/>
            <input type="text" name="pseudo" id="objet" placeholder="Objet"/>
        </div>
        <div class="deux">
            <textarea name="message" id="message" placeholder="Message *"></textarea>
            <input type="submit" value="Envoyer le message"/>
        </div>
    </div>
</form>

<?php include("includes/footer.php"); ?>

</body>
</html>

Avec sa feuille CSS :

/*
font-family: 'Roboto', sans-serif;
font-family: 'Bitter', serif;
*/

/* Initialisation */

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: url("../pictures/background.jpg") fixed;
    color: whitesmoke;
}

/* Navigation */

nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
}

nav ul {
    list-style-type: none;
    display: flex;
    height: 100%;
    margin: 0;
    justify-content: space-around;

    background-color: whitesmoke;
}

nav ul li {
    width: 10%;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

nav ul li a {
    text-decoration: none;
    color: black;
    font-family: 'Bitter', serif;
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

nav ul li a:hover {
    background-color: lightgrey;
}

/* Header */

header {
    margin-top: 50px;
    height: 670px;
    background: url("../pictures/fond_head_accueil.jpg") no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    color: whitesmoke;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    font-family: 'Oxygen Mono', monospace;
}

header h1 {
    font-size: 5em;
}

header h2 {
    font-size: 3em;
}

article {
    display: flex;
    flex-direction: column;
}

/* Article */

article .container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 20px;
}

article img {
    border-radius: 3px;
}

article .container .text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    font-family: 'Bitter', serif;
}

/* Formulaire */

form {
    margin: 0;
    background-color: whitesmoke;
    color: black;

    display: flex;
    justify-content: space-around;

    font-family: 'Bitter', serif;
}

form .titre {
    display: flex;
    align-items: baseline;
}

form .entries {
    display: flex;
    justify-content: center;
    align-items: center;
}

form .entries .un {
    display: flex;
    flex-direction: column;

    margin: 15px;
}

form .entries .un input {
    margin: 5px;
}

form .entries .deux textarea {
    min-height: 5em;
    max-height: 7em;
}

form .entries .deux input {
    width: 200px;
}

form .entries .deux {
    display: flex;
    flex-direction: column;
}

/* Footer */

footer {
    background-color: whitesmoke;
    color: black;
    margin: 0;
    padding: 0;
    border: 1px whitesmoke solid;

    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 80px;

    font-family: 'Roboto', sans-serif;
    font-size: 0.8em;
}

nav.php :

<nav>
    <ul>
        <li><a href="index.php">Accueil</a></li>
        <li><a href="equipe.php">L'équipe</a></li>
        <li><a href="work_in_progress.html">Nous rejoindre</a></li>
        <li><a href="work_in_progress.html">Espace membre</a></li>
    </ul>
</nav>

Je travaille avec PHPStorm de JetBrain et WAMP. J'accès à l'ébauche de mon site avec l'URL : http://localhost/[nomdu dossier]/index.php

J'espère avoir été assez claire, merci par avance de votre aide.

-
Edité par EloiMahe 18 juillet 2019 à 19:05:16

EloiMahe

18 juillet 2019 à 19:04:53