Bonjour, j'ai un problème avec le respensive sur l'une des pages que je fait. j'ai un header avec différent element dessus et je veux que sur mobile certain element disparaisse pour ca j'ai dans une mediaQuerie defini une class "cacheMobile" qui met display none les element de cette class quand l'ecran est trop petit cependant quand je rajoute la class à un element (la div d'id "lienInterne") et que je reduit la page il disparait pas, je pense que c'est parce que plus haut dans le css je la display : flex mais je sais pas comment regler le problème, avait vous une solution?
(j'ai déja testé la class cacheMobile et elle fait bien disparaitre les element mais c'est des element qui n'avais aucun autre css sur eux) voici mon code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Accueil</title>
<meta name="description" content="Page d'acceuil aprés la connexion des utilisateur pour accéder au reste du site">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="style/styleConst.css">
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<header>
<!-- partis haute du header-->
<div id="headerHaut">
<div id="imageslangue">
<img src="img/fr.png" alt="drapeau de la france" width="18">
<img src="img/gb.png" alt="drapeau de l'angleterre" width="18">
</div>
<p>ÉCOLE NATIONALE SUPÉRIEURE DES SCIENCES APPLIQUÉES ET DE TECHNOLOGIE </p>
<div id="reseauxSociaux">
<a href="https://www.youtube.com/channel/UCHu4nXDst8MkC_NPX5i87Ug" target="_blank">
<img src="img/youtube.svg" alt="logo de youtube" width="30">
</a>
</div>
<div class="cacheMobile" id="lienInterne">
<a href="#">ENT</a>
<a href="#">SITE ENSSAT</a>
</div>
</div>
<div id="headerMillieu">
<!-- le logo de l'enssat-->
<div id="logos">
<img id="logo-enssat" src="img/logo_enssat.png" alt="logo de l'enssat">
<img id="logo-rennes" src="img/logo_rennes.png" alt="logo de l'université de rennes 1">
</div>
<div id="texteHeader">
<h1 class="display-6">Bonjours michel</h1>
<p class="lead">si vous n'etes pas michel veiller vous déconnecter et prevenir le ...</p>
</div>
<img class="cacheMobile" src="img/compte-utilisateur-1.png" alt="logo de l'utilisateur connecté" width="75" height="75">
</div>
</header>
/* importation de styleConst.css */
@import url('style/styleConst.css');
/* Fichier CSS pour la mise en forme des pages */
/* body */
body{
background-color: chartreuse;
}
/** css du header */
header {
display: flex;
flex-direction: column;
}
/** la partie haute du header */
#headerHaut {
display: flex;
width: 100%;
justify-content: space-between;
background-color: var(--principal);
padding-top: 3px;
padding-left: 10px;
padding-right: 10px;
color: white;
}
#headerHaut > p {
font-size: calc(0.475rem + 0.8vw);
text-align: center;
}
#lienInterne {
display: flex;
flex-direction: row;
justify-content: space-between;
}
#lienInterne > a {
color: white;
font-weight: bold;
margin-left: 5px;
margin-right: 5px;
}
#lienInterne > a:hover {
color: var(--autre);
text-decoration: none;
}
/** la partie du milieu du header */
#headerMillieu {
display: flex;
width: 100%;
justify-content: space-around;
background-color: brown;
padding-left: 5px;
padding-right: 5px;
}
* > #headerMillieu {
display: flex;
align-items: center;
}
#logos {
display: flex;
justify-content: center;
margin: 5px;
}
#logo-enssat {
height: 50px;
}
#logo-rennes {
height: 50px;
}
#texteHeader {
display: flex;
flex-direction: column;
}
#texteHeader > p{
font-size: calc(0.375rem + 0.8vw);
}
@media screen and (max-width: 768px) {
.cacheMobile {
display: none;
}
#headerMillieu {
display: flex;
flex-direction: column;
}
}
@media screen and (max-width : 576px) {
}
et un screen de mon header :
merci d'avance pour vos réponse
- Edité par estebandebroise 24 avril 2024 à 14:34:04
c'est dû à la spécificité en CSS : un id sera toujours plus fort qu'une classe (ou même un nombre arbitraire de classes, ya des gens qui ont tenté). Solution rapide : au lieu de cibler #lienInterne à la ligne 31, tu cibles [id="lienInterne"]. En effet les attributs ont la même spécificité que les classes, et donc la ligne 87 pourra s'appliquer. Solution plus pérenne mais plus longue : ne jamais utiliser les id dans le CSS, doubler ou remplacer par des classes dans le HTML.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
ok merci, ca fonctionne, je suis qu'au début de mon projet donc je vais pouvoir tout changer en class (sauf bien sur si les id sont nécésaire) merci beaucoup et merci pour la réponse trés rapide
- Edité par estebandebroise 24 avril 2024 à 16:08:16
Les id sont utiles pour deux choses à mon sens : pour JS (parce que la fonction getByid est rapide, mais en vrai ça fait une éternité que je ne l'ai plus utilisée, au profit de querySelector) ; et pour les ancres, typiquement pour les liens d'évitement (d'ailleurs, si tu n'en as pas déjà, je te conseille grandement d'en mettre, cela permet une meilleure utilisabilité des sites par les personnes utilisant le clavier pour se déplacer, ou bien un lecteur d'écran).
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)