Partage
  • Partager sur Facebook
  • Partager sur Twitter

Police fonctionne dans body mais pas header footer

Sujet résolu
    24 octobre 2021 à 22:13:09

    Bonsoir à tous,

    Déjà 2ème posts en 2 jours décidément >_<

    J'ai un souci sur la page web que je suis en train de mettre en forme, j'utilise une police qui fonctionne très bien dans mon body mais qui refuse de s'appliquer dans mon header ou dans mon footer, là où je voudrais l'utiliser justement.

    J'ai essayé avec une autre police, autre que arial etc et aucun soucis

    Une idée de ce qui pourrait poser problème ?

    Si vous avez besoin de voir mon code, dites-moi quelle partie, je sais pas quoi afficher j'avoue

    • Partager sur Facebook
    • Partager sur Twitter
      24 octobre 2021 à 23:41:19

      Bonsoir, la propriété font-family est héritée, cela veux dire que si elle est définie dans le body les enfants prennent également cette valeur.

      >> Si vous avez besoin de voir mon code, dites-moi quelle partie, je sais pas quoi afficher j'avoue

      Idéalement l'ensemble du code HTML et CSS de la page que tu testes. Si le code est trop long ou que tu souhaites reproduire une partie de problème tu peux utiliser un codepen ou jsfiddle et nous transmettre le lien.

      • Partager sur Facebook
      • Partager sur Twitter
        25 octobre 2021 à 17:48:17

        <!DOCTYPE html>
        <html>
            <head>
                <meta charset="utf-8" />
                <link rel="stylesheet" href="styleweb.css" />
                <title>Justice League - #ReleaseTheSnyderCut</title>
            </head>
            
            <body>
                <div id="bloc_page">
                    <header>
                        <div id="titre_principal">
                            <div id="logo">
                                <img src="images/ZS_JL_logo.png" alt="Logo de Justice League" />
                                <h1>Justice League</h1>    
                            </div>
                            <h2>#ReleaseTheSnyderCut</h2>
                        </div>
                        
                        <nav>
                            <ul>
                                <li><a href="#">Accueil</a></li>
                                <li><a href="#">Blog</a></li>
                                <li><a href="#">CV</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </nav>
                    </header>
                    
                    <div id="banniere_image">
                        <div id="banniere_description">
                            Retour sur la création de la Justice League...
                            <a href="#" class="bouton_rouge">Voir l'article <img src="images/flecheblanchedroite.png" alt="" /></a>
                        </div>
                    </div>
                    
                    <section>
                        <article>
                            <h1><img src="images/ico_reborn.jpg" alt="Historique" class="ico_categorie" /><b>Zack Snyder's Justice League</b></h1>
                            <p>Zack Snyder's Justice League — ou plus communément Snyder Cut —, est un film américain réalisé par Zack Snyder et sorti en 2021. Il s'agit de la version director's cut du film américain Justice League, sorti en 2017, cinquième film de l'univers cinématographique DC et basé sur l'équipe de super-héros éponyme de DC Comics. Il est dédié à la mémoire de la fille du réalisateur, Autumn, décédée en 2017.</p>
                            <p>Cette nouvelle version a pour particularité de présenter le film original qu'avait imaginé le réalisateur Zack Snyder avant de quitter la production subitement et de laisser la main au réalisateur Joss Whedon pour réécrire et retourner en partie le film, à la demande du studio Warner Bros. Le second réalisateur sera seulement crédité en tant que scénariste lors de la sortie du film en 2017.<br>
                            Aucune scène de Joss Whedon n'est utilisée. Zack Snyder a par ailleurs confirmé que cette version de Justice League se déroule dans une continuité différente de celle de Whedon.</p>
                            <p>Après avoir été annoncé sous la forme d’une mini-série découpée en quatre épisodes en août 2020, le format est finalement abandonné, pour des raisons juridiques. Il sort donc sous la forme d’un film de 4 heures et 2 minutes, une durée record pour un film de super-héros jusque là détenu par la version longue de Watchmen : Les Gardiens, atteignant 3h30, et également réalisée par Zack Snyder.<br>
                            Il s'agit également du troisième film de Snyder à bénéficier d'une version director's cut après L’Armée des morts et Watchmen : Les Gardiens.
                            Le film a reçu de très bonnes critiques dans le monde entier.</p>
                            <p>Warner Bros déclara que le Synder Cut est une impasse narrative car aucune suite n'est prévu. Snyder quant à lui a dit plusieurs fois en interviews qu'il reviendrait finir sa trilogie de films Justice League si WB l'appelait.</p>
                            <h1><img src="images/ico_fallen.jpg" alt="Historique" class="ico_categorie" /><b>Inspirations</b></h1>
                            <p>Le scénario s'inspire fortement du comics Justice League : Aux Origines de Geoff Johns (nommé en 2016 par Warner Bros à la tête de DC Films et producteur du film Justice League) et Jim Lee (qui a réalisé des story-boards pour le film et sa suite quand elle était encore en préparation), à travers les points communs suivants : « le match de football américain de Victor Stone et sa relation avec son père ; Batman enquêtant pour savoir ce qui se passe et s'impose naturellement comme le leader de l'équipe ; Wonder Woman qui sauve les citoyens de son côté avant de se mêler aux autres, Aquaman qui vient les aider, ou le fait de relier les origines de la Justice League avec l'invasion de Darkseid ».</p>
                            <p>Le costume noir que revêt Superman dans la dernière partie du film est une autre inspiration puisé dans le comics La Mort de Superman. Dans ce récit de l’homme d’acier, le personnage ressuscite également comme dans le film après avoir été tué par Doomsday et arbore une tenue noire et argentée lui permettant de se régénérer.</p>
                            <p>La résistance menée par Batman et plusieurs super-héros survivants contre un Superman devenu méchant fait énormément écho aux comics et jeu vidéo Injustice. Les œuvres ont en commun de mettre en scène un Clark Kent devenu un véritable super-vilain traquant Bruce Wayne et ses alliés, qui sont les seuls à véritablement s’opposer à lui.</p>
                        </article>
                        <aside>
                            <h1>Autour du film</h1>
                            <img src="images/bulle.png" alt="" id="fleche_bulle" />
                            <p id="affiche_zsjl"><img src="images/Snyder_Cut.jpg" alt="Photo de Zack Snyder's Justice League" /></p>
                            <p>Déterminé à s'assurer que l’ultime sacrifice de Superman n’ait pas été fait en vain, Bruce Wayne décide de faire équipe avec la guerrière Amazone Diana Prince. Leur but est de parvenir à former une équipe de méta-humains capables de protéger le monde face à une menace s’approchant de la Terre. La tâche s’avérera difficile et chacune des recrues devra faire face aux démons de son passé pour former une alliance sans précédent. Batman, Wonder Woman, Aquaman, Cyborg et Flash devront s'unir pour tenter de sauver la planète des terribles plans de Steppenwolf et de son maître, Darkseid.</p>
                            <p><u>Réalisation :</u><br>
                            Zack Snyder<br>
                            <u>Scénario :</u><br>
                            Chris Terrio<br>
                            <u>Musique :</u><br>
                            Tom Holkenborg<br>
                            <u>Direction artistique :</u><br>
                            Helen Jarvis<br>
                            <u>Décors :</u><br>
                            Patrick Tatopoulos<br>
                            <u>Costumes :</u><br>
                            Michael Wilkinson<br>
                            <u>Photographie :</u><br>
                            Fabian Wagner<br></p>
                            <p><span style="color:#36B34A"><u>Acteurs principaux :</u></span><br>
                            <span style="color:#030300">Ben Affleck</span><br>
                            <span style="color:#3A6F9B">Henry Cavill</span><br>
                            <span style="color:#F2C903">Gal Gadot</span><br>
                            <span style="color:#DA0000">Ezra Miller</span><br>
                            <span style="color:#FA9C02">Jason Momoa</span><br>
                            <span style="color:#AAA9AD">Ray Fisher</span></p>
                            <p id="justice_league_team"><img src="images/justice_league_team.gif" alt="Gif Justice League team" /></p>
                            <p><div id="logos"><a href="https://www.facebook.com/zacksnyderjustice/"><img src="images/logo_fb.png" alt="Facebook"/></a>
                            <a href="https://twitter.com/zacksnyder"><img src="images/logo_twitter.png" alt="Twitter"/></a>
                            <a href="https://vero.co/zacksnyder"><img src="images/logo_vero.png" alt="Vero"/></a>
                            <a href="https://www.instagram.com/snydercut/"><img src="images/logo_insta.png" alt="Instagram"/></a>
                            <a href="https://earth214.wordpress.com/"><img src="images/logo_wp.png" alt="Wordpress" /></a></div></p>
                        </aside>
                    </section>
                    
                    <footer>
                        <div id="tweet">
                            <h1>Dernier tweet</h1>
                            <p>#RestoreTheSnyderVerse</p>
                            <p>le 02 août à 23h26</p>
                        </div>
                        <div id="galerie_photos">
                            <h1>Galerie photos</h1>
                            <p><a TARGET="_blank" href="images/superman_death.jpg"><img src="images/superman_death.jpg" alt="Photographie" /></a>
                            <a TARGET="_blank" href="images/jl_team.jpg"><img src="images/jl_team.jpg" alt="Photographie" /></a>
                            <a TARGET="_blank" href="images/darkseid.jpg"><img src="images/darkseid.jpg" alt="Photographie" /></a>
                            <a TARGET="_blank" href="images/batman_knightmare.jpg"><img src="images/batman_knightmare.jpg" alt="Photographie" /></a></p>
                        </div>
                        <div id="membres_JL">
                            <h1>Fondateurs</h1>
                            <div id="fondateurs">
                                <ul>
                                    <li><a href="https://fr.wikipedia.org/wiki/Superman">Superman</a></li>
                                    <li><a href="https://fr.wikipedia.org/wiki/Batman">Batman</a></li>
                                    <li><a href="https://fr.wikipedia.org/wiki/Wonder_Woman">Wonder Woman</a></li>
                                    <li><a href="https://fr.wikipedia.org/wiki/Flash_(comics)">Flash</a></li>
                                </ul>
                                <ul>
                                    <li><a href="https://fr.wikipedia.org/wiki/Aquaman">Aquaman</a></li>
                                    <li><a href="https://fr.wikipedia.org/wiki/Cyborg_(comics)">Cyborg</a></li>
                                    <li><a href="https://fr.wikipedia.org/wiki/J%27onn_J%27onzz">Martian Manhunter</a></li>
                                    <li><a href="https://fr.wikipedia.org/wiki/Green_Lantern">Green Lantern</a></li>
                                </ul>
                            </div>
                        </div>
                    </footer>
                </div>
            </body>
        </html>
        /* Définition des polices personnalisées */
        
        @font-face
        {
            font-family: 'helsinki';
            src: url('polices/helsinki/helsinki-webfont.woff2') format('woff2'),
                 url('polices/helsinki/helsinki-webfont.woff') format('woff'),
                 url('polices/helsinki/helsinki-webfont.ttf') format('truetype'),
                 url('polices/helsinki/helsinki-webfont.svg#helsinkiregular') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        
        @font-face
        {
        font-family: 'air_america';
            src: url('polices/air_america/air_america.woff2') format('woff2'),
                 url('polices/air_america/air_america.woff') format('woff'),
                 url('polices/air_america/air_america.ttf') format('truetype'),
                 url('polices/air_america/air_america.svg#air_americaregular') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        
        @font-face 
        {
            font-family: 'bentham';
            src: url('polices/bentham/bentham.woff2') format('woff2'),
                 url('polices/bentham/bentham.woff') format('woff'),
                 url('polices/bentham/bentham.ttf') format('truetype'),
                 url('polices/bentham/bentham.svg') format('svg');
            font-weight: normal;
            font-style: normal;
        
        }
        
        @font-face 
        {
            font-family: 'commando';
            src: url('polices/commando/commando.woff2') format('woff2'),
                 url('polices/commando/commando.woff') format('woff'),
                 url('polices/commando/commando.ttf') format('truetype'),
                 url('polices/commando/commando.svg') format('svg');
            font-weight: normal;
            font-style: normal;
        
        }
        
        @font-face 
        {
            font-family: 'caveat_brush';
            src: url('polices/caveat_brush/caveat_brush.woff2') format('woff2'),
                 url('polices/caveat_brush/caveat_brush.woff') format('woff'),
                 url('polices/caveat_brush/caveat_brush.ttf') format('truetype'),
                 url('polices/caveat_brush/caveat_brush.svg') format('svg');
            font-weight: normal;
            font-style: normal;
        
        }
        
        @font-face 
        {
            font-family: 'brawler';
            src: url('polices/brawler/brawler.woff2') format('woff2'),
                 url('polices/brawler/brawler.woff') format('woff'),
                 url('polices/brawler/brawler.ttf') format('truetype'),
                 url('polices/brawler/brawler.svg') format('svg');
            font-weight: normal;
            font-style: normal;
        
        }
        
        @font-face 
        {
            font-family: 'big_shoulders_text_bold';
            src: url('polices/big_shoulders_tb/big_shoulders_tb.woff2') format('woff2'),
                 url('polices/big_shoulders_tb/big_shoulders_tb.woff') format('woff'),
                 url('polices/big_shoulders_tb/big_shoulders_tb.ttf') format('truetype'),
                 url('polices/big_shoulders_tb/big_shoulders_tb.svg') format('svg');
            font-weight: normal;
            font-style: normal;
        
        }
        
        @font-face 
        {
            font-family: 'atomic_age';
            src: url('polices/atomic_age/atomic_age.woff2') format('woff2'),
                 url('polices/atomic_age/atomic_age.woff') format('woff'),
                 url('polices/atomic_age/atomic_age_tb.ttf') format('truetype'),
                 url('polices/atomic_age/atomic_age.svg') format('svg');
            font-weight: normal;
            font-style: normal;
        
        }
        
        /* Eléments principaux de la page */
        
        body
        {
            background: url('images/manoftomorrow.jpg');
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            font-family: 'big_shoulders_text_bold', Arial, sans-serif;
            font-size: 20px;
            color: #181818;
        }
        
        #bloc_page
        {
            width: 900px;
            margin: auto;
        }
        
        footer h1, nav a
        {
            font-family: 'atomic_age', serif;
            font-weight: normal;
            text-transform: uppercase;
        }
        
        /* Header */
        
        header
        {
            background: url('images/ZSJL_members_bandeau.png') repeat-x bottom;
            background-size: 150px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }
        
        #titre_principal
        {
            display: flex;
            flex-direction: column;
        }
        
        #logo
        {
            display: flex;
            flex-direction: row;
            align-items: baseline;
        }
        
        #logo img
        {
            width: 100px;
            height: 135px;
        }
        
        header h1
        {
            font-family: 'air_america', arial;
            font-size: 3.5em;
            font-weight: normal;
            margin: 0 0 0 10px;
        }
        
        header h2, section h1
        {
            font-family: 'commando', serif;
            font-size: 1.1em;
            text-decoration: underline;
            margin-top: 0px;
            margin-bottom: 30px;
            font-weight: normal;
        }
        
        /* Navigation */
        
        nav ul
        {
            list-style-type: none;
            display: flex;
            margin-bottom: 25px;
        }
        
        nav li
        {
            margin-right: 15px;
        }
        
        nav a
        {
            font-size: 1.3em;
            color: #181818;
            padding-bottom: 3px;
            text-decoration: none;
        }
        
        nav a:hover
        {
            color: #760001;
            border-bottom: 3px solid #760001;
        }
        
        /* Bannière */
        
        #banniere_image
        {
            margin-top: 15px;
            height: 250px;
            border-radius: 5px;
            background: url('images/knightmare_banner.jpg') fixed top center no-repeat;
            position: relative;
            box-shadow: 0px 4px 4px #1c1a19;
            margin-bottom: 25px;
        }
        
        #banniere_description
        {
            position: absolute;
            bottom: 0;
            border-radius: 0px 0px 5px 5px;
            width: 99.5%;
            height: 33px;
            padding-top: 15px;
            padding-left: 4px;
            background-color: rgba(24,24,24,0.8);
            color: white;
            font-size: 0.8em;
            
        }
        
        .bouton_rouge
        {
            height: 25px;
            position: absolute;
            right: 5px;
            bottom: 5px;
            background: url('images/fond_degraderouge.png') repeat-x;
            border: 1px solid #760001;
            border-radius: 5px;
            font-size: 1.2em;
            text-align: center;
            padding: 3px 8px 0px 8px;
            color: white;
            text-decoration: none;
        }
        
        .bouton_rouge img
        {
            border: 0;
        }
        
        /* Corps */
        
        section
        {
            display: flex;
            margin-bottom: 20px;
        }
        
        article, aside
        {
            text-align: justify;
        }
        
        article
        {
            margin-right: 20px;
            flex: 3;
        }
        
        .ico_categorie
        {
            vertical-align: middle;
            width: 15%;
            margin-right: 8px;
        }
        
        article p
        {
            font-size: 1em;
        }
        
        aside
        {
            flex: 1.2;
            position: relative;
            background-color: #621303;
            opacity: 0.8;
            box-shadow: 0px 2px 5px #1c1a19;
            border-radius: 5px;
            padding: 10px;
            color: white;
            font-size: 0.9em;
        }
        
        #fleche_bulle
        {
            position: absolute;
            top: 100px;
            left: -12px;
        }
        
        #affiche_zsjl
        {
            text-align: center;
        }
        
        #affiche_zsjl img
        {
            border: 1px solid #181818;
            width: 100%;
            height: auto;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        
        #justice_league_team img
        {
            border: 1px solid #181818;
            width: 100%;
            height: auto;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        
        #logos
        {
            text-align: center;
        }
        
        #logos img
        {
            width: 16%;
            height: auto; 
        }
        
        aside img
        {
            margin-right: 5px;
        }
        
        /* Footer */
        
        footer
        {
            display: flex;
            background:  url('images/green_arrow_logo.png') no-repeat top 5% center, url('images/ZSJL_members_bandeau.png') repeat-x top, url('images/ombre.png') repeat-x top;
            padding-top: 50px;
            background-size: 50px, 150px;
        }
        
        footer p, footer ul
        {
            font-family: 'big_shoulders_text_bold', Arial, sans-serif;
            font-size: 0.8em;
        }
        
        footer h1
        {
            font-size: 1em;
        }
        
        #tweet
        {
            width: 35%;
            margin-top: 10px;
        }
        
        #galerie_photos
        {
            width: 50%;
            margin-top: 10px;
            margin-left: 20px;
            margin-right: 20px;
        }
        
        #membres_JL
        {
            width: 35%;
            margin-top: 10px;
        }
        
        #galerie_photos img
        {
            width: 48%;
        }
        
        #fondateurs
        {
            justify-content: space-between;
            width: 100%;
            margin-left: 25px;
        }
        
        #membres_JL ul
        {
            list-style: none;
            list-style-image: url('images/green_lantern_logo_puces.png');
            padding-left: 2px;
        }
        
        #membres_JL a
        {
            text-decoration: none;
            color: #760001;
        }
        C'est effectivement un peu long 

        • Partager sur Facebook
        • Partager sur Twitter
          26 octobre 2021 à 4:19:41

          Bonjour,

          L79 tu as une erreur, soit tu utilises un paragraphe soit une div mais pas une div dans un paragraphe. Un paragraphe dans une div ça c'est ok.

          Hummm difficile de voir la problématique car quand j'inspecte le code, avec l'inspecteur du navigateur, les propriétés sont bien appliquées.

          Normalement tu ne devrais pas avoir besoin de spécifier la police big_shoulders_text_bold dans le footer puisque celle-ci est indiquée dans le body. 

          Pour le header, la police commando, c'est peut être un problème de fichier de police. Est tu sur d'avoir tous les fichiers indiqués?

          Si tu n'as pas la possibilité de mettre en ligne, de façon temporaire, le code que tu fournis ici ainsi que les fichiers de police, et si cela t'intéresse, pourrais-tu me transmettre (Dans une archive .zip) par mail l'ensemble des fichiers pour que je regarde? Je t'envoie une adresse de contact par MP.

          PS : je ne sais pas si c'est voulu, la police helsinki n'est pas utilisée ici.

          • Partager sur Facebook
          • Partager sur Twitter
            26 octobre 2021 à 15:19:02

            Pour la ligne 79, j'avoue que comme j'ai repris le code du cours et que ça fonctionnait même après mes modifs, je n'ai pas vu l'erreur mais je modifierai ça du coup

            La police commando fonctionne bien dans le header, dans le footer aussi pour avoir testé, la police air_america aussi

            C'est vraiment seulement la police big_shoulders_text_bold qui me pose problème

            La police helsinki est là parce que je fais des essaies de polices et elle fait partie de celles que j'ai retenu donc je la laisse dans mon code si jamais je souhaite l'utiliser :)

            J'ai bien eu ton mp, je t'envoie dans la journée !

            Merci !

            • Partager sur Facebook
            • Partager sur Twitter
              28 octobre 2021 à 19:12:30

              Bonjour, désolé pour la réponse tardive, j'ai regardé les fichiers que j'ai reçu et j'avais mal compris le problème, je pensais que le problème ce situais uniquement dans le footer pour la police big_shoulders_text_bold mais en réalité elle n'est pas chargée du tout.

              Comment déboguer? Dans les outils d'inspection (F12 sur la plupart des navigateur) dans l'onglet réseau vous verrez des lignes en rouge (erreur 404) 

              Le problème est l'url de vos fichiers de police, car ils sont dans le répertoire big_shoulders_text_bold  et non big_shoulders_tb.

              Pour la correction :

              @font-face 
              {
                  font-family: 'big_shoulders_text_bold';
                  src: url('polices/big_shoulders_text_bold/big_shoulders_tb.woff2') format('woff2'),
                      url('polices/big_shoulders_text_bold/big_shoulders_tb.woff') format('woff'),
                      url('polices/big_shoulders_text_bold/big_shoulders_tb.ttf') format('truetype'),
                      url('polices/big_shoulders_text_bold/big_shoulders_tb.svg') format('svg');
                  font-weight: normal;
                  font-style: normal;
              
              }


              Bonne continuation

              • Partager sur Facebook
              • Partager sur Twitter
                28 octobre 2021 à 19:36:02

                Oh la la je suis vraiment désolé, je fais beaucoup d'erreur d'inattention comme ça >_< 

                Faut que j'apprenne à mieux relire et plus souvent mon code

                J'avais juste à vérifier le visuel de ma police en plus

                Merci de l'aide et désolé de la perte de temps :/

                Je bloque encore sur quelque chose mais je vais continuer de chercher pour éviter de demander pour rien

                • Partager sur Facebook
                • Partager sur Twitter
                  28 octobre 2021 à 22:40:27

                  EddyLefebvre a écrit:


                  Je bloque encore sur quelque chose mais je vais continuer de chercher pour éviter de demander pour rien

                  N'hésites surtout pas à poster ta demande d'aide au contraire! Si ton problème est simple à régler et que tu met une semaine à le corriger alors qu'en la solution été sous tes yeux depuis le début, tu vas t'en vouloir de pas avoir demandé avant et donc d'avoir cherché longtemps quelque chose de peut être évident :)

                  • Partager sur Facebook
                  • Partager sur Twitter

                  Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

                    29 octobre 2021 à 16:42:45

                    Lord Morpheus a écrit:

                    EddyLefebvre a écrit:

                    Je bloque encore sur quelque chose mais je vais continuer de chercher pour éviter de demander pour rien

                    N'hésites surtout pas à poster ta demande d'aide au contraire! Si ton problème est simple à régler et que tu met une semaine à le corriger alors qu'en la solution été sous tes yeux depuis le début, tu vas t'en vouloir de pas avoir demandé avant et donc d'avoir cherché longtemps quelque chose de peut être évident :)

                    Oui je ferai ça si d'ici ce soir je n'ai pas trouvé mais j'avoue que créer un sujet à chaque fois pour pas grand chose ça m'embête un peu 

                    • Partager sur Facebook
                    • Partager sur Twitter

                    Police fonctionne dans body mais pas header footer

                    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                    • Editeur
                    • Markdown