Partage

[Compatibilité] Problème d'affichage navigateur

16 juillet 2018 à 20:54:11

Bonjour,

Le site que j'ai crée est parfait mais ne convient pas au navigateur facebook pour mobile (quand on joint un lien depuis facebook) j'aimerais savoir quel propriété ce navigateur n'accepte pas si vous avez un lien ou quoi que ce soit svp.

Je vous remercie.

Bien à vous.

YannDev1

16 juillet 2018 à 23:54:53

Bonjour !

Pourrais-tu mieux détailler ton problème s'il te plaît ?

Le site est responsive ?

"L'erreur se trouve entre le clavier et la chaise"

mdevoldere

17 juillet 2018 à 11:51:42

RedTenZ a écrit:

Le site que j'ai crée est parfait

Non, votre site n'est pas parfait !

Sinon, pour vous aider, il faudrait peut-être commencer par nous montrer le code de votre site et nous préciser ce que le navigateur facebook refuse.

Pour le moment, on a aucune info nous permettant de vous aiguiller.

RedTenZ

17 juillet 2018 à 12:22:07

mdevoldere a écrit:

RedTenZ a écrit:

Le site que j'ai crée est parfait

Non, votre site n'est pas parfait !

Sinon, pour vous aider, il faudrait peut-être commencer par nous montrer le code de votre site et nous préciser ce que le navigateur facebook refuse.

Pour le moment, on a aucune info nous permettant de vous aiguiller.

Oui le site est pas parfait c'était une manière de parler pour dire qu'il me convenait, je vous fais parvenir des screens pour montrer le problème ici :

Le site apparait comme ça au lieu d'apparaitre comme ça :

Je vous joins le code ou plus simplement vous pouvez allez voir directement aux liens sur les screens ci dessus.

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>APEH</title>
    <link rel="stylesheet" href="autre/index.css" />
    <link rel="icon" type="image/png" href="Image/logo.png" />
    <link rel="stylesheet" href="autre/onglet.css" />
    <script src="autre/Onglet.js" type="text/javascript"></script>
