28112 sujets

CSS et mise en forme, CSS3

[Résolu] Sticky Nav header fixed plus large que le herder.default

Bonjour,

J'aimerais comprendre pourquoi ma sticky nav est plus large lorsque elle en position:fixed !

Voici mes fichiers :

Le html:


<!DOCTYPE>
<html>
<head>
  <title>Test sur une sticky nav</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <link rel="stylesheet" href="./style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <!-- headerfixed -->
  <script type="text/javascript" src="./header_fixed.js"></script>
</head>
<body>
  <div class="content">
    <div class="header">
      <div class="top_header">
        <div class="content1">
          <h1>Super Logo du site</h1>
        </div>
        <div class="content2">
          <ul>
              <li><a href="#">Accueil</a></li>
              <li><a href="#">Tutoriel</a></li>
              <li><a href="#">CSS</a></li>
              <li><a href="#">Javascript</a></li>
              <li><a href="#">Sticky Nav</a></li>
          </ul>
        </div>
      </div>
        <h1>Description</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare pretium orci eu porttitor. Suspendisse ullamcorper molestie nisl at tincidunt. Maecenas tempus orci et nunc vulputate, in sodales lectus pulvinar. Duis porta elit vitae scelerisque hendrerit. Etiam vitae lorem sed risus gravida ullamcorper. Donec vitae ultricies velit.</p>
    </div>
    <div class="main">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare pretium orci eu porttitor. Suspendisse ullamcorper molestie nisl at tincidunt. Maecenas tempus orci et nunc vulputate, in sodales lectus pulvinar. Duis porta elit vitae scelerisque hendrerit. Etiam vitae lorem sed risus gravida ullamcorper. Donec vitae ultricies velit. Curabitur fermentum lacus libero, in volutpat nisl maximus at. Etiam accumsan tortor nec arcu lacinia congue. Fusce ut dapibus mi. Nunc at vulputate elit, sit amet venenatis lorem. Ut magna libero, fringilla vel nisl et, interdum porta tortor. Aenean blandit fringilla sem, sit amet egestaLorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare pretium orci eu porttitor. Suspendisse ullamcorper molestie nisl at tincidunt. Maecenas tempus orci et nunc vulputate, in sodales lectus pulvinar. Duis porta elit vitae scelerisque hendrerit. Etiam vitae lorem sed risus gravida ullamcorper. Donec vitae ultricies velit. Curabitur fermentum lacus libero, in volutpat nisl maximus at. Etiam accumsan tortor nec arcu lacinia congue. Fusce ut dapibus mi. Nunc at vulputate elit, sit amet venenatis lorem. 
    </div>
  </div>
</body> 

</html>


Le Css :


body 
{
	background-color: 		#0099ff;;
	margin-top: 			10px;
	margin-right: 			30px;
	margin-left: 			30px;
}

.content {
	background-color: 		#f2f2f2;
}

.content1 {
	float: 					left;
	width: 					33%;
}
.content2 {
	float: 					left;
	width: 					60%;
}
.content2 ul li {
	display:				inline;
}

.content2 li {
	list-style-type: 		none;
}

.top_header {
	height: 				80px;
	width: 					100%;
	background-color: red;
}
.top_header.fixed {
	position: 				fixed;
	z-index: 				1000;
	top: 0;
}


Le js:


$(window).scroll(function (event) {
    // A chaque fois que l'utilisateur va scroller (descendre la page)
    var y = $(this).scrollTop(); // On récupérer la valeur du scroll vertical

    if (y > 0) {
      $('.top_header').addClass('fixed');
    } else {
      // sinon, on l'enlève
      $('.top_header').removeClass('fixed');
    }
  });


Et voici deux screenshots pour expliquer mon problème :
http://imgur.com/a/PdbQK

Comme vous pouvez le voir le header.fixed déborde (en rouge sur la partie bleu). Je souhaiterais que le header.fixed ne déborde pas sur le body, mais je ne trouve pas comment faire.

Merci de votre aide !
Bonne journée.
Modérateur
Bonjour,

Ce fait est en somme toute normal. Votre header est un élément de type bloc donc qui occupe la largeur disponible dans son conteneur et s'adapte en hauteur à son contenu.

Le fait de fixer sa position revient à le positionner aux coordonnées (0, 0). Ce qui en css se traduit implicitement par
.top_header.fixed {
 top: 0;
 left: 0;
 right: 0;
}


