Hello,
Sur mon site web, http://antoine-bernard.com/YELLOW/Yellow.html , quand on clique sur le menu en haut à gauche, il y a un overlay correct qui affiche le menu sur fond avec opacité, sur tout la hauteur de la page.
Mais lorsque je l'affiche sur iPad en paysage, il ne recouvre pas toute la surface (voir image ci-dessous!).
J'ai essayé beaucoup de choses, j'ai vérifié mes z-index notamment, mais rien à faire, je ne vois pas d'où le problème peut venir!
A noter, je suis débutant en html/css, je dois donc passer à coté d'une erreur assez bête!
Au niveau du code HTML, j'ai ça
<!DOCTYPE html>
<html>
<head>
<title>Shades of Green</title>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, user-scalable=yes" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS pour les pages du site -->
<script>
document.write('<link href="Styles.css?r='+ Math.floor(Math.random()*100) +'" rel="stylesheet" type="text/css" />');
</script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<header class="site-header">
<input type="checkbox" id="bars"></input>
<div class="top">
<label for="bars"><i class="fa fa-bars"></i></label>
</div>
<div class="top-right">
<label for="bars">//About</label>
</div>
<div class="overlay menu-overlay">
<label for="bars"> </label>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="About.html">About</a></li>
<li><a href="Gallery.html">Gallery</a></li>
<li><a href="Exhibitions.html">Exhibitions</a></li>
<li><a href="Prints.html">Prints</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<div id="contenu">
<div id="cellule-presentation">
<div id="titre"> Shades of Green</div>
<div id="description">
<p>Terras terras potentissimorumque usurpare sed imperatorum lustratae varietate cuiusquam contentionum sermonibus proeliorum cursibus nec usurpare quam bellorum oculos conficiendi lustratae quam regum omnis regionum numero nec omnis non conficiendi non peragrari ante disiunctissimas contentionum proeliorum vero posse saepe passibus cum disiunctissimas vero contentionum gentium dissimilitudine tuis nec sed lustratae oculos potuisse dissimilitudine oculos nec nec varietate tuis celeritate nec celeritate gestas nec celeritate usurpare tuis imperatorum lustratae omnis non sunt posse varietate bellorum gestas nec gestas contentionum dicam res nec regum peragrari sunt dicam populorum nec lustratae conferri potuisse omnis non cuiusquam omnis varietate nec conferri conficiendi ponere idque dicam.</p>
</div>
</div>
<div id="portfolio">
<div class="cellule-image">
<figure>
<img src="Photos/Green01.jpg" srcset="Photos/Green01.jpg 1x, Photos/Green01@2x.jpg 2x" alt="Green01">
<figcaption>01.</figcaption>
</figure>
</div>
<div class="cellule-image">
<figure>
<img src="Photos/Green02.jpg" srcset="Photos/Green02.jpg 1x, Photos/Green02@2x.jpg 2x" alt="Green02">
<figcaption>02. </figcaption>
</figure>
</div>
<div class="cellule-image">
<figure>
<img src="Photos/Green03.jpg" srcset="Photos/Green03.jpg 1x, Photos/Green03@2x.jpg 2x" alt="Green03">
<figcaption>03. </figcaption>
</figure>
</div>
<div class="cellule-image">
<figure>
<img src="Photos/Green04.jpg" srcset="Photos/Green04.jpg 1x, Photos/Green04@2x.jpg 2x" alt="Green04">
<figcaption>04. </figcaption>
</figure>
</div>
</div>
</div>
<!--
<footer class="site-footer">
<div class="bottom-left">
<label for="bars">Copyright Toru Okada 2015</label>
</div>
</footer>
-->
</body>
</html>Et pour le CSS...
/*
//////////////////////////////////////////////////////////////////////
Bases
//////////////////////////////////////////////////////////////////////
*/
html {
font-size:100%;
font-family: "Menlo", "Monaco", Monospace;
color:rgb(52,73,94);
}
body {
background: white;
height: auto;
font-size: 12px;
font-weight: 100;
margin-left: 0px;
margin: 0px;
padding: 0px;
}
@media (max-width: 640px) {
body {
font-size:0.7rem;
}
}
@media (min-width: 640px) {
body {
font-size:0.8rem;
}
}
@media (min-width:960px) {
body {
font-size:0.9rem;
}
}
@media (min-width:1100px) {
body {
font-size:0.9rem;
}
}
/*
//////////////////////////////////////////////////////////////////////
GLOBAL
//////////////////////////////////////////////////////////////////////
*/
.site-header {
position: fixed;
width: 100%;
left:0;
right:0;
top:0;
z-index: 101;
font-size: .9em;
background-color: white;
height: 80px;
}
.top-right {
z-index: 999;
position: fixed;
display: block;
padding: 9px;
height: 32px;
width: auto;
margin: 0px;
top: 3.7%;
right:3%;}
.top-right label {
text-transform:uppercase;
font-size:20px;
text-align:center;
}
input {
display:none;
}
.top{ z-index: 999;
position: fixed;
display: block;
padding: 9px;
height: 32px;
width: 32px;
margin: 0px;
top: 3%;
left: 3%;
}
.top label {
text-transform:uppercase;
font-size:30px;
text-align:center;
}
/* Ipad paysage */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
.site-header {height: 200px;}
.top{ padding: 9px;height: 100px;width: auto;}
.top-right {height: 100px;}
.top-right label {font-size:3.5rem; color: red;}
.top label {font-size: 6.5rem;}
.overlay {
height: 100%; border: 10px solid green;}
}
/* iPhone 6 paysage */
@media only screen
and (min-width : 375px)
and (max-width : 667px)
and (orientation : landscape) {
.site-header {height: 200px;}
.top-right {height: 100px;}
.top-right label {font-size:2.5rem;}
.top{height: 100px;width: auto;}
.top label {font-size:2.8rem;}
}
/*
.site-footer {
position: fixed;
width: 100%;
left:0;
right:0;
bottom:0;
z-index: 10;
font-size: .9em;
background-color: white;
height: 50px;
}
.bottom-left {
z-index: 999;
position: fixed;
display: block;
height: 32px;
width: auto;
bottom: 10px;
left:3%;}
*/
.top label:hover {
cursor:pointer;
opacity: 0.5;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
/*
top: 0%;
left: 0;
*/
background: rgba(0,0,0,0.7);
/* border: 4px solid red; */
}
.overlay label {
width: 58px;
height:58px;
position: absolute;
right: 20px;
top: 20px;
/* background: url('images/Close.png'); */
background: url('images/closeipad.png');
z-index: 100;
cursor:pointer;
}
.overlay nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
font-size: 54px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay ul li {
display: block;
height: 20%;
height: calc(100% / 6);
min-height: 54px;
}
.overlay ul li a {
font-weight: 300;
display: block;
color: white;
text-decoration:none;
-webkit-transition: color 0.2s;
transition: color 0.2s;
text-transform:uppercase;
}
.overlay ul li a:hover,
.overlay ul li a:focus {
color:rgb(52,73,94);
}
.top~.menu-overlay {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
#bars:checked~.menu-overlay {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.menu-overlay nav {
-moz-perspective: 300px;
}
.menu-overlay nav ul {
opacity: 0.4;
-webkit-transform: translateY(-25%) rotateX(35deg);
transform: translateY(-25%) rotateX(35deg);
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}
#bars:checked~.menu-overlay nav ul {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
#bars:not(:checked)~.menu-overlay nav ul {
-webkit-transform: translateY(25%) rotateX(-35deg);
transform: translateY(25%) rotateX(-35deg);
}
/*
//////////////////////////////////////////////////////////////////////
PORTFOLIO
//////////////////////////////////////////////////////////////////////
*/
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
.cellule-image figure img {
background-image: url('/photos/my_image@2x.png');
background-size: 200px 100px;
}
}
#contenu {
display:table;
margin-top:0px;
width: 100%;
margin-top: 100px;
margin-left: 3%;
}
#cellule-presentation {
display:table-cell;
width:300px;
vertical-align:top;
margin-right: 320px;
padding-right: 10px;
padding-left: 10px;
min-width:300px;
z-index: 101;
background: white;
height: auto;
vertical-align: top;
line-height: 1.5;
}
#titre {
font-size: 0.8rem;
font-weight: 100;
margin-bottom: 20px;
}
#description p{
font-size: 0.7rem;
}
#portfolio {
margin-left:20px;
display: table;
}
.cellule-image {
display:table-cell;
margin-right: 30px;
}
.cellule-image figure img {
height: 450px;
border-radius: 4px;
}
figcaption {
text-align:left;
color:rgb(52,73,94);
font-size: 0.7rem;
margin-top: 10px;
margin-left: 5px;
}
/* iPhone 6 paysage */
@media only screen
and (min-width : 375px)
and (max-width : 667px)
and (orientation : landscape) {
#contenu {margin-top: 200px;}
#cellule-presentation {width:600px; margin-right: 620px; min-width:600px;}
#description p{font-size: 1.6rem;}
#titre {font-size: 1.9rem;}
figcaption {font-size: 1.6rem;}
.cellule-image figure img {height: 1000px; border-radius: 10px;}
}
/* iPhone 6 portrait */
@media only screen
and (min-width : 375px)
and (max-width : 667px)
and (orientation : portrait)
{
#contenu {display:table; width: 94%; margin-left: 3%; margin-right: 3%;}
#cellule-presentation {display: block; position: static; margin: auto; width: auto; height: auto; margin-bottom: 10px;}
#titre {display: none;}
#description p {padding-bottom: 20px;}
#portfolio {margin: auto; width: 100%; text-align: center;}
.cellule-image {display:inline-block;margin-bottom: 30px;}
.cellule-image figure img {width: 110%; height: auto; margin-right: 5%; margin-left: 5%;}
figcaption {margin-top: 5px; margin-left: 6%;}
}
figcaption a {
color:rgb(52,73,94);
text-decoration: none;
}
figcaption a:hover {
opacity:0.5;
}
.cellule-image figure {
margin:auto;
text-align: center;margin-right: 30px;
}Voilà... Si quelqu'un a une idée ou une piste, je suis preneur, je commence à ne plus avoir beaucoup de cheveux!
Merci d'avance à toutes celles et ceux qui prendront le temps de m'aider!
Antoine
22 réponses
Salut,
Trop de code pour moi, j'ai pas tout lu, mais ceci ne suffit pas ?
.overlay {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
}Hello,
J'avais déjà essayé de mettre un bottom à 0 dans le doute, mais là j'ai retenté "au cas où", et le problème demeure...
Essais de forcer de html,body à une hauteur de 100%.
Ainsi ton overlay prendra toute la valeur de la fenêtre
html,body{height:100%;}
J'avais déjà essayé en mettant le height à 100% uniquement dans la media query ipad, j'ai retenté en la mettant dans la media query d'une part, et dans la media query et dans le "css de base", et toujours rien... C'est à n'y rien comprendre.
J'ai l'impression qu'il y a un problème avec un z-index, parce que il s'arrête juste au niveau de la fin du portfolio.
je sortirai le menu de ton header pour le mettre a la racine de ton body et ensuite ajouter la regle CSS suivante :
.overlay {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}PS : de memoire, position fixed n'est pas tres bien compris des iOS et mobiles.
Salut,
Alors déjà, évites de nous mettre une chiée de code comme ça, ça ne donne vraiment pas envie de regarder ton sujet.
Sinon, ton élément .overlay doit être enfant direct du body. Ensuite, je te conseille de prevent le scroll de la page lorsque le menu est affiché. De cette façon, celui-ci sera toujours visible (n'oublies pas de jouer avec les z-index des éléménts). Enfin, penses à donner une width et une height de 100% à ton .overlay.
Je savais pas trop pour le code si je le mettais ou pas! Je le saurai pour la prochaine fois!
Je dois t'avouer que je ne comprends pas trop quand tu parles d'enfant direct du body (je débute vraiment en CSS...)
Pour le prevent scroll aussi!
Pour le width et le height à 100% ils y sont déjà.
@itoine,
Comme ceci :
HTML :
<body>
<div class="overlay"></div>
<!-- Le reste de ton HTML ici -->
</body>CSS:
.overlay{
position: fixed;
width: 100%; height: 100%;
top: 0; right: 0; bottom: 0; left: 0;
background-color: rgba(0,0,0,0.2);
z-index: 1000;
}Ouhlala, ça me mets un de ces bordel de tous les diables! :D
J'ai plus du tout l'affichage du menu en overlay lorsque je clicque sur le hamburger!
J'ai essayé avec un autre code que j'ai trouvé pour le menu overlay (promis le code est moins long!!), mais le problème est le même sur l'ipad (en plus d'ajouter le fait que le portfolio passe sous la barre de header si on scrolle...)
http://antoine-bernard.com/RED/Yellow.html
<header id="head">
<div class="containermenu">
<nav id="Overlaymenu">
<input type="checkbox" id="toggle-nav"/>
<label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label>
<div class="box">
<ul>
<li><a href="#"><i class="icon-home"></i> home</a></li>
<li><a href="#"><i class="icon-file-alt"></i> about</a></li>
<li><a href="#"><i class="icon-copy"></i> works</a></li>
<li><a href="#"><i class="icon-envelope"></i> contacts</a></li>
</ul>
</div>
</nav>
</div>
</header>.containermenu { margin: 0px 10% 0px 10%; }
#head { margin-top: 20px;
position: fixed;
width: 100%;
left:0;
right:0;
top:0;
z-index: 101;
font-size: .9em;
background-color: white;
height: 80px;
}
#Overlaymenu .box {
position: fixed;
text-align: center;
overflow: hidden;
z-index: -1;
opacity: 0;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background: rgba(0,0,0,0.8);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#Overlaymenu ul {
position: relative;
top: 12%;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#Overlaymenu li {
display: inline-block;
margin: 20px;
}
#Overlaymenu li a {
border-radius: 3px;
padding: 15px;
border: 1px solid transparent;
text-decoration: none;
font-size: 18px;
color: #fff;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#Overlaymenu li a:hover { border-color: #fff; }
#Overlaymenu li a i {
margin-right: 5px;
font-size: 24px;
}
#toggle-nav-label {
color: rgba(0,0,0,0.5);
background: rgba(0,0,0,0.2);
text-align: center;
line-height: 50px;
font-size: 16px;
display: block;
cursor: pointer;
position: relative;
z-index: 500;
width: 50px;
height: 50px;
border-radius: 3px;
}
#toggle-nav { display: none; }
#toggle-nav:checked ~ .box {
opacity: 1;
z-index: 400;
}
#toggle-nav:checked ~ .box ul {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#toggle-nav:checked ~ #toggle-nav-label {
background: #fff;
color: rgba(0,0,0,0.8);
}
Pour moi, le code donné par strong>@betaWeb</strong est correct et fonctionne, tu dois juste revoir tes sélecteurs et tu retrouveras le comportement que tu veux.
Tu entends quoi par sélecteurs?
Si j'ai bien compris, je mets au tout début du BODY le code suivant, avec le CSS associé?
J'ai fait ça et ça donne ça http://antoine-bernard.com/YELLOW/Yellow2.html
<div class="overlay menu-overlay">
<label for="bars"> </label>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="About.html">About</a></li>
<li><a href="Gallery.html">Gallery</a></li>
<li><a href="Exhibitions.html">Exhibitions</a></li>
<li><a href="Prints.html">Prints</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</nav>
</div>
Je viens de remarquer quelque chose, en modifiant ma class .overlay, en mettant height:150%.
Il se trouve que à ce moment là, sur l'ipad en orientation paysage, l'overlay prend toute la hauteur de l'écran pendant 1/4 de secondes, et se "tronque" après pour revenir comme initialement!
Peut être que ça peut donner un indice!
.overlay {
position: fixed;
width: 100%;
height: 150%;
left: 0;
background: rgba(0,0,0,0.7);
}
@itoine pourquoi wrappes-tu ton menu avec l'élément .overlay ??? Nul part nuos t'avons dit de faire ceci.
Cet élément doit être indépendant.
Qu'est ce que tu entends par wrap en fait? J'ai récupére ce bout de script, j'ai vu qu'il marchait je l'ai mis, mais je suis incapable de comprendre le fonctionement total du truc! Je comprends un minimum quand même hein! :D
Tout le problème est là : tu ne comprends pas ce que tu fais, tu ne fais que copier/coller du code.
Je te conseille reprendre la chose de zéro à tête reposée, tu crées un codepen par exemple (codepen.io) et tu essayes de recréer le fonctionnement que tu souhaites. Il n'y a que de cette façon que tu pourra y arriver ;)
Oui c'est ce que j'essaie de faire là, j'ai repris avec un truc beaucoup plus simple de zéro, mais j'ai encore le même problème! Je continue encore un peu là pour voir...
Tiens j'avais fait cet exemple pour @Gynidark y'a quelques temps, tu peux t'en inspirer si tu veux : http://codepen.io/betaweb/pen/YyVgaz
J'ai essayé d'adapter et de comprendre ta version, qui je dois l'avouer est plus simple que celle que j'avais trouvée.
Par contre, même en réfléchissant, j'ai toujours un problème, et ce dès la version "classique".
J'ai mis la couleur de fond du menu en rouge pour bien voir.
http://antoine-bernard.com/RED/
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.navbar {
width: 100%;
height: 50px;
background-color: white;
padding: 0 32px;
}
.navbar .menu--trigger {
display: inline;
float: left;
height: inherit;
cursor: pointer;
font-size: 1.8rem;
font-weight: 600;
top: 3%;
position: fixed;
}
.navbar .menu--trigger.is-active {
color: green;
}
.navbar .partie-droite {
display: inline;
float: right;
height: inherit;
cursor: pointer;
font-size: 1.5rem;
top: 3%;
right: 3%;
position: fixed;
}
.overlay {
position: fixed;
top: 0px;
right: 0;
bottom: 0;
left: 0;
background-color: white;
/* opacity: 0.8; */
z-index: -1;
transition: opacity 0.2s;
}
.overlay.is-active {
opacity: 0;
z-index: 1000;
cursor: pointer;
}
.menu {
position: fixed;
width: 100%;
background-color: red;
opacity: 0.8;
top: 50px;
bottom: 0;
right: 100%;
transition: right 1s;
z-index: 1002;
}
.menu h4 {
margin-top: 10%;
text-align: center;
color: red;
}
.menu.is-active {
right: 0;
}
.menu ul{vertical-align: middle;
text-align: center;
}
.menu ul li{margin-top: 20px;}
.menu ul li a{
padding-top: 20px;
color:rgb(52,73,94);
font-size: 2rem;
text-decoration: none;
}
J'ai mis un top à 0px sur la classe menu, et ça marche sur la version "classique" du site.
Par contre je perds la possibilité de fermer le menu en overlay...
Il faudrait pouvoir mettre le petit hamburger d'ouverture du menu en premier plan non? c'est avec un z-index ça non?
EDIT:
J'ai répondu à ma question en mettant un z-index:1500 sur la classe .navbar .menu--trigger.is-active
Par contre je me demandais si c'était possible de quitter le mode overlay en cliquant n'importe où sur la page (sauf sur les liens du menu bien entendu).
Et aussi pour centrer le bloc vert contenant les ul/li... J'ai centré horizontalement en mettant des margin right et left à 25% et un width à 50%, mais quand je fais la même chose verticalement ça me décale tout en bas.
- Pour le centrage (une petite recherche n'aurait pas été du luxe..) : http://www.grafikart.fr/tutoriels/html-css/centrer-css-614 & http://www.grafikart.fr/tutoriels/jquery/centrer-div-294
- Pour la fermeture en cliquant n'importe où, tu veux dire en cliquant sur l'overlay ?
J'avais regardé un peu pour le centrage des div, ça semblait ne pas fonctionner (j'avais un gros décallage aussi), mais je vais retenter à tête reposée.
EDIT: J'ai trouvé pour le centrage! :)
Par contre pour la fermeture, oui c'est ça que je voulais dire, en cliquant n'importe où sur l'overlay, j'aimerai que ça le ferme!