Sujet Précédent Sujet Suivant

Problème Media Queries

Fermé
Ipoote Messages postés 45 Date d'inscription dimanche 23 septembre 2018 Statut Membre Dernière intervention 21 mai 2023 - 20 avril 2022 à 17:54
Ipoote Messages postés 45 Date d'inscription dimanche 23 septembre 2018 Statut Membre Dernière intervention 21 mai 2023 - 21 avril 2022 à 15:12
Salut tout le monde,
Je poste ce message car je travaille sur un projet scolaire et j'ai un problème avec les media queries : je dois mettre mon bouton de menu en bas de page, mais le problème c'est que lorsque j'utilise la balise meta et le media query, cela détruit toute ma page web...

Comment puis-je résoudre ce problème ? Merci beaucoup, et voici mes codes HTML et CSS :

HTML : 

<!doctype html>
<html lang="fr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Les phases de l'Univers Cinématographique de Marvel</title>
  <link rel="stylesheet" href="css/styles2.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="js/comportements.js"></script>
</head>


<body>
  <header>
    <h1> PHASE 2 </h1>
  </header>




<div class="hamburger-menu">
    <input id="menu__toggle" type="checkbox" />
    <label class="menu__btn" for="menu__toggle" >
      <span></span>
    </label>

    <ul class="menu__box">
      <li><a class="menu__item" href="phase1.html">Phase 1</a></li>
      <li><a class="menu__item" href="phase2.html">Phase 2</a></li>
      <li><a class="menu__item" href="phase3.html">Phase 3</a></li>
      <li><a class="menu__item" href="phase4.html">Phase 4</a></li>
    </ul>
  </div>

  <label class="switch">
    <input type="checkbox" onclick="modeNuit()">
    <span class="slider round"></span>
  </label>

  <button class="btn" onclick="window.location.href='index.html'"><i class="fa fa-home"></i></button>

  <ul class="films">

    <li class="film"><a> <img src="images/iron-man-3-logo.png" class="titre"> <span><img src="http://1.bp.blogspot.com/-BQGHBlR0mbw/Ub8bzglXfEI/AAAAAAAAGmw/6GYCUQelKT0/s1600/iron_man_3_movie-wide.jpg"></span></a><p>Tony Stark, alias Iron Man, mène une vie confortable aux côtés de sa compagne, Pepper. Cependant, il se retrouve confronté à Mandarin, chef d'une organisation terroriste, qui détruit sa maison et tout son univers. Tony Stark part alors à la recherche de Pepper, disparue, et cherche à se venger. Démuni, il ne peut compter que sur son ingéniosité, ses multiples inventions et son instinct de survie pour protéger ses proches.</p></li>
    <li class="film"><a> <img src="images/thor2logo.png" class="titre"> <span><img src="https://www.booska-p.com/wp-content/uploads/2013/08/thor2-affiche1-visu-ds-news.jpg"></span></a><p>Alors que sur Terre, l'astrophysicienne Jane Foster, grand amour de Thor, trouve par hasard une substance mystérieuse, l'Éther, que beaucoup croyaient perdue depuis longtemps, Thor part délivrer son frère adoptif, Loki, dans sa prison d'Asgard, car il a besoin de son aide. En effet, Malekith, un elfe noir jadis vaincu par Odin et les siens est de retour.</p></li>
    <li class="film"><a> <img src="images/logo-captain-america-soldat-hiver-1.png" class="titre"> <span><img src="https://fr.web.img6.acsta.net/pictures/14/01/31/17/06/486036.jpg"></span></a><p>Steve Rogers, plus connu sous le nom de Captain America, s'est adapté tant bien que mal à son nouvel environnement, et poursuit ses missions en tant qu'agent du S.H.I.E.L.D., l'agence militaire chargée d'assurer l'ordre international. Mais une organisation secrète aux desseins maléfiques a réussi à infiltrer le S.H.I.E.L.D. qu'elle gangrène de l'intérieur.</p></li>
    <li class="film"><a> <img src="images/logo-gardiens-galaxie-1.png" class="titre"> <span><img src="https://www.presse-citron.net/app/uploads/2019/01/gardiens-de-la-galaxie.jpg"></span></a><p>Peter Quill est un aventurier traqué par tous les chasseurs de primes pour avoir volé un mystérieux globe convoité par le puissant Ronan, dont les agissements menacent l'univers tout entier. Lorsqu'il découvre le véritable pouvoir de ce globe et la menace qui pèse sur la galaxie, il conclut une alliance fragile avec quatre extraterrestres disparates.</p></li>
    <li class="film"><a> <img src="images/gotgvol2logo.png" class="titre"> <span><img src="https://www.journaldugeek.com/content/uploads/2017/04/Gotg2.jpg"></span></a><p>Musicalement accompagné de la 'Awesome Mixtape 2', ce deuxième volet propose à nouveau les aventures de l'équipe alors qu'elle traverse les confins du cosmos. Les gardiens doivent combattre pour rester unis alors qu'ils découvrent les mystères de la filiation de Peter Quill. Les vieux ennemis vont devenir de nouveaux alliés et des personnages bien connus des fans de comics vont venir aider nos héros et continuer à étendre l'univers Marvel.</p></li>
    <li class="film"><a> <img src="images/avengers2-logo-fr.png" class="titre"> <span><img src="https://www.cinealliance.fr/wp-content/uploads/2015/02/avengersposter.jpg"></span></a><p>Alors qu'il tente de récupérer le sceptre de Loki avec l'aide de ses camarades Avengers, Tony Stark découvre que Strucker avait mis au point une intelligence artificielle révolutionnaire, plus puissante encore que Jarvis. Strucker, mis hors d'état de nuire, et le sceptre récupéré, Stark conçoit bientôt un projet insensé : relancer son programme de maintien de la paix, jusque-là en sommeil, grâce à cette conscience robotisée ultra-puissante.</p></li>
    <li class="film"><a> <img src="images/ant-man-film-logo.png" class="titre"> <span><img src="https://fr.web.img4.acsta.net/pictures/15/05/29/11/29/528181.jpg"></span></a><p>Doté d'une capacité étonnante, celle de rétrécir considérablement sa taille tout en multipliant sa force, Scott Lang, voleur professionnel, doit accepter le héros qui sommeille en lui afin de venir en aide à son mentor, le docteur Hank Pym, et ainsi protéger les secrets technologiques que renferme son costume. Face à une nouvelle génération d'opposants, Lang et Pym doivent mettre au point, et réussir un audacieux cambriolage qui pourrait sauver le monde.</p></li>
  
  </ul>
  
