Même CSS deux apparences différentes...

31 mars 2020 à 11:06:26

Bonjour à tous,

je suis le cours html css de Mathieu Nebra, j'ai commencé un site avec plusieurs pages.J'ai donc réalisé un bandeau header avec mon menu navigable. Sur la première page tout s'affiche comme je le souhaite (bien qu'il y ait plein de choses que j'aimerais changer mais je ne sais pas encore comment faire), or quand je clique sur le lien de la deuxième page l'apparence est différente. Là où je comprends pas c'est que j'ai copié collé mon html pour les différentes pages et j'ai qu'un fichier css... Le seul topic que j'ai trouvé qui s'apparentait à ce problème les personnes disaient de vider le cache, ce que j'ai fais mais rien ne change.

Je vous copie colle les html, à priori y a pas de différences, j'ai copié collé et juste changer le <li> en ne le rendant plus cliquable sur la page, et rendant le <li> de la page d'accueil cliquable pour pouvoir y retourner.

HTML de la page d'accueil (qui s'affiche comme je le souhaite):

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style_armagnac.css" />
        <link rel="shortcut icon" href="favicon.ico" >
        <title> .Armagnac Ducournau I Accueil</title>
    </head>

    <body id=accueil>
        <div id="bloc_page">
            
                <header>
                    <div id=entete>
                        <div class="entete1"><h1>.Armagnac Ducournau</h1></div>
                            
                                <nav>   
                                    <ul>
                                        <li><a href="Page_L'armagnac.html">L'Armagnac</a></li>
                                        <li><a href="Page_Le_domaine.html">Le domaine</a></li>
                                        <li><a href="Page_les_produits.html">Produits</a></li>
                                        <li><a href="Page_contact.html">Contact</a></li>
                                    </ul>
                                </nav>
                            
                    </div>
                </header>

                <section>
                    <h2>Armagnac</h2>
                    <h3>Recolte, distille et eleve au domaine</h3>
                </section>
        </div>
        
    </body>
</html>

HTML d'une des autres pages (qui s'affiche différemment, le bandeau de toutes les autres pages s'affichent de cette même façon) :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style_armagnac.css" />
        <link rel="shortcut icon" href="favicon.ico" >
        <title>.Armagnac Ducournau I Produits</title>
    </head>
    <body id=lesproduits>           
            <header>
                    <div id=entete>
                        <div class="entete1"><h1><a href="Armagnac_Ducournau.html">.Armagnac Ducournau</a></h1></div>
                            
                                <nav>   
                                    <ul>
                                        <li><a href="Page_L'armagnac.html">L'Armagnac</a></li>
                                        <li><a href="Page_Le_domaine.html">Le domaine</a></li>
                                        <li><a>Produits</a></li>
                                        <li><a href="Page_contact.html">Contact</a></li>
                                    </ul>
                                </nav>
                            
                    </div>
                </header>
    
        <h1>.Les spiritueux</h1>

            <section id=1L>

                    <h4>1 Litre</h4><p><img src="photos/Bouteille1L.png" alt="Bouteille_armagnac_1_litre"></p>
            </section>
            <section id=50cl>   
                    <h4>50 centilitres</h4><p><img src="photos/Bouteille50cl.jpg" alt="Bouteille_armagnac_50 cl"></p>
            </section>  

    </body>
</html>

CSS (qui concerne toutes les pages)

@font-face {
	font-family: "Rockness";
	src: url('Polices/Rockness.ttf');
}
@font-face {
	font-family: "porterbold";
	src: url('Polices/porterbold.ttf') format('truetype');
}
@font-face {
	font-family: "bebasneueregular";
	src: url('Polices/bebasneueregular.ttf') format('truetype');
}
body#accueil
{
	background-image: url("photos/Verreaccueil.jpg");
	background-size: 100%;
}
body#test{
	background-color:yellow;
}
body#Larmagnac
{
	background-color: rgb(255, 254, 240);
	background-size: 100%;
}
body#ledomaine
{
	background-color: rgb(255, 254, 240);
	background-size: 100%;
}
body#lesproduits
{
	background-color: rgb(255, 254, 240);
	background-size: 100%;
}
body#contact
{
	background-color: rgb(255, 254, 240);
	background-size: 100%;
}
header
{
	background-color: black;
	background-position: top;
	background-size: 18%;
}
#entete{
	display: flex;

}
.entete1{
	margin-left: 1%;
	margin-right: 45%;
}
ul{
	display: flex;
	margin-top: 49px;

}
a
{	
	font-family: rockness;
	color: rgb(215, 215, 0);
	text-decoration: none;
	font-size: 1.8em;
	margin-right: 23px;
}

