Menu qui ne veut pas se fixer.

Menu qui ne veut pas se fixer. - HTML/CSS - Programmation

Marsh Posté le 12-12-2018 à 11:47:41    

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 :
  1. <!DOCTYPE html>
  2. <html lang="fr" >
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>demo</title>
  7.  
  8.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  10.  
  11.       <link rel="stylesheet" href="css/style.css">
  13.  
  14. </head>
  16. <body>
  18.   <!-- header -->
  19. <h1><b>Juste un petit essai </b><img src="https://i.imgur.com/SKN67qN.png" width="40" height="40"></h1>
  20. <!-- menu container -->
  21. <ul class="container">
  22.     <li class="item item-1"><a href="#demo1">demo1</a></li>
  23.     <li class="item item-2"><a href="#demo2">demo2</a></li>
  24.     <li class="item item-3"><a href="#demo3">demo3</a></li>
  25.     <li class="item item-4"><a href="#demo4">demo4</a></li>
  26.     <li class="item item-5"><a href="#demo5">demo5</a></li>
  27.     <li class="item item-6"><a href="#demo6">demo6</a></li>
  28. </ul>
  29.  
  30.   <!--<div class="overlay"></div> -->
  31.              
  32.                   <div class="card">
  33.                   <section id="Accueil" class="main-section">
  34.                      <header>Juste un petit essai 2</header>
  35.                      <article>
  36.                         <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>
  37.                         <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>
  38.                         <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>
  39.                         <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>
  40.                         <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>
  41.                         <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>
  42.                         <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>
  43.                         <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>
  44.                         <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>
  45.                         <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>
  46.                         <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>
  47.                         <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>
  48.                         <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>
  49.                         <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>
  50.                         <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>
  51.                         <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>
  52.                         <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>
  53.                         <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>
  54.                         <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>
  55.                         <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>
  56.                         <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>
  57.                         <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>
  58.                         <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>
  59.                         <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>
  60.                         <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>
  61.                         <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>
  62.                         <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>
  63.                         <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>
  64.                         <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>
  65.                         <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>
  66.                      </article>
  67.                      </div>
  68.                   </section>
  69.                  
  71.        
  72.       </div>
  73.    </main>
  74.   <script src='https://code.jquery.com/jquery-3.1.1.min.js'></script>
  76.  
  78.     <script  src="js/index.js"></script>
  80. </body>
  82. </html>


 
Code CSS :
 

Code :
  1. /* variables */
  2. /* colours */
  3. /* fonts */
  4. .transition, .container .item a {
  5.   transition: all 0.25s ease-in-out;
  6. }
  8. body {
  9.   height: 100%;
  10.   -webkit-perspective: 900;
  11.           perspective: 900;
  12.   background-color: rgba(220, 231, 235, 0.25);
  13.   font-family: "Ubuntu", sans-serif;
  14.   font-weight: 400;
  15.   text-align: center;
  16. }
  18. h1 {
  19.   color: #22bec6;
  20.   font-family: "Source Sans Pro", sans-serif;
  21.   font-weight: 700;
  22.   font-size: 1.75em;
  23.   text-transform: uppercase;
  24.   line-height: 1;
  25.   display: inline-block;
  26.   padding: 0.5em 0.5em;
  27.   border-bottom: 1px solid rgba(48, 69, 92, 0.2);
  28. }
  30. .container {
  31.   list-style: none;
  32.   padding: 0;
  33.   margin: 0 5%;
  34.   width: auto;
  35.   display: flex;
  36.   flex-flow: row nowrap;
  37.   justify-content: center;
  38. }
  39. .container .item {
  40.   font-family: "Ubuntu", sans-serif;
  41.   border-left: 1px solid #dce7eb;
  42. }
  43. .container .item a {
  44.   text-transform: uppercase;
  45.   font-size: 0.7em;
  46.   background: #fefffa;
  47.   color: rgba(48, 69, 92, 0.8);
  48.   padding: 1em 1em;
  49.   display: block;
  50.   text-decoration: none;
  51. }
  52. .container .item a:hover {
  53.   background: #22bec6;
  54.   color: #fefffa;
  55. }
  56. .container .item-1 {
  57.   border: none;
  58. }
  60. @media (max-width: 600px) {
  61.   .container {
  62.     flex-flow: column nowrap;
  63.   }
  64.   .container .item {
  65.     border-left: none;
  66.     border-bottom: 1px solid #dce7eb;
  67.   }
  68.   .container .item a {
  69.     padding: 1.5em 1em;
  70.   }
  71. }
  73. .card {
  74.       background: #fff;
  75.       width: 80%;
  76.       box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);
  77.       border-radius: 4px;
  78.       margin-top: 5%;
  79.       margin-bottom: 5%;
  80.       margin-right: 5%;
  81.       margin-left: 5%;
  82.     }


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. »
Reply

Marsh Posté le 12-12-2018 à 11:47:41   

Reply

Marsh Posté le 12-12-2018 à 14:18:36    

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
Reply

Marsh Posté le 12-12-2018 à 14:23:00    

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.
 
https://i.imgur.com/jRrvB3Z.png


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. »
Reply

Marsh Posté le 12-12-2018 à 15:43:00    

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

Code :
  1. -webkit-perspective: 900;
  2.           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
Reply

Marsh Posté le 12-12-2018 à 15:44:38    

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. »
Reply

Marsh Posté le 13-12-2018 à 09:50:02    

Un truc du genre quoi :

Code :
  1. header.top {
  2.   position:absolute;
  3.   top:0;
  4.   left:0;
  5.   right:0;
  6. }
  7. div.main {
  8.   position:relative;
  9.   box-sizing:border-box;
  10.   height:100vh;
  11.   padding-top:160px;
  12. }
  13. div.card {
  14.   height:100%;
  15.   overflow:scroll;
  16.   margin:0 auto;
  17. }


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


---------------
D3
Reply

Marsh Posté le 13-12-2018 à 10:36:17    

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. »
Reply

Marsh Posté le 13-12-2018 à 10:59:03    

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
Reply

Marsh Posté le 13-12-2018 à 12:13:11    

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 :
 
https://i.imgur.com/6HOkyqO.png


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. »
Reply

Marsh Posté le 13-12-2018 à 14:31:35    

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
Reply

Marsh Posté le 13-12-2018 à 14:31:35   

Reply

Marsh Posté le 13-12-2018 à 14:39:23    

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.
 
https://i.imgur.com/W22CqA5.png


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. »
Reply

Marsh Posté le 13-12-2018 à 15:21:20    

Reply

Marsh Posté le 13-12-2018 à 15:41:29    

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. »
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed