Ajout d’une bannière en haut de page : bloc invisible (CSS ?)

Général
1

Bonsoir,

Je me permets de venir vers vous car je pense rencontrer un problème de CSS.
J’aimerais ajouter un bloc faisant 285 px de hauteur et 100 % de largeur, à l’image du bloc de navigation, et le placer en haut de la page, en début de contenu, afin de créer une bannière.

Cependant, malgré plusieurs essais, je n’arrive pas à faire apparaître ce bloc, même en y ajoutant du texte ou d’autres éléments.

Auriez-vous une idée de ce qui pourrait poser problème ?
Voici le lien du site en ligne :

Évidemment, je réalise mes tests en local.

Merci par avance pour votre aide.

2

Bonjour Chrys,

Sans directement répondre à ta question technique, il doit déjà exister des plugins qui mettent en place des bannières. (Je n’ai pas su retrouver rapidement les références).
Pour ma part, j’utilise mon plugin « maison ». Si tu ne trouves pas ta solution, je peux te le mettre à disposition. Voire ensuite le mettre sur la zone SPIP si ça en intéresse d’autres.

3

Hello

Ce serait bien quand même que tu mettes ton essai en ligne, ce serait plus facile pour t’aider.

4

Bonsoir,

Merci Jean-Marc. Je préfère éviter les plugins pour ce genre de chose ; je penche plutôt pour un souci de CSS.

J-C je viens de mettre en ligne cela uniquement sur le sommaire. La div porte le nom de « banniere ».

Merci.

5

ok je viens de voir
C’est ton nav en position fixed qui masque ton div « banniere »
Essaie mettre ton div dans le nav, au début.

6

Ensuite, le height n’est pas indispensable, la hauteur du div s’adaptera au contenu.

7

Arf, ça pousse le menu vers la droite …
Il faut donc rajouter un flex-wrap: wrap; au nav

Sinon, ce que tu peux faire, c’est ressortir la bannière du nav et utiliser ces css

.banniere {
	width: 100%;
	background: #1f4fa3;
	position: fixed;
	height: 250px;
}
nav {
	top: 250px;
}
8

Merci beaucoup pour toutes ces pistes à vous deux. Je regarderai tout ça à mon retour et ferai un retour ici même.

9

Alors, je ne connaissais pas fixed dans les positions en CSS. Je vais essayer de remplacer ça par du JavaScript afin de garder uniquement ma nav en haut de la page.
Si je trouve quelque chose, je mettrai mon code ici.

En attendant, bonnes fêtes à toutes et à tous !