Menu qui ne veut pas se fixer.

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Menu qui ne veut pas se fixer.

snowden

Bonjour,

Je cherche à créer une page web perso mais je rencontre un petit soucis avec mon menu et mon entête.
Malgré les tutos trouvés ici et là, je n'arrive pas à fixer mon entête et mon menu et que la partie du dessous ne passe pas au delà. Le "position: fixed;" ne fonctionne pas et je ne comprend pas pourquoi.
Je l'ai enlevé après avoir testé puis échoué.

Merci par avance si vous arrivez à me venir en aide

Code HTML :

Code :

<!DOCTYPE html>
<html lang="fr" >
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1><b>Juste un petit essai </b><img src="https://i.imgur.com/SKN67qN.png" width="40" height="40"></h1>
<ul class="container">
<li class="item item-1"><a href="#demo1">demo1</a></li>
<li class="item item-2"><a href="#demo2">demo2</a></li>
<li class="item item-3"><a href="#demo3">demo3</a></li>
<li class="item item-4"><a href="#demo4">demo4</a></li>
<li class="item item-5"><a href="#demo5">demo5</a></li>
<li class="item item-6"><a href="#demo6">demo6</a></li>
</ul>
<div class="card">
<section id="Accueil" class="main-section">
<header>Juste un petit essai 2</header>
<article>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
<p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
</article>
</div>
</section>
</div>
</main>
<script src='https://code.jquery.com/jquery-3.1.1.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>

Code CSS :

Code :

/* variables */
/* colours */
/* fonts */
.transition, .container .item a {
transition: all 0.25s ease-in-out;
}
body {
height: 100%;
-webkit-perspective: 900;
perspective: 900;
background-color: rgba(220, 231, 235, 0.25);
font-family: "Ubuntu", sans-serif;
font-weight: 400;
text-align: center;
}
h1 {
color: #22bec6;
font-family: "Source Sans Pro", sans-serif;
font-weight: 700;
font-size: 1.75em;
text-transform: uppercase;
line-height: 1;
display: inline-block;
padding: 0.5em 0.5em;
border-bottom: 1px solid rgba(48, 69, 92, 0.2);
}
.container {
list-style: none;
padding: 0;
margin: 0 5%;
width: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
}
.container .item {
font-family: "Ubuntu", sans-serif;
border-left: 1px solid #dce7eb;
}
.container .item a {
text-transform: uppercase;
font-size: 0.7em;
background: #fefffa;
color: rgba(48, 69, 92, 0.8);
padding: 1em 1em;
display: block;
text-decoration: none;
}
.container .item a:hover {
background: #22bec6;
color: #fefffa;
}
.container .item-1 {
border: none;
}
@media (max-width: 600px) {
.container {
flex-flow: column nowrap;
}
.container .item {
border-left: none;
border-bottom: 1px solid #dce7eb;
}
.container .item a {
padding: 1.5em 1em;
}
}
.card {
background: #fff;
width: 80%;
box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);
border-radius: 4px;
margin-top: 5%;
margin-bottom: 5%;
margin-right: 5%;
margin-left: 5%;
}

Message édité par snowden le 12-12-2018 à 11:48:07

---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »

Publicité

mechkurt

Je crois que tu ne comprend pas vraiment comment fonctionne le position:fixed
J’ai fait un codepen de ton code avec un position fixed sur le header.top_fixed, à partir de là, qu'est ce qui te déranges :
https://codepen.io/anon/pen/wRKBRN

Je supposes que "que la partie du dessous ne passe pas au delà" signifie que tu ne voudrais pas voir le contenu scroller sous ton menu, pour ça tu n'as qu'a mettre une couleur de fond à ton header ou organiser tes divs autrement...

...dans tous les cas position absolute et fixed sortent les blocs html du flux, à partir de là il rentreront forcement en conflit d'une manière ou d'une autre avec les blocs statiques (à moins de réserver de la place avec des padding / margin) [:airforceone] .

---------------
D3

snowden

Bonjour mechkurt et merci d'essayer de me venir en aide.

Oui en effet, c'est ce que je voudrais en résultat. Qu'il y est par exemple en permanence deux ou trois cm de réservé en haut pour laisser afficher le header et le menu et sans que le contenu dessous ne viennent par dessus ou par dessous.

