Sujet Précédent Sujet Suivant

Deviation d'objet sur mobile

Fermé
dorianeisb - 4 juin 2019 à 19:31
Tsarano Messages postés 6 Date d'inscription samedi 10 septembre 2016 Statut Membre Dernière intervention 24 juin 2019 - 24 juin 2019 à 14:46
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 À 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 forêts abritent 80% de la biodiversité terrestre et permettent de subvenir aux besoins de 1,6 milliard de personnes. Pourtant, treize millions d’hectares de forêts disparaissent chaque année, notamment en zone tropicale. Au sein des écosystèmes forestiers, les forêts primaires et les forêts secondaires offrent des services inestimables pour la planète et pour la vie sur terre.
La lutte contre la déforestation s’articule en quatre points: les engagements zéro-déforestation ou les approvisionnements responsables des entreprises et le plaidoyer, la sanctuarisation des forêts à grandes valeurs de conservation, la gestion forestière durable et la restauration des forêts dégradées.</div>
    <div class="box texteMer">Pendant des siècles, l’humanité a agi comme si mers et océans étaient des ressources inépuisables, capables de nous nourrir et d’absorber tous nos déchets. Mais il n’en est rien. Face à l’inexorable destruction de nos mangroves, herbiers marins, récifs coralliens et à la mise à mal des zones de reproduction de poisson, le milieu marin est menacé, mais également les services écosystémiques qu’il fournit, comme les ressources de pêche.
La liste des menaces qui pèsent sur les océans est sans limite. Les activités humaines génèrent des pollutions multiples - eaux usées, pesticides, hydrocarbures ou encore plastiques. De plus, dans de
nombreuses mers de la planète, les populations de poissons sont surexploitées par la surpê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 déforestation et la surexploitation des terres, l’utilisation non durable des ressources naturelles, l’introduction d’espèces invasives, le braconnage et le commerce illégal des espèces ainsi que les changements climatiques et la pollution exercent une pression sans précédent sur la nature sauvage. Pour assurer un avenir sain et durable aux espèces et à leurs habitats naturels, la priorité est aux espèces terrestres dont la survie est menacée et dont la protection requiert une action concertée au niveau international. La mission est d’améliorer leur état de conservation et celui des écosystèmes qui les hébergent, tout en prenant en compte le développement soutenable des communauté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>***@***<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 À 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 : 
<!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 À 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 forêts abritent 80% de la biodiversité terrestre et permettent de subvenir aux besoins de 1,6 milliard de personnes. Pourtant, treize millions d’hectares de forêts disparaissent chaque année, notamment en zone tropicale. Au sein des écosystèmes forestiers, les forêts primaires et les forêts secondaires offrent des services inestimables pour la planète et pour la vie sur terre.
La lutte contre la déforestation s’articule en quatre points: les engagements zéro-déforestation ou les approvisionnements responsables des entreprises et le plaidoyer, la sanctuarisation des forêts à grandes valeurs de conservation, la gestion forestière durable et la restauration des forêts dégradées.</div>
    <div class="box texteMer">Pendant des siècles, l’humanité a agi comme si mers et océans étaient des ressources inépuisables, capables de nous nourrir et d’absorber tous nos déchets. Mais il n’en est rien. Face à l’inexorable destruction de nos mangroves, herbiers marins, récifs coralliens et à la mise à mal des zones de reproduction de poisson, le milieu marin est menacé, mais également les services écosystémiques qu’il fournit, comme les ressources de pêche.
La liste des menaces qui pèsent sur les océans est sans limite. Les activités humaines génèrent des pollutions multiples - eaux usées, pesticides, hydrocarbures ou encore plastiques. De plus, dans de
nombreuses mers de la planète, les populations de poissons sont surexploitées par la surpê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 déforestation et la surexploitation des terres, l’utilisation non durable des ressources naturelles, l’introduction d’espèces invasives, le braconnage et le commerce illégal des espèces ainsi que les changements climatiques et la pollution exercent une pression sans précédent sur la nature sauvage. Pour assurer un avenir sain et durable aux espèces et à leurs habitats naturels, la priorité est aux espèces terrestres dont la survie est menacée et dont la protection requiert une action concertée au niveau international. La mission est d’améliorer leur état de conservation et celui des écosystèmes qui les hébergent, tout en prenant en compte le développement soutenable des communauté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>***@***<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 À 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>
A voir également:

2 réponses

Réponse 1 / 2
Mike
6 juin 2019 à 10:53
Bonjour,

Le problème vient du fait que ton CSS est du HTML :)
Non, je plaisante ^^

Relis ton post, tu n'as pas copié ton CSS.
0
dorianeisb
6 juin 2019 à 11:53
Aie oui merci !

Voici 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;}
0
Réponse 2 / 2
Tsarano Messages postés 6 Date d'inscription samedi 10 septembre 2016 Statut Membre Dernière intervention 24 juin 2019 1
24 juin 2019 à 14:46
Il faudra changer le style css selon la taille de l'écran avec les medias queries : 

@media screen and (max-width:480px){
          /*  Le CSS pour la version mobile */
}
0

Discussions similaires

je peux plus me connecter sur coco.fr
Domi -
pasc -

3 réponses
Connexion impossible sur coco.fr
Folya -
Xileh -

6 réponses
[SUJET GROUPÉ] Problèmes rencontrés sur le site COCO.
Pisceneo -
Radinoz -

17 réponses
Site de téléchargement pour mobile (Tubidy)
Jotiger -
Jean -

8 réponses
Coco.fr
Antoine2249 -
foulq -

11 réponses