Forum : Deviation d'objet sur mobile

Bonjour,

Je suis débutante en codage et espère que ma question ne sera pas trop bête.
J'essaie de créer mon premier site et ai un problème :

Ma barre de menu doit être en haut à droite de mon écran et faire la moitié de celui-ci. Sur ordinateur cela fonctionne très bien même en changeant les dimensions, mais quand je l'ouvre sur mobile, la barre se centre au milieu de la page.
J'ai d'ailleurs plusieurs pages sur mon site et se phénomène n'arrive que sur une page sur deux...

Savez-vous à quoi cela peut être du ?

Je vous remercie d'avoir pris le temps de lire ma question et vous souhaite une excellente journée !

Voici mon html :

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="CSS/index.css">
        <meta charset="utf-8" />
        <title>ACCUEIL</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap" rel="stylesheet">
    </head>

    <body>

<!--BARRE MENU -->

<div class="barreMenu">
            <div class="bouton accueil"><a href="./index.html">ACCUEIL</a></div>
            <div class="bouton leSaviezVous"><a href="./lesaviezvous.html">LE SAVIEZ-VOUS ?</a></div>
            <div class="bouton votrePierre"><a href="./votrepierre.html">VOTRE PIERRE &Agrave; L'EDIFICE</a></div>
            <div class="bouton contact"><a href="./contact.html">CONTACT</a></div>
</div>

<!--ROND 

<div class="rond"></div>
<p class="v">v</p>  

-->

<!--BIENVENUE -->

<div class="bienvenue">BIENVENUE</div>

<!--GRILLE -->

<div class="grille">

    <!--HEADER -->
    <header class="box header">
        <img class="image imageTortue"  width="100%" ; src="imageSite/tortue.jpg">
    </header>

    <!--DIVS -->

    <div class="box imageForet">
        <img class="image imageTortue"  width="100%" ; src="imageSite/foret.jpg">
    </div>
    <div class="box texteForet">Les forêts abritent 80% de la biodiversité terrestre et permettent de subvenir aux besoins de 1,6 milliard de personnes. Pourtant, treize millions d’hectares de forêts disparaissent chaque année, notamment en zone tropicale. Au sein des écosystèmes forestiers, les forêts primaires et les forêts secondaires offrent des services inestimables pour la planète et pour la vie sur terre.
La lutte contre la déforestation s’articule en quatre points: les engagements zéro-déforestation ou les approvisionnements responsables des entreprises et le plaidoyer, la sanctuarisation des forêts à grandes valeurs de conservation, la gestion forestière durable et la restauration des forêts dégradées.</div>
    <div class="box texteMer">Pendant des siècles, l’humanité a agi comme si mers et océans étaient des ressources inépuisables, capables de nous nourrir et d’absorber tous nos déchets. Mais il n’en est rien. Face à l’inexorable destruction de nos mangroves, herbiers marins, récifs coralliens et à la mise à mal des zones de reproduction de poisson, le milieu marin est menacé, mais également les services écosystémiques qu’il fournit, comme les ressources de pêche.
La liste des menaces qui pèsent sur les océans est sans limite. Les activités humaines génèrent des pollutions multiples - eaux usées, pesticides, hydrocarbures ou encore plastiques. De plus, dans de
nombreuses mers de la planète, les populations de poissons sont surexploitées par la surpêche.</div>
    <div class="box imageMer">
        <img class="image imageTortue"  width="100%" ; src="imageSite/mer.jpg">
    </div>
    <div class="box imageAnimal">
        <img class="image imageTortue"  width="100%" ; src="imageSite/animal.jpg">
    </div>
    <div class="box texteAnimal">La déforestation et la surexploitation des terres, l’utilisation non durable des ressources naturelles, l’introduction d’espèces invasives, le braconnage et le commerce illégal des espèces ainsi que les changements climatiques et la pollution exercent une pression sans précédent sur la nature sauvage. Pour assurer un avenir sain et durable aux espèces et à leurs habitats naturels, la priorité est aux espèces terrestres dont la survie est menacée et dont la protection requiert une action concertée au niveau international. La mission est d’améliorer leur état de conservation et celui des écosystèmes qui les hébergent, tout en prenant en compte le développement soutenable des communautés humaines avec qui elles partagent le territoire.</div>

    <!--FOOTER -->

    <footer class="box footer">
        <div class="bloc contact"><span class="titreFooter">CONTACT</span><br><br>dorianeisabel7@gmail.com<br><br>0630736422</div>
        <div class="bloc info"><span class="titreFooter">S'INFORMER</span><br><br>
            <a href="https://www.wwf.fr/"> WWF </a> <br>
            <a href="https://www.greenpeace.fr/"> GREENPEACE </a> </div>
        <div class="bloc plan"><span class="titreFooter">PLAN DU SITE</span><br><br>

            <a href="./index.html">ACCUEIL</a>
            <a href="./lesaviezvous.html"><br>LE SAVIEZ-VOUS ?</a><br>
            <a href="./votrepierre.html">VOTRE PIERRE &Agrave; L'EDIFICE</a><br>
            <a href="./contact.html">CONTACT</a></div>

        <div class="bloc design">Design par Doriane ISABEL</div>
    </footer>
  </div>        

<!--BOUTON UP-->

<a href="#top">
<div class="arrow">
                <span></span>
                <span></span>
                <span></span>

</div>
</a> 

    </body>
 </html>

Mon css :


body{margin: 0px;

}
html {scroll-behavior: smooth;}

a { 
text-decoration:none; 
color: rgb(255, 255, 255);

} 