</body>

</html>


CSS : 
html{
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background: rgb(218, 185, 185);
    background-size: auto;
}
  
html, body{
    margin: 0;
    padding: 0;
    min-height: 100%;
}


h1{
    text-align: center;
    text-decoration: underline;
    font-size: 50px;
    margin-top: 0;
    padding-top: 0.67em;
}

p{
    font-size: 15px;
    font-weight: normal;
}

.films{
    position: relative;
    justify-content: right;
    font-size: 25px;
    font-weight:bold;
    display: flex;
    flex-wrap: wrap;
}

.film{
    list-style:decimal;
    flex: 0 0 45%;
    padding-right: 50px;
    padding-top: 100px;
}

img{
    height: 500px;
}

.titre{
  height: 50px;
}

.film a{
    position:relative;
}

.film a span{
    position:absolute;
    display:none;
    z-index: 2;
    top: 50%;
    left: 50%;
}
.film a:hover span{
    display:block;
}

.btn {
    background-color: #802a2a;
    border: none;
    color: white;
    padding: 12px 16px;
    font-size: 16px;
    cursor: pointer;
    position: absolute;
    top: 45px;
    right: 180px;
  }
  
  .btn:hover {
    background-color: rgb(224, 13, 13);
  }

  .mode_nuit{
    background-color: rgb(68, 20, 20);
    filter: brightness(75%);
  }
  
  .mode_nuit, .h1{
    color: #aeafae
  }  

  .mode_nuit, .menu__box{
    min-height: 100%;
  }

  /* ------------------------------------------------------------- Bouton Jour/Nuit -------------------------------------------------------------*/
  
  .switch {
    position: absolute;
    display: inline-block;
    width: 60px;
    height: 34px;
    top: 50px;  
    right: 100px;
  }
  
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #802a2a;
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }
  
  input:checked + .slider {
    background-color: #000000;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  .slider.round {
    border-radius: 30px;
  }
  
  .slider.round:before {
    border-radius: 100%;
  }
  
  .slider:hover {
    background-color: rgb(224, 13, 13);
  }
  
  
  

  /* ------------------------------------------------------------- Menu -------------------------------------------------------------*/
  
  #menu__toggle {
    opacity: 0;
  }
  #menu__toggle:checked + .menu__btn > span {
    transform: rotate(45deg);
  }
  #menu__toggle:checked + .menu__btn > span::before {
    top: 0;
    transform: rotate(0deg);
  }
  #menu__toggle:checked + .menu__btn > span::after {
    top: 0;
    transform: rotate(90deg);
  }
  #menu__toggle:checked ~ .menu__box {
    left: 0 !important;
  }
  .menu__btn {
    position: fixed;
    top: 40px;
    left: 25px;
    width: 50px;
    height: 100%;
    cursor: pointer;
    z-index: 3;
  }
  .menu__btn > span,
  .menu__btn > span::before,
  .menu__btn > span::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #000000;
    transition-duration: 0.15s;
  }
  .menu__btn > span::before {
    content: '';
    top: -8px;
  }
  .menu__btn > span::after {
    content: '';
    top: 8px;
  }
  .menu__box {
    display: block;
    position: fixed;
    top: 0;
    left: -100%;
    width: 300px;
    margin: 0;
    padding: 80px 0;
    list-style: none;
    background-color: #AAAAAA;
    box-shadow: 2px 2px 6px rgb(0, 0, 0);
    transition-duration: .25s;
    z-index: 2;
  }
  .menu__item {
    display: block;
    padding: 101px;
    text-align: center;
    color: rgb(0, 0, 0);
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    transition-duration: .25s;
  }
  .menu__item:hover {
    background-color: #802a2aa6;
  }


