Bonjour j'aimerais que quelqu'un m'aide à régler un problème qui survient lorsque je met un élément en positon fixed.
En réalité il s'agit du header que j'ai mis en fixed et dans lequel il y a aussi ma nav.
Et après avoir mis ma positon fixed. Mon header ne fonctionne plus du tout tout les liens et les animations quand je passe ma souris sur un élément ne fonctionnent plus. J'ai regardé en appuyant sur F12 s'il n'y avait pas d'erreur... et il n'y en a pas.
S'il vous plaît aidez moi.
- Edité par AxelRhelimi1 1 juillet 2020 à 11:09:39
Merci de colorer votre code à l'aide du bouton Code
Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.
Manque de précisions
Vous êtes ici sur un forum d'entraide communautaire et non pas sur un forum de demande de service, le but n'est donc pas de fournir une réponse toute faite ou de directement fournir la solution à quiconque viendrait sans la moindre trace. Afin d'obtenir de l'aide et une solution à votre problème, il est fortement recommandé de présenter clairement l'état actuel du problème en nous fournissant :
Un descriptif clair et précis du problème
La tentative actuelle de résolution que vous avez effectué : il nous faut plus de code que ça, du HTML et du CSS, et dans l'idéal une page en ligne
Le résultat attendu et le résultat actuel
Toutes pistes de recherches pouvant aider à la résolution
Mauvais titre
Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.
Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).
De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.
Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.
Pour modifier votre titre, éditez le premier message de votre sujet.
(titre originel : position fixed)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Mon message plus haut n'était pas pour faire joli, merci de changer le titre et de colorer le code - ou plutôt de fournir plus de code, pour connaître un peu mieux l'existant.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Mon message plus haut n'était pas pour faire joli, merci de changer le titre et de colorer le code - ou plutôt de fournir plus de code, pour connaître un peu mieux l'existant.
Bonsoir, utiliser l'outil d'insertion du code du forum en choisissant le bon langage dans la liste qui vous est proposée ce qui active la coloration syntaxique adaptée. En image cela donne
Et changer le titre comme cela vous est demandé par ma collègue (sans quoi je serrais dans l'obligation de fermer ce sujet.)
C'est une erreur de débutant que de croire que la propriété position sert à positionner les éléments dans une page web. Ce n'est pas comme cela qu'il faut procéder. Je vous recommande la lecture du cours HTML/CSS de ce site.
Merci pour vos conseilles je les ai appliqués normalement je n'ai plus de fautes.
J'ai essayé de rafraîchir et cela donne le même résultat mais en pire car tout est décalé et même que certains éléments dépassent de la page x) Je pense que nous pouvons passer au CSS maintenant.
Je vous envoie tout mon CSS et tout mon html comme ça on est sûr qu'il ne manque rien x))
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="CSS_accueil.css"/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" ></script>
<title>TeeNuage</title>
</head>
<body>
<header class = "header">
<nav>
<div class = "menu_nav" id="navigation">
<div class ="onglet">
<div class =" Matiere ">Matiere </div>
<hr class ="barre1"/>
<div class =" colonne1">
<ul>
<li> <div class ="francais"><a href = "PageFrancais"> français</a></div></li>
<li> <div class = "math"> <a href = "PageMath"> Math </a> </div></li>
</ul>
</div>
<ul>
<li class = "Accueil"> <div>Accueil</div></li>
<li class =" forum"> <div>Forum</div></li>
</ul>
</div>
</div>
</nav>
<ul>
<li class = "TeeNuage"> <div> TeeNuage </div></li>
<li class = 'login'><div> <a href = "login.html"> Se connecter </a></div></li>
</ul>
</header>
<div class="presentation">
<div class ="resume">
<div class = "bienvenue">Bienvenue </div>
<div class = "experimentez"> Experimentez </div>
<div class = "revisez"> Révisez </div>
</div>
<div class ="gif1"> <img class = "BamEtRachel " src = "image/GIF.gif" alt ='Bam et Rachel'></div>
<div class ="gif2"> <img class = "erlenmeyer " src = "image/erlenmeyer.gif" alt ='erlenmeyer'></div>
</div>
<footer>
<p class = "footer" > les créateurs sont <em> Bunn </em>, <em> Axel </em> et <em> Charlélie </em> . </p>
</footer>
<script>
scroll = function (){
$(document).ready(function (){
$(window).scroll(function(){
if($(this).scrollTop() > 100){
$('.experimentez').css('opacity','0.75');
$('.bienvenue').css('opacity','0.75');
$('.BamEtRachel').css('opacity','0.5');
if($(this).scrollTop() >200){
$('.experimentez').css('opacity','1');
$('.bienvenue').css('opacity','0.50');
$('.BamEtRachel').css('opacity','0');
$('.BamEtRachel').css('display','none');
$('.erlenmeyer').css('display','block');
}
else {
$('.experimentez').css('opacity','0.75');
$('.bienvenue').css('opacity','0.75');
$('.BamEtRachel').css('opacity','0.5');
$('.BamEtRachel').css('display','block');
$('.erlenmeyer').css('display','none');
}
}else{
$('.experimentez').css('opacity','0.50');
$('.bienvenue').css('opacity','1');
$('.BamEtRachel').css('opacity','1');
$('.erlenmeyer').css('display','none');
}
});
});
}
fadeout_callback= function ()
{
$('.colonne1').css('display', 'none');
$('.colonne1').css('position', 'absolute');
$(".barre1").css('display', 'none');
}
fadein_callback= function ()
{
$('.colonne1').css('display', 'block');
$(".barre1").animate({width : '200px'});
}
theonglet_fadeout=function()
{
$(".barre1").animate({width : '0px'});
$('.colonne1').fadeOut(250, fadeout_callback);
}
fadin_enter=function()
{
$(".barre1").css('display','block');
$('.colonne1').fadeIn(250, fadein_callback);
}
laposte=function ()
{
$('.Matiere').mouseenter(fadin_enter);
}
chronopost = function ()
{
$('.onglet').mouseleave(theonglet_fadeout);
}
scroll();
laposte();
chronopost();
</script>
</body>
</html>
Troisième fois qu'on demande à ce que le titre soit changé. Si vous n'y arrivez pas, ce qui se peut tout à fait car le forum est un peu bugué, il faut le dire. Pas juste croire qu'on ne le remarquera pas (surtout qu'on est deux personnes de l'équipe de modération sur le sujet maintenant).
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Bonjour,beaucoup à dire. Et difficile de comprendre ce que tu as voulu faire.
Pour ton code HTML, je ne vois pas la raison d’indiquer une balise <div> à l’intérieur des <li>.
Pour ton code CSS :
Ceci c’est NON
*
{
padding : 0;
margin : 0;
}
Inutile de supprimer toutes les marges surtout pour les éléments qui n’en ont pas. Reset au cas par cas ou utilise une feuille de style par défaut tel que normalize.
Pour le sélecteur body : pourquoi fixé une largeur si importante, pourquoi définir une largeur tout cours ? Pour les plus petits écrans il y a une barre de sroll horizontal. Pas de hauteur fixe, utilise de préférence min-height. Mais la hauteur de la page sera définie par ton contenu, donc inutile de le préciser.
Toujours pour le sélecteur body les propriétés background-position et background-size sont pour des images de fond pas pour la couleur, ici également inutile ces propriétés. Et pour terminer sur ce sélecteur pour la propriété font-family on termine la déclaration par une famille de police tel que serif ou sans-serif par exemple.
Quand tu écris ta CSS, rassemble les propriétés dans la même règle plutôt que d’en écrire plusieurs exemple pour la class .colonne1
Pour le sélecteur .colonne1 ul la propriété justify-content est une propriété du module flexbox, or cet élément n’est pas en flexbox donc cette propriété n’a aucun effet.
Supprime toutes les positions absolute, tu n’en as pas besoin ici. Laisse les éléments le plus possible dans le flux courant
Pour la position fixed de la class .presentation elle fixe ton contenu alors que celui-ci dépasse la ligne de flottaison donc on ne peut voir tout son contenu, ni celui qui est plus bas puisque cet élément est fixe dans la page. Supprime tout tes éléments fixes, laisse la possibilité à l’utilisateur de scroller pour voir le contenu plus bas dans la page.
En conclusion, je dirais de repartir d’une CSS vide et de voir ce qu’il faut comme propriété utile. Car là j’ai l’impression que tu as testé beaucoup de propriété différente et c’est le foutoir.
Mais dans mon javascript j'ai une fonction qui regarde le nombre de scroll, et en fonction du scroll il va afficher ou ne plus afficher mes GIF. Si j'enlève la grande hauteur que j'ai mis sur mon body, ça ne marchera plus?
Je vais recommencer de zero ma CSS comme tu me l'as conseillé.
c'est vrai c'est le foutoir j'ai regardé beaucoup de vidéos et testé pleins choses x)) mais oublié de les enlever
Bonjour j'aimerais conclure ce sujet car j'ai trouvé le problème.
En fin de compte j'avais mon menu nav en position fixed et en dessous une très grosse div qui était aussi en position fixed.
J'ai pas trop compris mais quand j'ai changé de place ma grosse DIV tout refonctionnait correctement.
C'est parce que ma Grosse DIV était à cheval sur mon menu nav. ( et ça ne se voyait pas vu que ma GROSSE DIV était transparente).
Conclusion il faut faire attention avec l'espace que prend un élément.
Merci à tout ceux qui m'ont aidé à résoudre mon problème.
bug du header (changement en position fixed)
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
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 :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)