a:hover
{
	color: rgb(255, 255, 0);
}
h1
{
	font-family: rockness, porter-bold;
	color: rgb(215, 215,0); 
	font-size: 3em;
	text-decoration: none;
}
h2
{
	font-family: porterbold, rockness, bebasneueregular, arialcolor;
	color: rgb(254, 210, 0);
	margin-top: 240px;
	margin-left: 250px;
	font-size: 3.7em;
}
h3
{
	font-family: bebasneueregular, arialcolor;
	color: rgb(254, 210, 152);
	line-height: 5px;
	margin-left: 470px;
	margin-bottom: 0px;
	font-size: 2.9em;
}

et ici la page d'accueil qui ressemble à quelque chose qui pourrait convenir

Et en-dessous l'apparence du bandeau différente sur les autres pages ("armagnac ducournau" sur deux lignes et écrit plus gros, "le domaine" sur deux lignes également, bandeau plus large etc...)

Si quelqu'un a une idée de là où peut se trouver le problème (et nous la partager) ça m'apaiserait

Merci de m'avoir lu en tout cas !!

-
Edité par ManuNu1 1 avril 2020 à 12:08:40

AbcAbc6

31 mars 2020 à 11:23:46

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton Code de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction.

Liens conseillés

Règles générales du forum

AliasDmc

31 mars 2020 à 12:34:18

Bonjour ManuNu1

Vérifies ton code "https://validator.w3.org/

car il a des erreurs exemple, il manque une debut de balise <a>

 <div class="entete1"><h1>.Armagnac Ducournau</a></h1></div>

Découvrez les Css avec la zonecss.fr

ManuNu1

31 mars 2020 à 14:34:52

Salut,

oui j'ai découvert validator après avoir posté ma question, les deux pages html et le css que j'ai postées sont sans erreurs détectées désormais mais ça change rien au niveau visuel malheureusement.J'ai l'impression que c'est l'image de fond ou les <h2> <h3> ou les textes que je rentre dans d'autres pages <p> ou <section> qui influent mais j'en suis absolument pas sûr (je découvre totalement tout ça en ce moment).Puis si c'est le cas, c'est pourquoi surtout !!

Je recopie avec les petites modifs pour corriger le code initial. Ici la page d'accueil qui s'affiche bien.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style_armagnac.css" />
        <link rel="shortcut icon" href="favicon.ico" >
        <title> .Armagnac Ducournau I Accueil</title>
    </head>

    <body id=accueil>
        <div id="bloc_page">
            
                <header>
                    <div id=entete>
                        <div class="entete1"><h1>.Armagnac Ducournau</h1></div>
                            
                                <nav>   
                                    <ul>
                                        <li><a href="Page_L'armagnac.html">L'Armagnac</a></li>
                                        <li><a href="Page_Le_domaine.html">Le domaine</a></li>
                                        <li><a href="Page_les_produits.html">Produits</a></li>
                                        <li><a href="Page_contact.html">Contact</a></li>
                                    </ul>
                                </nav>
                            
                    </div>
                </header>

                <section>
                    <h2>Armagnac</h2>
                    <h3>Recolte, distille et eleve au domaine</h3>
                </section>
        </div>
        
    </body>
</html>