Je viens de tester ton codepen et c'est ce que j'avais déjà tenté.

Sur Firefox : fonctionne sauf la partie du contenu qui va dans le menu au moment du scroll

Sur Chrome : fonctionne pas du tout et donne ça dès le départ.

Message édité par snowden le 12-12-2018 à 14:23:08

---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »

mechkurt

Le bug sur chrome c'est à cause de ces règles :

Code :

-webkit-perspective: 900;
perspective: 900;

sur le body, si tu les vires, ça donnes la même chose sur chrome et firefox...

Et sinon, ben comme je te le dit c'est le fonctionnement normal de fixed que le contenu passes dessous, si tu veux des especes de frame, tu peut mettre un wrapper sur ton contenu avec une height définis et un oveflow scroll, mais à mon avis tu as meilleur temps de mettre un fond (pourquoi pas semi transparent) et à conserver un ascenseur global !

---------------
D3

snowden

Merci pour le cours de chinois :lol:

Je vais voir tout ce que tu me dis voir si j'arrive à le mettre en place.

Merci en tout cas pour ton aide.

---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »

mechkurt

Un truc du genre quoi :

Code :

header.top {
position:absolute;
top:0;
left:0;
right:0;
}
div.main {
position:relative;
box-sizing:border-box;
height:100vh;
padding-top:160px;
}
div.card {
height:100%;
overflow:scroll;
margin:0 auto;
}

https://codepen.io/anon/pen/wRKBRN

---------------
D3

snowden

Merci pour ton attention mais j'y vois un soucis. C'est qu'il y a la barre de scroll. Je voudrais plutôt que la fenêtre scroll normalement et que .card scroll mais à partir de là ou il est placé.

Je sais pas si je suis clair dans mon propos, je n'arrive pas à préciser correctement.

---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »

mechkurt

Je ne comprends pas ce que tu veux faire...

Ben mon premier codepen avec un couleur de fond identique au body sur ton header ?

---------------
D3

snowden

Sur le premier codepen, il y avait un soucis :

fonctionne sauf la partie du contenu qui va dans le menu au moment du scroll

Si je reprends ton dernier codepen, c'est exactement ça pour le "juste un petit essai avec l'image" et le "menu". Sauf qu'en dessous, il faudrait que le cadre ".card" n'est pas de scroll et que ça prenne la taille que ça doit prendre.

Je me doute bien que ça va ensuite scroller sous le menu mais normalement, ça ne se verra pas. Je me trompe ?

EDIT : voici un petit exemple de ce que je cherche à avoir :

Message édité par snowden le 13-12-2018 à 12:29:14

---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »

mechkurt

Je ne comprends toujours pas, fais moi un autre visuel avec le contenu scrollé, si y'a pas d'ascenseur ils va ou ton contenu ?

Si quelqu'un d'autre à une idée...

---------------
D3

Publicité

snowden

Est-ce que c'est plus compréhensible là stp ?

Il y a un ascenseur mais invisible. Il faut un écart entre le menu et .card et en scrollant, il s'enlève dans cet écart.

Message édité par snowden le 13-12-2018 à 14:40:29

---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »

mechkurt

https://codepen.io/anon/pen/WLrvyb

---------------
D3

snowden

Merci beaucoup mechkurt pour m'avoir sorti du pétrin, c'est super sympa :hello:

---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »

FORUM HardWare.fr

Programmation

HTML/CSS

Menu qui ne veut pas se fixer.

Sujets relatifs
Qui veut m'aider à créer un ensemble d'applications similaire à java?	Fixer une div déjà fixée à un moment du scrolling.
CSS Menu navigation responsive et fixe	Menu CSS invisible sur mobile
Creer une barre de menu	Problème Menu Jquery SuperFish
VB : fixer une fenêtre en coin inférieur droit	Placer sous-menu en dessous des liens :'(
je n'arrive pas a créer un menu déroulant avec mes div	enregistrer page web complète avec menu déroulant
Plus de sujets relatifs à : Menu qui ne veut pas se fixer.

Page générée en 0.107 secondes