Problème de menu horiz. qui ne s'adapte pas suivant l'écran
Résolu/Fermé
A voir également:
- Problème de menu horiz. qui ne s'adapte pas suivant l'écran
- Double ecran - Guide
- Menu déroulant excel - Guide
- Capture d'écran samsung - Guide
- Capture d'écran whatsapp - Accueil - Messagerie instantanée
- Ecran noir pc - Guide
2 réponses
cubeur78
Messages postés
98
Date d'inscription
mercredi 10 novembre 2010
Statut
Membre
Dernière intervention
23 août 2013
65
24 juin 2013 à 10:24
24 juin 2013 à 10:24
Met tes dimensions en pourcentage, cela devrait régler ton problème.
Ysabe_l
Messages postés
12574
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
3 novembre 2024
276
24 juin 2013 à 10:45
24 juin 2013 à 10:45
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.