/* BARRE MENU*/

.barreMenu {

  height: 45px;
  display: grid;
    position: absolute;
    right: 0;
    /*left: 50% ;*/
    grid-template: 45px / 1fr 2fr 3fr 1fr ;
    background-color: rgb(255, 255, 255, .4);
    z-index: 2;
    width: 50%;
    min-width: 650px;
}

.bouton {

    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    text-align: center;
    padding-top: 10px;
    color: rgb(255, 255, 255);
    min-width: 150px;

}

.votrePierre {min-width: 200px;}

.bouton:hover {background-color: #EAC652;}

.accueil {
    background-color: #EAC652;

}

/*ROND

.rond {
    background-color: #EAC652;
    border-radius: 100%;
    position: absolute;
    left: 45%;
    margin: -6,5px;

    height: 130px;
    width: 130px;
    top: 620px;
    top: 87vh;

}

.v {
    color: rgb(255, 255, 255);
    position: absolute;
    left: 47.5%;
    font-family: "Lucida Console", Monaco, monospace;
    top: 71.5%;
    font-size: 100px;
    font-weight: 100;
}*/

/*BIENVENUE*/

.bienvenue {
            color: white;
            font-family: 'Roboto', sans-serif;
            font-weight: 700;
            text-align: center;
            font-size: 80px;
            position: absolute;
            top: 150px;
            left: 510px;
            z-index: 2;

}

/*GRILLE*/

.grille {

  height: 2000px;
  display: grid;
  grid-template: 41% 1fr 1fr 1fr 1fr / 1fr 1fr;

}

.box {
      color: black;
      vertical-align: bottom;
  min-width: 620px;

}

.image {vertical-align: bottom;}

  header { grid-column: 1 / span 2 ; 
    overflow: hidden;}

  .texteForet{font-family: 'Roboto', sans-serif;
              text-align: center; 
              font-size: 23px;
             padding: 45px 25px 20px 25px;
              font-weight: 300; 

        }

  .texteMer{font-family: 'Roboto', sans-serif;
            text-align: center;
            font-size: 23px;
            padding: 25px 25px 20px 25px;
            font-weight: 300; }

  .texteAnimal{ font-family: 'Roboto', sans-serif; 
                text-align: center;
                font-size: 23px;
                padding: 25px 25px 20px 25px ;
                font-weight: 300;
}

/*BOUTON TOP*/

.arrow {
    position: fixed;
    bottom: 50px;
    right: 50px;
    transform: translate(-50%,-50%);
     transform: rotate(180deg);

}
.arrow span{
    display: block;
    width: 20px;
    height: 20px;
    border-bottom: 5px solid #EAC652;
    border-right: 5px solid #EAC652;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}
.arrow span:nth-child(2){
    animation-delay: -0.2s;
}
.arrow span:nth-child(3){
    animation-delay: -0.4s;
}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}

/*FOOTER*/

footer { grid-column: 1 / span 2 ; 
        background-color: #4E4040;
        height: 300px;
        display: grid;
        grid-template: 5fr 1fr / 1fr 1fr 1fr;
    }

.bloc { 
        font-family: 'Roboto', sans-serif; 
        text-align: center;
        color: rgb(255, 255, 255);
        font-size: 20px;
        padding-top: 35px;

}

.design { padding-top: 8px;
            text-align: left;
            grid-column-start: 1 ;
            grid-column-end: 4;
            padding-left: 20px;
             }

.titreFooter { font-weight: 700; 
                font-size: 25px;}

Soundboy39

Quand tu dit : "Ma barre de menu doit être en haut à droite de mon écran et faire la moitié de celui-ci", est ce qu'elle doit être collée est visible en haut quelqu'en soit la position du scroll ??
Si oui, alors il faut utiliser la position "fixed" et pas "absolute", sinon, je te préconiserais plutôt l'utilisation de la propriété "float" pour caler tes élements à gauche ou à droite.

Je n'ai jamais utilisé "display: grid;" et encore moins "grid-template" donc je ne sais pas du tout comment çà se comporte... en tout cas il faudra faire un CSS adaptatif si tu veux gérer la position de tes élements en fonction de la largeur de l'écran, je n'ai pas l'impression que ceci soit pris en compte dans ce que tu a poster.

Bon courage,

doisb

Auteur

Bonjour,
Tout d'abbord merci de ta réponse !
Non je ne souhaite pas que la barre reste fixée en haut quel que soit la position du scrool. Uniquement qu'elle reste à droite .
L'affichage n'est effectivement pas très adaptatif dans le sens où on peut réduire la largeur de l'écran mais uniquement jusqu'à une certaine taille afin de le pas trop modifier l'agencement.
J'espère que c'est plus clair car ce n'est pas facile à exprimer.
Bonne journée !

Soundboy39

"Non je ne souhaite pas que la barre reste fixée en haut quel que soit la position du scrool. Uniquement qu'elle reste à droite ."
Alors dans ce cas là, un float: right; devrait suffir.

"L'affichage n'est effectivement pas très adaptatif dans le sens où on peut réduire la largeur de l'écran mais uniquement jusqu'à une certaine taille afin de le pas trop modifier l'agencement."
C'est justement l'intérêt du responsive design, avoir un agencement qui s'adapte en fonction du support de l'utilisateur, et ce de la meilleure manière possible, il faut que la UI soit aussi efficace sur ordinateur, que sur tablette ou mobile... après je ne connais pas les consignes que l'on ta données par rapport à çà (ou que tu t'est imposées)...

Deviation d'objet sur mobile

3 réponses