Fixed et le flux

**Myrrdin** · 10/10/2016, 12h36

Bonjour à tous !

Je rencontre un petit problème de gestion du flux avec la position fixed.
J'ai le titre, le menu (horizontal) et le pied de page en fixed. Et je n'arrive pas à positionner la balise section (qui contient les informations principales) au bon endroit. Je crois savoir qu'il vaut mieux garder la section dans le flux, mais elle se positionne tout en haut de la page et se superpose au titre et au menu. Et comme ces derniers n'ont pas une hauteur fixes, je ne sais pas comment faire pour que ma balise section se place automatiquement sous le menu.

Je ne sais pas si j'ai bien expliqué mon problème, mais je reste à votre entière disposition pour plus de renseignements.

Je vous mets un schéma, au cas où ce soit plus clair...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
<!-- En-Tête du Site -->
	<header>
	</header>
 
<!-- Menu -->
	<nav>
	</nav>
 
<!-- Corps du Site -->
	<section>
	</section>
 
<!-- Pied de Page du Site -->
	<footer>
	</footer>
</body>

Et le CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
* {
	margin: 0%;
	padding: 0%;
}
body {
	font-size: 1em;
}
 
header {
	width: 100%;
	height: 15%;
	position: fixed;
	top: 0%;
	cursor: default;
}
 
footer {
	width: 100%;
	height: 5%;
	position: fixed;
	cursor: default;
	bottom: 0%;
	font-size: 0.7em;
}
 
nav {
	width: 100%;
	position: fixed;
	top: 15%;
	text-align: center;
}

Merci à vous !

Invité · 10/10/2016, 17h43

Bonjour,

tu n'es pas le premier, ni le dernier, à vouloir mettre header footer et menu en position:fixed.

La question 1 est : "pourquoi ??"
La question 2 est : "et sur smartphone ??"

**Myrrdin** · 10/10/2016, 22h51

Parce que j'aimerai que le nom du site (header) et que le menu (nav) restent affichés et accessible même en cas de scroll...
J'ai tort de faire comme ça ?

Et pour ce qui est des smartphones et des tablettes, la mise en page ne sera pas du tout la même et aura une apparence dédiée.

**Cyberdome** · 13/11/2016, 13h53

Vous pouvez mettre un padding-top à section qui compense la hauteur du header et du nav pour que le contenu apparaisse au dessous.

**ABCIWEB** · 13/11/2016, 14h46

Envoyé par Myrrdin

Parce que j'aimerai que le nom du site (header) et que le menu (nav) restent affichés et accessible même en cas de scroll...
J'ai tort de faire comme ça ?

L'utilité d'avoir des header et footer fixes dépend de la hauteur de ces éléments et du contenu des pages. Par exemple avec des pages longues et des blocs fixed importants c'est autant d'espace qui est perdu pour l'affichage du contenu obligeant le visiteur à scroller sans cesse et le bilan peut être largement négatif concernant l'expérience utilisateur. Pour ces raisons, y compris pour l'affichage desktop, les menus fixed sont aujourd'hui majoritairement composés d'une seule ligne de faible hauteur qui se déploie pour afficher le menu complet quand on clique sur le bouton comme sur les portables.
Cela dit on a vite fait de se positionner en haut ou en bas de page si on navigue sur desktop, d'autant plus que le clavier possède des touches dédiées. Suivant les cas on pourra préférer avoir un visuel débarrassé de ces zones mortes peu utiles et donc pas de menu fixed.

Fixed et le flux

CSS

Discussions similaires

Partager

Partager