Pour endiguer ce fait il faut placer .top_header.fixed en lui appliquant comme coordonnées les mêmes que celles du body (soit 0 + la marge de 30px).

Ce qui vous donne
.header.fixed {
 left: 30px;
 right: 30px;
}
Meilleure solution
Modérateur
Une question me taraude, pourquoi ne pas positionner .top_header en fixed dès le départ ? Ceci éviterait bien des désagréments, non ? (comme le fait qu'en position initiale il ait une marge au dessus de lui puis qu'elle disparaisse par la suite)
Merci encore une fois pour ta réponse Greg Lumière !

Mon CSS:


.top_header {
	height: 				80px;
	width: 				100%;
	background-color: 		red;
	position: 				fixed;
}
.top_header.fixed {
	position: 				fixed;
	z-index: 				1000;
	top: 					0;
	right: 				30px;
	left: 					30px;
}


Voici ce que celle me donne après les modifs:
http://imgur.com/a/0hZvH

Cela ne fonctionne pas comme je le souhaiterais Smiley bawling

Il semblerait que le right:30px ne soit pas pris en compte.
Hello,

pour moi lorsque ton top header reçois la classe .fixed, il combine le with : 100% en plus du left : 30px. Ce qui donne à ton élément une dimension de 30px plus grande que 100% de son conteneur.

Essaye en ajoutant un width : auto à ta classe .fixed
Modérateur
Damingo a écrit :
Merci encore une fois pour ta réponse Greg Lumière !

Mon CSS:


.top_header {
	height: 				80px;
	width: 				100%;
	background-color: 		red;
	position: 				fixed;
}
.top_header.fixed {
	position: 				fixed;
	z-index: 				1000;
	top: 					0;
	right: 				30px;
	left: 					30px;
}


Voici ce que celle me donne après les modifs:
http://imgur.com/a/0hZvH

Cela ne fonctionne pas comme je le souhaiterais Smiley bawling

Il semblerait que le right:30px ne soit pas pris en compte.
A ce compte, autant faire 
.top_header {
	height: 		80px;
	background-color: 		red;
	position: 		fixed;
	top: 			0;
	right: 		30px;
	left: 			30px;
}
.top_header.fixed {
	z-index: 		1000;
}


voir même passer la propriété dans .top_header et s'affranchir de la classe .fixed, celle-ci pouvant servir pour compacter l'en-tête par exemple.

par exemple
Modifié par Greg_Lumiere (14 Mar 2017 - 17:52)
Merci beaucoup Messieurs ça fonctionne !

Greg_Lumiere, tu peux me donner un exemple pour compacter l'en tête ? Je vois pas trop ce que tu veux dire par là. Je suis curieux.

Sujet Résolu.
Modérateur
Bonjour Damingo,

A titre d'exemple, lorsque la page est chargée et sans aucune action de l'utilisateur, on peut imaginer une en-tête comme étant un "gros pavé" qui présente un menu de navigation détaillé, un gros logo, un méga titre et que sais-je encore ?

Grace à votre fonction JS, au scroll de l'utilisateur, votre menu pourrait très bien se "compacter" c'est-à-dire afficher un logo plus petit exempt de titre et un menu de navigation qui ne représente que les liens principaux.

Ainsi on peut imaginer qu'au chargement l'en-tête mesurerait 200px puis qu'au scroll sa hauteur passe à 60px.

Pour ce faire, vous maintenez la fonction JS qui appose la classe "fixed" au conteneur global (.top_header) puis vous ciblez en Css tous les enfants de cette classe pour modifier les propriétés.

Imaginons par exemple cette structure
<header class="top_header">
 <img class="my_logo">
 <h1 class="title">Mon super titre de site</h1>
 <nav class="my_menu">
  <ul>
  <li><a>catégorie 1</a>
   <ul>
   </ul>
  </li>
 </nav>
</header>

.top_header {
 /* les propriétés relatives à mon en-tête */
}
.title {
 /* propriétés relatives au titre */
}
etc

.top_header.fixed h1 {
 display: none;
}
.top_header.fixed .my_logo {
 /* affichage en petit en haut à gauche du conteneur */
}
.top_header.fixed .my_menu ul {
 display: none;/* masquer les sous-menus */
}
etc


Voyez-vous le principe ?
Sujet clos
Aller à