</head>
<body>
    <div class="aLaUne1">
        <div class="closeUne" id="aLaUne2">
            <p id="close">
                <img id="image" src="Image/fermer.jpg">
                <h1 class="titree">Un article arrive très prochainement</h1>
                <script>
                var element = document.getElementById('image');
                element.onclick = function() {
                    document.getElementById('aLaUne2').className = 'animation2';
                    document.getElementById('aLaUne2').style.display = 'none';
                    }
            </script>
            </p>
        </div>
    </div>
            <div id="headline">
                <div id="headline">
                    <span>
                        <p id="title">
                            <a href="index.html">
                                <img id="logoo" src="Image/Logo2.png">
                            </a>
                        </p>
                    </span>
                </div>
                <div id="headline">
                    <div id="Nom">APEH</div>
                </div>
                <div id="headline">
                    <div id="une">
                        <script>
                            var element = document.getElementById('une');
                            element.onclick = function() {
                                document.getElementById('aLaUne2').style.display = 'block'
                                document.getElementById('aLaUne2').className = 'animation'
                            }
                        </script>
                        À la une
                    </div>
                </div>
            </div>
            <nav class="barre2"></nav>
            <nav class="barre"></nav>
            <div id="corps">
                <div id="couv">
                    <img class="couv" src="Image/couv.jpg">
                </div>
            </div>
            <div class="systeme_onglets">
                <div class="onglets">
                    <span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">Qui sommes nous ?</span>
                    <span class="onglet_0 onglet" id="onglet_projet" onclick="javascript:change_onglet('projet');"> Notre projet</span>
                    <span class="onglet_0 onglet" id="onglet_aide" onclick="javascript:change_onglet('aide');">Aidez-nous</span>
                    <span class="onglet_0 onglet" id="onglet_contact" onclick="javascript:change_onglet('contact');">Contactez nous</span>
                </div>
                <div class="contenu_onglets">
                    <div class="contenu_onglet" id="contenu_onglet_qui">
                        <h1>Qui sommes nous?</h1>
                        <p class="Sommep">L'APEH (l'Association pour le Partage et l'Entraide Humanitaire), est une association à but non lucrative, ayant pour projet la participation au 4L Trophy 2019, du 21 février au 3 mars 2019. <br>
                        L’association a pour but de récolter du matériel scolaire et sportif ainsi que des denrées dans l’objectif d’améliorer les conditions de vie et d’enseignement des enfants du Sud-Est marocain<br>
                        Nous sommes deux étudiants motivés et impliqués dans ce projet ayant pour nom d’équipage « <strong>les GPN du désert </strong> » idée venue de notre formation en BTSA Gestion et Protection de la Nature.</p>
                        <p><strong>GUYOT Théophile : </strong><br>
                        Étudiant en BTSA Gestion et Protection de la Nature.<br><br>
                        « Je regarde depuis pas mal de temps des reportages et vidéos sur le 4L trophy, et cette année je me suis dit : Pourquoi pas moi ? C'est quelque chose qui me tient à cœur : d'aider les gens, et de pouvoir en même temps voyager, découvrir de nouveaux paysages, et de nouvelles personnes. Du coup j'ai décidé de me lancer dans cette folle aventure, et d’être moi-même au cœur de ce que je regardais, et enviais. »</p>
                        <p><strong>CANTOT Corentin : </strong> Trésorier de l'association<br>
                        Étudiant en BTSA Gestion et Protection de la Nature.<br><br>
                        « Je connaissais le 4L trophy depuis peu de temps, à travers des vidéos sur internet, et d'interviews d'étudiants l'ayant réalisé. Je trouvais ça vraiment impressionnant, et à la fois presque impossible. Du moins je le pensais. Et lorsque Théophile à envisagé de le faire, je me suis renseigné sur ce rallie, et au final, je me suis dit : allez, finalement c'est faisable, et à la clé une expérience unique et forte en émotions, avec une cause humanitaire au final. Donc que des aspects positifs, du début à la fin : des démarches pour récolter de l'argent, à l'arrivé du rallie. »</p>
                        <img class="somme" src="Image/Somme.jpg">
                    </div>
                    <div class="contenu_onglet" id="contenu_onglet_projet">
                        <h1>Notre projet</h1>
                        <p>Une course, un challenge, une aventure spéciale bordée de paysages de rêve, de galères… Mais c’est avant tout une solidarité hors norme entre personnes. Réservé aux étudiants dans le désert marocain à bord de Renault 4L, c’est un périple de 10 jours et près de 6000 kilomètres avalés sur les routes de France, d’Espagne et sur les pistes du Maroc.<br>En ligne de mire, Marrakech, destination finale.</p>
                        <p>Nous allons à bord de notre 4L emmener du matériel et des fournitures scolaires destinés aux enfants les plus démunis du Maroc pour leur permettent d’avoir un droit à l’éducation et apprendre dans de meilleures conditions. C’est pour nous l’une des motivations principales de participer à cette aventure. Mais pas que ! Du matériel sportif sera aussi donné aux enfants pour embellir leur quotidien. <em>(Jouer avec ses amis au foot c’est partager des moments inoubliables !)</em></p>
                        <p>Ce projet à un coût ! Mais l’entraide n’a pas de prix et nous allons vous le prouver ! C’est pour cela que nous faisons appel à tout le monde, tous ceux qui souhaitent écrire leur nom à cette histoire. Nous vous invitons à aider ces enfants… </p>
                    </div>
                    <div class="contenu_onglet" id="contenu_onglet_aide">
                        <h1>Aidez-nous</h1>
                        <p><strong>Vous pouvez nous aider de différentes manières :</strong><br><i>Partenariat en nature : </i><br>il s’agit d’une aide directe qui se caractérise par le don de matériel nécessaire au raid (pièces détachées, boussoles, fusées de détresse, fournitures scolaires ou sportives, trousse de survie…) ou bien l’offre d’un service (peinture carrosserie…)<br><i>Partenariat financier : </i><br>il est essentiel pour mener à bien notre projet.<br>Quelle que soit la forme du partenariat que nous établirons avec vous, <strong>nous vous garantissons la promotion de votre entreprise en posant vos enseignes sur notre 4L, et ce à hauteur de votre don.</strong><em><br>(Comme l’illustre le découpage ci-dessous).</em></p>
                        <img class="Aidez" src="Image/Aidez.png">
                        <p>Et comme une Renault 4L génère des milliers de contacts visuels par jours, vous disposerez d’<strong>un moyen de communication singulier, original, mobile et surtout très visuel.<br>Nous sponsoriser est donc un moyen relativement peu coûteux pour réaliser votre publicité puisque nous avons l’intension de nous déplacer avec en dehors du 4L trophy, une sorte de remerciement aux personnes et structures qui nous aiderons !</strong></p>
                        <h1> Pourquoi nous aider et devenir partenaire ?</h1>
                        <p>Parce que votre soutient est essentiel à la viabilité de notre projet.<br>Et que nous accompagner, afficher votre nom sur notre véhicule, ce n’est pas seulement participer à un raid, c’est aussi :</p>
                        <ol class="List1">
                            <li><strong>Donner une image dynamique et engagée à votre entreprise !</strong> En apparaissant sur notre véhicule vous bénéficierez du capital sympathie que véhicule l’événement.</li>
                            <li><strong>Cultiver votre notoriété !</strong> Chaque année, le raid est couvert par de nombreux médias nationaux, locaux et régionaux.</li>
                            <li><strong>Obtenir un support de communication original, percutant et peu onéreux pour une année.</strong></li>
                            <li><strong>Vous offrir une porte d’entrée dans le monde étudiant pour recruter peut-être de futurs collaborateurs.</strong></li>
                            <li><strong>Participer à un événement humanitaire d’envergure internationale !</strong><br>En nous aidant dans notre action, vous permettez à de nombreux enfants d’être scolarisés. Cela donnera une position renforcée à votre éthique.</ol>
                        <a href="https://www.leetchi.com/c/4l-trophy-33656771"><img src="Image/logo-leetchi.png" alt="Aide nous !"/></a>
                    </div>
                    <div class="contenu_onglet" id="contenu_onglet_contact">
                        <h1>Contactez-nous</h1>
                        <p>Pour nous écrire :<br><br>11, rue Albert Camus<br>02000 Laon<br><br><i>Facebook :</i> <a href="https://www.facebook.com/APEH-1802597776452008/">  APEH</a><br><i>Mail :</i><a href="mailto:Apeh18@outlook.fr">  Apeh18@outlook.fr</a></p> 
                        &nbsp;
                    </div>
                </div>
            </div>
            <div id="subhead">
            <div id="droit">
                © Tous droits réservés - 2018
                <br>
                <p id="sign"> By BlueDream </p>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
                            </div>
        </div>
    </div>
</body>
</html>

h1
{
    font-size: 3vw;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
}
ol
{
    font-size: 1.5vw;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
}
p
{
    font-size: 1.5vw;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
}
#logoo
{
    position: absolute;
    left: 0px;
    top: 0px;
    height: 5vw;
}
img
{
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.List1
{
    text-align: left;
    list-style-type: disc;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
}
i
{
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
}
em
{
    font-style: italic;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
}
.somme
{
    width: 98%;
}
.projet1
{
    position: absolute;
    right: 10px;
    width: 200px;
    height: auto;
}
strong
{
    font-weight: bold;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
}
.titree
{
    color: white;
    text-align: center;
    margin-top: -100px;
    flex-wrap: wrap;
    margin: 2%;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
}
#une:hover
{
    font-style: italic;
    cursor:pointer;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
}
.animation2
{
    font-family: Verdana, Euphemia, Calibri, sans-serif;
    animation-duration: 1.5s;
    animation-name: Cune;
    animation-fill-mode: forwards;
    width: 100%;
    height: 100%;
    background: black;
    z-index: 2;
    position: absolute;
    margin-top: -2%;
    opacity: 0.9;
}
@keyframes Cune
{
    from {
        margin-top: -2%.
    }
    to {
        margin-top: -100%;
    }
}
#close
{
    font-family: Verdana, Euphemia, Calibri, sans-serif;
    display: flex;
    flex-direction: row-reverse;
    position: relative;
    cursor: pointer;
}
.closeUne
{
    font-family: Verdana, Euphemia, Calibri, sans-serif;
    width: 100%;
    height: 100%;
    display: none;
    background: black;
    z-index: 2;
    position: absolute;
    margin-top: -100%;
    opacity: 0.9;
}
.animation
{
    font-family: Verdana, Euphemia, Calibri, sans-serif;
    width: 100%;
    height: 104%;
    background: black;
    z-index: 2;
    position: absolute;
    margin-top: -100%;
    opacity: 0.9;
    animation-duration: 1.5s;
    animation-name: Oune;
    animation-fill-mode: forwards;
}
@keyframes Oune
{
    from {
        display: block;
        margin-top: -100%.
    }
    to {
        margin-top: 0%
    }
}
html
{
    width: 100%;
    height: 100%;
}
body
{
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: url(fond3.png) no-repeat fixed;
    background-size:auto ;
    z-index: 1;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
}
nav.barre
{
    padding:3px;
    background: #952800;
    box-shadow: 0px 5px 10px black;
}
#headline
{
    display: flex;
    height: 5vw;
    color: black;
    word-wrap: break-word;
}
#headline:nth-child(1)
{
    order: 1;
    padding: 1px 1px;
    margin-bottom: 2%;
    margin-left: 3%;
    margin-top: 0%;
    margin-right: 2%;
}
#headline:nth-child(n+2)
{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
#headline:nth-child(2)
{
    order: 2;
    padding: 1px 1px;
    margin-bottom: 0.%;
    margin-top: 0%;
}

#headline:nth-child(3)
{
    order: 3;
    padding: 1px 1px;
    margin-bottom: -1%;
    margin-left: 50%;
}
#Nom
{
    position: absolute;
    top: 0px;
    left: 6vw;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
    font-size: 4vw;
    font-weight: bold;
    color: Black;
    vertical-align: middle;
}
#une
{
    font-family: Verdana, Euphemia, Calibri, sans-serif;
    margin-top: 0%;
    font-size: 4vw;
    font-weight: bold;
    vertical-align: middle;
}
img.couv
{
    width: 100%;
    box-shadow: 0px 5px 10px black;
}
#subhead
{
    display: block;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
    text-align: center;
    color: white;
    font-size: 18px;
}
#droit
{
    font-family: Verdana, Euphemia, Calibri, sans-serif;
    text-align: center;
    color: #050505;
    font-size: 0.8vw;
}
#sign
{
    font-family: Verdana, Euphemia, Calibri, sans-serif;
    text-align: center;
    color: #050505;
    font-size: 0.8vw;
}

Je donne pas le second css apparemment le problème ne vient pas du second (qui concerne uniquement les onglets en bas de la page)

Merci beaucoup pour votre aide

Mewen_bzh

17 juillet 2018 à 13:49:15

Salut,

Je vois pas mal de choses "étranges" et incohérentes dans ce code. Il y a aussi pas mal d'erreurs...

Je te conseille de commencer par utiliser le validateur du W3C pour ton HTML (https://validator.w3.org) ainsi que celui pour le CSS (https://jigsaw.w3.org/css-validator/) afin de corriger tout cela. Comme je le dis souvent : "on ne commence pas à décorer sa maison avant d'avoir creusé des fondations solides".

Je ne réponds pas aux messages privés.

RedTenZ

17 juillet 2018 à 15:30:08

Me revoila, avec toujours le même problème je remets le code corriger ci dessous

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>APEH</title>
    <link rel="stylesheet" href="autres/index.css" />
    <link rel="icon" type="image/png" href="Image/logo.png" />
    <link rel="stylesheet" href="autres/onglet.css" />
    <script src="autre/Onglet.js" type="content/javascript"></script>
</head>
<body>
    <div class="aLaUne1">
        <div class="closeUne" id="aLaUne2">
            <p id="close">
                <img id="image" src="Image/fermer.jpg" alt="Fermer">
                <h1 class="titree">Un article arrive très prochainement</h1>
                <script>
                var element = document.getElementById('image');
                element.onclick = function() {
                    document.getElementById('aLaUne2').className = 'animation2';
                    document.getElementById('aLaUne2').style.display = 'none';
                    }
            </script>
        </div>
    </div>
            <div id="headline">
                    <span>
                        <span id="title">
                            <a href="index.html">
                                <img id="logoo" src="Image/Logo2.png" alt="LogoAPEH">
                            </a>
                        </span>
                    </span>
                    <div id="Nom">APEH</div>
                <div id="une">
                        <script>
                            var element = document.getElementById('une');
                            element.onclick = function() {
                                document.getElementById('aLaUne2').style.display = 'block'
                                document.getElementById('aLaUne2').className = 'animation'
                            }
                        </script>
                        À la une
                </div>
                </div>
            <nav class="barre2"></nav>
            <nav class="barre"></nav>
            <div id="corps">
                <div id="couv">
                    <img class="couv" src="Image/couv.jpg" alt="Fond">
                </div>
            </div>
            <div class="systeme_onglets">
                <div class="onglets">
                    <span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">Qui sommes nous ?</span>
                    <span class="onglet_0 onglet" id="onglet_projet" onclick="javascript:change_onglet('projet');"> Notre projet</span>
                    <span class="onglet_0 onglet" id="onglet_aide" onclick="javascript:change_onglet('aide');">Aidez-nous</span>
                    <span class="onglet_0 onglet" id="onglet_contact" onclick="javascript:change_onglet('contact');">Contactez nous</span>
                </div>
                <div class="contenu_onglets">
                    <div class="contenu_onglet" id="contenu_onglet_qui">
                        <h1>Qui sommes nous?</h1>
                        <p class="Sommep">L'APEH (l'Association pour le Partage et l'Entraide Humanitaire), est une association à but non lucrative, ayant pour projet la participation au 4L Trophy 2019, du 21 février au 3 mars 2019. <br>
                        L’association a pour but de récolter du matériel scolaire et sportif ainsi que des denrées dans l’objectif d’améliorer les conditions de vie et d’enseignement des enfants du Sud-Est marocain<br>
                        Nous sommes deux étudiants motivés et impliqués dans ce projet ayant pour nom d’équipage « <strong>les GPN du désert </strong> » idée venue de notre formation en BTSA Gestion et Protection de la Nature.</p>
                        <p><strong>GUYOT Théophile : </strong><br>
                        Étudiant en BTSA Gestion et Protection de la Nature.<br><br>
                        « Je regarde depuis pas mal de temps des reportages et vidéos sur le 4L trophy, et cette année je me suis dit : Pourquoi pas moi ? C'est quelque chose qui me tient à cœur : d'aider les gens, et de pouvoir en même temps voyager, découvrir de nouveaux paysages, et de nouvelles personnes. Du coup j'ai décidé de me lancer dans cette folle aventure, et d’être moi-même au cœur de ce que je regardais, et enviais. »</p>
                        <p><strong>CANTOT Corentin : </strong> Trésorier de l'association<br>
                        Étudiant en BTSA Gestion et Protection de la Nature.<br><br>
                        « Je connaissais le 4L trophy depuis peu de temps, à travers des vidéos sur internet, et d'interviews d'étudiants l'ayant réalisé. Je trouvais ça vraiment impressionnant, et à la fois presque impossible. Du moins je le pensais. Et lorsque Théophile à envisagé de le faire, je me suis renseigné sur ce rallie, et au final, je me suis dit : allez, finalement c'est faisable, et à la clé une expérience unique et forte en émotions, avec une cause humanitaire au final. Donc que des aspects positifs, du début à la fin : des démarches pour récolter de l'argent, à l'arrivé du rallie. »</p>
                        <img class="somme" src="Image/Somme.jpg" alt="CreateurAPEH">
                    </div>
                    <div class="contenu_onglet" id="contenu_onglet_projet">
                        <h1>Notre projet</h1>
                        <p>Une course, un challenge, une aventure spéciale bordée de paysages de rêve, de galères… Mais c’est avant tout une solidarité hors norme entre personnes. Réservé aux étudiants dans le désert marocain à bord de Renault 4L, c’est un périple de 10 jours et près de 6000 kilomètres avalés sur les routes de France, d’Espagne et sur les pistes du Maroc.<br>En ligne de mire, Marrakech, destination finale.</p>
                        <p>Nous allons à bord de notre 4L emmener du matériel et des fournitures scolaires destinés aux enfants les plus démunis du Maroc pour leur permettent d’avoir un droit à l’éducation et apprendre dans de meilleures conditions. C’est pour nous l’une des motivations principales de participer à cette aventure. Mais pas que ! Du matériel sportif sera aussi donné aux enfants pour embellir leur quotidien. <em>(Jouer avec ses amis au foot c’est partager des moments inoubliables !)</em></p>
                        <p>Ce projet à un coût ! Mais l’entraide n’a pas de prix et nous allons vous le prouver ! C’est pour cela que nous faisons appel à tout le monde, tous ceux qui souhaitent écrire leur nom à cette histoire. Nous vous invitons à aider ces enfants… </p>
                    </div>
                    <div class="contenu_onglet" id="contenu_onglet_aide">
                        <h1>Aidez-nous</h1>
                        <p><strong>Vous pouvez nous aider de différentes manières :</strong><br><i>Partenariat en nature : </i><br>il s’agit d’une aide directe qui se caractérise par le don de matériel nécessaire au raid (pièces détachées, boussoles, fusées de détresse, fournitures scolaires ou sportives, trousse de survie…) ou bien l’offre d’un service (peinture carrosserie…)<br><i>Partenariat financier : </i><br>il est essentiel pour mener à bien notre projet.<br>Quelle que soit la forme du partenariat que nous établirons avec vous, <strong>nous vous garantissons la promotion de votre entreprise en posant vos enseignes sur notre 4L, et ce à hauteur de votre don.</strong><em><br>(Comme l’illustre le découpage ci-dessous).</em></p>
                        <img class="Aidez" src="Image/Aidez.png" alt="Repartition4LTrophy">
                        <p>Et comme une Renault 4L génère des milliers de contacts visuels par jours, vous disposerez d’<strong>un moyen de communication singulier, original, mobile et surtout très visuel.<br>Nous sponsoriser est donc un moyen relativement peu coûteux pour réaliser votre publicité puisque nous avons l’intension de nous déplacer avec en dehors du 4L trophy, une sorte de remerciement aux personnes et structures qui nous aiderons !</strong></p>
                        <h1> Pourquoi nous aider et devenir partenaire ?</h1>
                        <p>Parce que votre soutient est essentiel à la viabilité de notre projet.<br>Et que nous accompagner, afficher votre nom sur notre véhicule, ce n’est pas seulement participer à un raid, c’est aussi :</p>
                        <ol class="List1">
                            <li><strong>Donner une image dynamique et engagée à votre entreprise !</strong> En apparaissant sur notre véhicule vous bénéficierez du capital sympathie que véhicule l’événement.</li>
                            <li><strong>Cultiver votre notoriété !</strong> Chaque année, le raid est couvert par de nombreux médias nationaux, locaux et régionaux.</li>
                            <li><strong>Obtenir un support de communication original, percutant et peu onéreux pour une année.</strong></li>
                            <li><strong>Vous offrir une porte d’entrée dans le monde étudiant pour recruter peut-être de futurs collaborateurs.</strong></li>
                            <li><strong>Participer à un événement humanitaire d’envergure internationale !</strong><br>En nous aidant dans notre action, vous permettez à de nombreux enfants d’être scolarisés. Cela donnera une position renforcée à votre éthique.</ol>
                        <a href="https://www.leetchi.com/c/4l-trophy-33656771"><img src="Image/logo-leetchi.png" alt="Aide nous !"/></a>
                    </div>
                    <div class="contenu_onglet" id="contenu_onglet_contact">
                        <h1>Contactez-nous</h1>
                        <p>Pour nous écrire :<br><br>11, rue Albert Camus<br>02000 Laon<br><br><i>Facebook :</i> <a href="https://www.facebook.com/APEH-1802597776452008/">  APEH</a><br><i>Mail :</i><a href="mailto:Apeh18@outlook.fr">  Apeh18@outlook.fr</a></p> 
                        &nbsp;
                    </div>
                </div>
            </div>
            <div id="subhead">
            <div id="droit">
                © Tous droits réservés - 2018
                <br>
                <p id="sign"> By BlueDream </p>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            </div>
</body>
</html>

Pour le html et pour le css

h1
{
    font-size: 3vw;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
}
ol
{
    font-size: 1.5vw;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
}
p
{
    font-size: 1.5vw;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
}
#logoo
{
    position: absolute;
    left: 0px;
    top: 0px;
    height: 5vw;
}
img
{
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.List1
{
    text-align: left;
    list-style-type: disc;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
}
i
{
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
}
em
{
    font-style: italic;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
}
.somme
{
    width: 98%;
}
.projet1
{
    position: absolute;
    right: 10px;
    width: 200px;
    height: auto;
}
strong
{
    font-weight: bold;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
}
.titree
{
    color: white;
    text-align: center;
    margin-top: -100px;
    flex-wrap: wrap;
    margin: 2%;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
}
#une:hover
{
    font-style: italic;
    cursor:pointer;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
}
.animation2
{
    font-family: Verdana, Euphemia, Calibri, sans-serif;
    animation-duration: 1.5s;
    animation-name: Cune;
    animation-fill-mode: forwards;
    width: 100%;
    height: 100%;
    background: black;
    z-index: 2;
    position: absolute;
    margin-top: -2%;
    opacity: 0.9;
}
@keyframes Cune
{
    from {
        margin-top: -2%
    }
    to {
        margin-top: -100%
    }
}
#close
{
    font-family: Verdana, Euphemia, Calibri, sans-serif;
    display: flex;
    flex-direction: row-reverse;
    position: relative;
    cursor: pointer;
}
.closeUne
{
    font-family: Verdana, Euphemia, Calibri, sans-serif;
    width: 100%;
    height: 100%;
    display: none;
    background: black;
    z-index: 2;
    position: absolute;
    margin-top: -100%;
    opacity: 0.9;
}
.animation
{
    font-family: Verdana, Euphemia, Calibri, sans-serif;
    width: 100%;
    height: 104%;
    background: black;
    z-index: 2;
    position: absolute;
    margin-top: -100%;
    opacity: 0.9;
    animation-duration: 1.5s;
    animation-name: Oune;
    animation-fill-mode: forwards;
}
@keyframes Oune
{
    from {
        display: block;
        margin-top: -100%
    }
    to {
        margin-top: 0%
    }
}
html
{
    width: 100%;
    height: 100%;
}
body
{
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: url(fond3.png) no-repeat fixed;
    background-size:auto ;
    z-index: 1;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
}
nav.barre
{
    padding:3px;
    background: #952800;
    box-shadow: 0px 5px 10px black;
}
#headline
{
    display: flex;
    height: 5vw;
    color: black;
    word-wrap: break-word;
}
#headline:nth-child(1)
{
    order: 1;
    padding: 1px 1px;
    margin-bottom: 2%;
    margin-left: 3%;
    margin-top: 0%;
    margin-right: 2%;
}
#headline:nth-child(n+2)
{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
#headline:nth-child(2)
{
    order: 2;
    padding: 1px 1px;
    margin-bottom: 0%;
    margin-top: 0%;
}
#Nom
{
    position: absolute;
    top: 0px;
    left: 6vw;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
    font-size: 4vw;
    font-weight: bold;
    color: Black;
    vertical-align: middle;
}
#une
{
    position: absolute;
    right: 0px;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
    margin-top: 0%;
    font-size: 4vw;
    font-weight: bold;
    vertical-align: middle;
}
img.couv
{
    width: 100%;
    box-shadow: 0px 5px 10px black;
}
#subhead
{
    display: block;
    font-family: Verdana, Euphemia, Calibri, sans-serif;
    text-align: center;
    color: white;
    font-size: 18px;
}
#droit
{
    font-family: Verdana, Euphemia, Calibri, sans-serif;
    text-align: center;
    color: #050505;
    font-size: 0.8vw;
}
#sign
{
    font-family: Verdana, Euphemia, Calibri, sans-serif;
    text-align: center;
    color: #050505;
    font-size: 0.8vw;
}

Merci encore une fois de l'aide apporté

-
Edité par RedTenZ 17 juillet 2018 à 15:41:28

YannDev1

17 juillet 2018 à 19:45:37

Bonjour !

Ce comportement est parfaitement normal (enfin je pense) !

Tu devrais faire un site web responsive pour être sur de la compatibilité mobile!

N'hésite pas à me demander si tu as des questions !

En espérant que ça t'aidera

Cordialement

Yann

"L'erreur se trouve entre le clavier et la chaise"

RedTenZ

17 juillet 2018 à 22:36:53

Bonjour !

Le problème c'est qu'il marche sur mobile (bon c'est pas ce qu'il y a de mieux) sauf quand je rejoins le lien via Facebook et la ça pose problème il doit avec une erreur mais j'aimerais savoir d'ou elle vient. Et c'est pas non plus un site qui doit être hyper optimisé alors j'aimerais juste au moins ça ne fasse pas sale, je me lancerais dans une version mobile dans un site prochain voir ce que ça donne.

Bien à toi

YannDev1

19 juillet 2018 à 18:46:38

Salut !

Je te confirme que c'est une question de responsive

Comme tu dois sûrement le savoir les naviguateurs ont des comportements différents !

Le naviguateur de ton mobile est sûrement plus avancé et effectue une redimension de ton site.

Je peux donc te conseiller de faire un site responsive pour avoir un affichage mobile controllé

Cordialement

Yann

"L'erreur se trouve entre le clavier et la chaise"

RedTenZ

20 juillet 2018 à 13:49:15

Le problème c'est qu'entre mes 3 navigateurs mobile j'arrive a en avoir 2 correcte et un qui ne l'est pas.. J'aimerais juste savoir quel propriété n'admets il pas ou bien je ne sais pas

Mewen_bzh

20 juillet 2018 à 16:45:12

Salut,

Si ton problème se produit uniquement quand tu souhaites partager un lien vers ton site sur Facebook alors dans ce cas je te conseille de te renseigner sur les balises du protocole Open Graph. 😉

Début d'informations :

https://openclassrooms.com/fr/courses/3504431-decouper-et-integrer-une-maquette/3605786-ajouter-les-metatags

-
Edité par Mewen_bzh 20 juillet 2018 à 16:51:14

Je ne réponds pas aux messages privés.