Problème de menu horiz. qui ne s'adapte pas suivant l'écran
Résolu
BCause
-
BCause -
BCause -
Bonjour,
je n'arrive pas à créer un menu qui soit toujours aussi large que l'écran utilisé, sans faire apparaître de chariot horizontal, en laissant le corps de la page en 1024px, exactement comme sur cette page : la barre de menu "Accueil, Forum ..." occupe toute la largeur suivant qu'on utilise un écran 1280px ou 1024px (idem pour le footer).
Faut-il que je place mon menu dans la balise <HEAD>, avec une balise <div> (weight = 100% en relatif ?) dans le body ou encore avec <table> ?
Merci de votre aide
je n'arrive pas à créer un menu qui soit toujours aussi large que l'écran utilisé, sans faire apparaître de chariot horizontal, en laissant le corps de la page en 1024px, exactement comme sur cette page : la barre de menu "Accueil, Forum ..." occupe toute la largeur suivant qu'on utilise un écran 1280px ou 1024px (idem pour le footer).
Faut-il que je place mon menu dans la balise <HEAD>, avec une balise <div> (weight = 100% en relatif ?) dans le body ou encore avec <table> ?
Merci de votre aide
A voir également:
- Problème de menu horiz. qui ne s'adapte pas suivant l'écran
- Double ecran - Guide
- Capture d'écran whatsapp - Accueil - Messagerie instantanée
- Menu déroulant excel - Guide
- Retourner ecran pc - Guide
- Capture d'écran samsung - Guide
2 réponses
Faut-il que je place mon menu dans la balise <HEAD>, avec une balise <div> (weight = 100% en relatif ?) dans le body ou encore avec <table> ?
Oulà il y a du gros mélange là.
Dans la balise <head> se trouvent les infos qui sont lues par le navigateur et les moteurs de recherche mais non affichées.
Même si c'est dans une <div> ou une <table> ça doit être dans le <body> ! C'est le <body> qui contient tout ce qui est affiché. Et à l'intérieur ça peut (enfin ça doit même) être divisé en plusieurs parties, en <div> et éventuellement en <table>.
Donc pour répondre à ton soucis, tu dois mettre une <div> qui prend 100% de la largeur et dedans si tu veux mettre ton texte aligné avec une <div> plus petite qui est en dessous ou au dessus tu dois mettre les mêmes marges.
Concrètement si tu as un <header> et une <div> de contenu qui font 980px de large et qui sont centrés, pour ton menu tu feras un truc du genre.
Et dans le CSS ça donnera
Bien sur là c'est un exemple avec une taille fixe de 980px mais ça marchera tout aussi bien avec une taille en %, ce qui est encore mieux pour que ça s'adapte à toutes les tailles d'écran, c'est juste pour t'expliquer le principe, à toi de l'adapter à ton cas.
Oulà il y a du gros mélange là.
Dans la balise <head> se trouvent les infos qui sont lues par le navigateur et les moteurs de recherche mais non affichées.
Même si c'est dans une <div> ou une <table> ça doit être dans le <body> ! C'est le <body> qui contient tout ce qui est affiché. Et à l'intérieur ça peut (enfin ça doit même) être divisé en plusieurs parties, en <div> et éventuellement en <table>.
Donc pour répondre à ton soucis, tu dois mettre une <div> qui prend 100% de la largeur et dedans si tu veux mettre ton texte aligné avec une <div> plus petite qui est en dessous ou au dessus tu dois mettre les mêmes marges.
Concrètement si tu as un <header> et une <div> de contenu qui font 980px de large et qui sont centrés, pour ton menu tu feras un truc du genre.
<div id="conteneur_menu"> <div id="menu"> <a href="page1.html">page 1</a> <a href="page2.html">page 2</a> <a href="page3.html">page 3</a> </div> </div>
Et dans le CSS ça donnera
#conteneur_menu {
width: 100%;
background-color: #000000; // la couleur que tu veux en fond, ou l'image que tu veux, enfin ce que tu veux
}
#menu {
width: 980px; // enfin la largeur du reste de ta page quoi
margin: auto; // pour que ça soit centré sur la page
color: #ffffff; // la couleur de l'écriture
}
Bien sur là c'est un exemple avec une taille fixe de 980px mais ça marchera tout aussi bien avec une taille en %, ce qui est encore mieux pour que ça s'adapte à toutes les tailles d'écran, c'est juste pour t'expliquer le principe, à toi de l'adapter à ton cas.