@media screen and (max-width: 600px) {
  .menu__btn{
    top: 80%;
  }
}

A voir également:

1 réponse

Réponse 1 / 1
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
21 avril 2022 à 12:33
Bonjour,

Que veux tu dire par "cela détruit toute ma page web" ? Une capture du résultat obtenu et un schéma du résultat attendu si possible ?

Pour les résolutions supérieure à 600px, l'ajout de la meta viewport et de la media query ne semble pas modifier ta page web.
Pour les résolutions inférieure à 600px, le bouton de menu se place bien à 80% du haut de la page, ton code semble donc bien correspondre à ce que tu souhaites.

Par contre, plusieurs éléments ne sont pas adaptés avec une petite résolution (< 600px) : les bouton home et switch passe au dessus du titre de la page, le positionnement des films en mélangeant pourcentage (flex: 0 0 45%;) et pixel (padding-right: 50px;) ne permet pas d'assurer l'affichage en 2 colonne pour les plus petites résolutions (dans le cas où le 5% restant est plus petit que 50px). Le menu semble également à revoir car il n'est pas possible de scroller pour atteindre les liens en bas du menu si la hauteur de l'écran est trop petite pour l'afficher en entier.

Si tu veux que ton site s'adapte à plusieurs résolutions, on recommande souvent de commencer par intégrer la résolution la plus petite (mobile) puis d'ajouter des media queries afin de surcharger le style pour les résolutions plus grande (tablette, pc, etc.).
0
Ipoote Messages postés 45 Date d'inscription dimanche 23 septembre 2018 Statut Membre Dernière intervention 21 mai 2023
21 avril 2022 à 15:12
Merci pour ta réponse,

Ce que je voudrais en fait est simplement mettre le bouton pour accéder au menu en bas de page afin de faciliter l'accès pour les écrans inférieurs à 600px, mais ce que j'entends par "détruit ma page web" est le fait que les boutons home et jour/nuit se déplacent vers le titre comme tu l'a dit.

Concernant le menu est-il possible de juste le faire prendre tout l'écran lorsqu'on l'ouvre avec un écran inférieur à 600px? J'ai réussi en largeur avec un width:100%; mais un height:100%; n'y change rien, tu saurais d'où cela vient ? (désolé pour le coup je reste débutant et je pense que la solution est plutôt logique^^).

Oui c'est ce que je me suis dit mais maintenant que le site est fait... J'y penserai pour la prochaine fois !
0

Discussions similaires

PXE-E61 : media test failure, check cable
laurent -
Amal -

116 réponses
affichage checking media
titi__5106 -
jfmimi -

5 réponses
c'est quoi haali media splitter
Utilisateur anonyme -
Arkan -

19 réponses