Ci-dessous, une des pages sur lesquelles renvoie le menu et qui s'affiche mal.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style_armagnac.css" />
        <link rel="shortcut icon" href="favicon.ico" >
        <title>.Armagnac Ducournau I Produits</title>
    </head>
    <body id=lesproduits>           
            <header>
                    <div id=entete>
                        <div class="entete1"><h1><a href="Armagnac_Ducournau.html">.Armagnac Ducournau</a></h1></div>
                            
                                <nav>   
                                    <ul>
                                        <li><a href="Page_L'armagnac.html">L'Armagnac</a></li>
                                        <li><a href="Page_Le_domaine.html">Le domaine</a></li>
                                        <li><a>Produits</a></li>
                                        <li><a href="Page_contact.html">Contact</a></li>
                                    </ul>
                                </nav>
                            
                    </div>
                </header>
    
        <h1>.Les spiritueux</h1>

            <section id=1L>

                    <h4>1 Litre</h4><p><img src="photos/Bouteille1L.png" alt="Bouteille_armagnac_1_litre"></p>
            </section>
            <section id=50cl>   
                    <h4>50 centilitres</h4><p><img src="photos/Bouteille50cl.jpg" alt="Bouteille_armagnac_50 cl"></p>
            </section>  

    </body>
</html>

Et le CSS corrigé:

@font-face {
	font-family: "Rockness";
	src: url('Polices/Rockness.ttf');
}
@font-face {
	font-family: "porterbold";
	src: url('Polices/porterbold.ttf') format('truetype');
}
@font-face {
	font-family: "bebasneueregular";
	src: url('Polices/bebasneueregular.ttf') format('truetype');
}
body#accueil
{
	background-image: url("photos/Verreaccueil.jpg");
	background-size: 100%;
}
body#test{
	background-color:yellow;
}
body#Larmagnac
{
	background-color: rgb(255, 254, 240);
	background-size: 100%;
}
body#ledomaine
{
	background-color: rgb(255, 254, 240);
	background-size: 100%;
}
body#lesproduits
{
	background-color: rgb(255, 254, 240);
	background-size: 100%;
}
body#contact
{
	background-color: rgb(255, 254, 240);
	background-size: 100%;
}
header
{
	background-color: black;
	background-position: top;
	background-size: 18%;
}
#entete{
	display: flex;

}
.entete1{
	margin-left: 1%;
	margin-right: 45%;
}
ul{
	display: flex;
	margin-top: 49px;

}
a
{	
	font-family: rockness;
	color: rgb(215, 215, 0);
	text-decoration: none;
	font-size: 1.8em;
	margin-right: 23px;
}

a:hover
{
	color: rgb(255, 255, 0);
}
h1
{
	font-family: rockness, porter-bold;
	color: rgb(215, 215,0); 
	font-size: 3em;
	text-decoration: none;
}
h2
{
	font-family: porterbold, rockness, bebasneueregular, arialcolor;
	color: rgb(254, 210, 0);
	margin-top: 240px;
	margin-left: 250px;
	font-size: 3.7em;
}
h3
{
	font-family: bebasneueregular, arialcolor;
	color: rgb(254, 210, 152);
	line-height: 5px;
	margin-left: 470px;
	margin-bottom: 0px;
	font-size: 2.9em;
}

(J'ai actualisé le code sur mon premier message un peu plus haut, c'est donc le même sans erreur que sur ce message)

Merci pour ton message en tout cas alias, c'est sympa !!

-
Edité par ManuNu1 1 avril 2020 à 12:08:16

EmmanuelBeziat

31 mars 2020 à 14:50:33

Salut,

Fais en sorte que le html en commun entre les deux pages soit identique entre les deux pages aussi. Là ce n'est pas le cas.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

ManuNu1

31 mars 2020 à 15:37:41

A priori on est bons maintenant !

ManuNu1

2 avril 2020 à 10:36:15

Je remonte mon sujet, car après quelques modifs le problème est toujours le même. Si quelqu'un a une idée ce serait chouette.

Sur la page d'accueil la présentation est bonne mais sur les autres pages lien ("armagnac", "domaine", "produits" et une dernière "contact" que j'ai créée entre-temps) la présentation est différente (et similaire entre ces pages là malgré tout...).

Merci à vous.