26701 sujets

CSS et mise en forme, CSS3

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 !

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;}


Salut,
As-tu un site où la page est concrètement hébergée (avec images et bon encodage des caractères ? Là c’est un peu obscur. J’ai essayé de le mettre sur codepen.io et il y a plusieurs points qui me chiffonnent (en dehors du problème principal, la position du menu).
Premièrement, les liens du menu sont invisibles (enfin, écriture blanche sur fond blanc) à moins de les survoler. Ensuite, il faudrait enlever la min-width aux conteneurs des images, ça fige la taille du contenu qui déborde sur plus petits écrans.
En ce qui qui est de la position du menu... à moins que tu n’aies oublié un bout de code, eh bien il n’est pas centré, mais bel et bien à droite, sauf qu’il déborde à gauche..
En clair, j’ai l’impression qu’il y a un gros boulot d’adaptation pour mobiles à faire (à moins, je le redis, qu’il nous manque les bouts de code correspondants).
En espérant avoir un peu aidé !
Modifié par Duchampignon (30 Jun 2019 - 13:19)
Bonjour,
Tout d'abord merci de ta réponse !

non je n'ai pas encore mis en ligne les page et ne peut donc pas vous les montrer autrement ... Pour ce qui est des liens transparents il s'agit de boutons dont le nom est noté en blanc sur une barre blanc avec une transparence. On voit donc bien leur nom sans les survoler.
Pour la barre qui doit être centrée, cela fonctionne très bien sur ordinateur avec ce que j'ai indiqué ici : une position absolute avec un right de 0. Seulement c'est légèrement décalé sur mobile. Ca apparait bien plus à droite qu'au centre mais pas totalement collé non plus.

J'espère que c'est plus clair car ce n'est pas facile à exprimer.
Bonne journée !
Salut,
En fait, il faut faire gaffe à ce genre de choses. Le visiteur qui n’arrive pas à charger l’image se retrouvera face à du texte blanc sur un fond blanc (image non chargée). Ces images étant apparemment décoratives, la solution la plus propre serait de les mettre en background-image et de définir une background-color au cas où cela ne charge pas. Sinon, on peut directement définir une background-color sur l’image.
Chez moi, le menu fonctionne également sur ordinateur, néanmoins, c’est très difficile de faire quelque chose de bon et responsive avec un positionnement absolu. Je te conseille plutôt de regarder du côté des propriétés flexbox (CSS3 Flexbox Layout module), c’est assez simple et surtout très facile à adapter sur mobile.
Concrètement pour le menu mobile, c’est pas magique. Il faut réfléchir à quelle forme on veut qu’il prenne sur mobile. Le garder sous forme horizontale ? Sous forme verticale ? Le cacher et le révéler avec un bouton ?
Ensuite, je pense qu’il faut réfléchir à l’adaptation mobile du site. D’après ce que j’ai pu voir, il y a pas mal de longueurs fixes en pixel. L’idéal serait repenser le tout en adoptant un design flexible.
Il n’y a vraiment pas moyen d’uploader cette page quelque part sur un site (un quelconque hébergeur gratuit, même de mauvaise qualité) afin d’avoir une idée de la page avec toutes les images ? Ça aiderait beaucoup à y voir plus clair.
Bonne journée!