Menu fixe - contenu passe sous menu après clic sur lien
Granulet
Messages postés
11
Date d'inscription
Statut
Membre
Dernière intervention
-
Granulet Messages postés 11 Date d'inscription Statut Membre Dernière intervention -
Granulet Messages postés 11 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai en haut de page un menu fixe :
#fixe {
position: fixed;
top: 0px;
}
En dessous le contenu est dans une div, à laquelle j'ai appliqué un margin-top de la taille du menu.
Les liens du menu pointent vers des ancres répartie dans la div de contenu.
Quand je clique sur un lien du menu, le contenu, au lieu de s'afficher après le margin-top de la div (donc après le menu), s'affiche tout en haut de la page, donc sous le menu.
Comment faire pour que le contenu s'affiche sous le menu ?
Pourquoi le margin-top de la div n'est plus respecté après clic sur un lien du menu?
Je ne peux pas utiliser de javascript, tout doit rester html et css.
J'espère avoir été suffisamment clair.
Merci pour votre aide
--
J'ai en haut de page un menu fixe :
#fixe {
position: fixed;
top: 0px;
}
En dessous le contenu est dans une div, à laquelle j'ai appliqué un margin-top de la taille du menu.
Les liens du menu pointent vers des ancres répartie dans la div de contenu.
Quand je clique sur un lien du menu, le contenu, au lieu de s'afficher après le margin-top de la div (donc après le menu), s'affiche tout en haut de la page, donc sous le menu.
Comment faire pour que le contenu s'affiche sous le menu ?
Pourquoi le margin-top de la div n'est plus respecté après clic sur un lien du menu?
Je ne peux pas utiliser de javascript, tout doit rester html et css.
J'espère avoir été suffisamment clair.
Merci pour votre aide
--
A voir également:
- Menu fixe - contenu passe sous menu après clic sur lien
- Menu déroulant excel - Guide
- Lien url - Guide
- Canon quick menu - Télécharger - Utilitaires
- Créer un lien pour partager des photos - Guide
- Windows 11 menu contextuel classique - Guide
3 réponses
#page {
color: #000000;
background: #ffffff;
width: 653px;
margin: 0 auto;
}
#fixe {
position: fixed;
top: 0px;
}
#vert {
position: absolute;
margin-top: 210px;
width: 653px;
height: 104px;
background: #61bc47;
-moz-opacity: 0.9;
opacity: 0.9;
filter: alpha(opacity=90);
}
#menu {
margin-top: -8px;
}
#contenu {
margin-top: 358px;
}
#haut {
position: fixed;
right: 0px;
margin-top: 100px;
}
Page : page entière, qui permet de faire une marge par rapport au body
Fixe : bannière fixe en haut de page
Vert : bandeau sur la banniere
Menu : menu fixe sous la bannière. Il appelle des ancres dans la div contenu.
haut : contient la bannière, le bandeau et le menu.
Contenu : c'est la div qui contient le texte. Elle a margin-top de 358px.
Quand je clique sur le menu, il appelle une ancre de la div contenu, et au lieu de l'afficher à un margin-top de 358px comme je le voudrai (margin top de la div contenu), il l'affiche tout en haut de page, sous le menu fixe.
Est ce plus clair?
color: #000000;
background: #ffffff;
width: 653px;
margin: 0 auto;
}
#fixe {
position: fixed;
top: 0px;
}
#vert {
position: absolute;
margin-top: 210px;
width: 653px;
height: 104px;
background: #61bc47;
-moz-opacity: 0.9;
opacity: 0.9;
filter: alpha(opacity=90);
}
#menu {
margin-top: -8px;
}
#contenu {
margin-top: 358px;
}
#haut {
position: fixed;
right: 0px;
margin-top: 100px;
}
Page : page entière, qui permet de faire une marge par rapport au body
Fixe : bannière fixe en haut de page
Vert : bandeau sur la banniere
Menu : menu fixe sous la bannière. Il appelle des ancres dans la div contenu.
haut : contient la bannière, le bandeau et le menu.
Contenu : c'est la div qui contient le texte. Elle a margin-top de 358px.
Quand je clique sur le menu, il appelle une ancre de la div contenu, et au lieu de l'afficher à un margin-top de 358px comme je le voudrai (margin top de la div contenu), il l'affiche tout en haut de page, sous le menu fixe.
Est ce plus clair?
Je me suis trompé, la div haut n'interveint pas dans ce problème, elle est utilisée plus loin.
Donc:
Page : page entière, qui permet de faire une marge par rapport au body
Fixe : bannière fixe en haut de page
Vert : bandeau sur la banniere
Menu : menu fixe sous la bannière. Il appelle des ancres dans la div contenu.
Contenu : c'est la div qui contient le texte. Elle a margin-top de 358px.
Peut être qu'il est possible en html, de préciser sur un lien la hauteur dans la page à laquelle on veut que s'affiche que le contenu ?
C'est pour cette raison que j'utilise des ancres, mais ça ne fonctionne pas dans ce cas.
Donc:
#page {
color: #000000;
background: #ffffff;
width: 653px;
margin: 0 auto;
}
#fixe {
position: fixed;
top: 0px;
}
#vert {
position: absolute;
margin-top: 210px;
width: 653px;
height: 104px;
background: #61bc47;
-moz-opacity: 0.9;
opacity: 0.9;
filter: alpha(opacity=90);
}
#menu {
margin-top: -8px;
}
#contenu {
margin-top: 358px;
}
Page : page entière, qui permet de faire une marge par rapport au body
Fixe : bannière fixe en haut de page
Vert : bandeau sur la banniere
Menu : menu fixe sous la bannière. Il appelle des ancres dans la div contenu.
Contenu : c'est la div qui contient le texte. Elle a margin-top de 358px.
Peut être qu'il est possible en html, de préciser sur un lien la hauteur dans la page à laquelle on veut que s'affiche que le contenu ?
C'est pour cette raison que j'utilise des ancres, mais ça ne fonctionne pas dans ce cas.