Menu fixe à 100% de largeur
Résolu
Utilisateur anonyme
-
spirou0069 Messages postés 141 Date d'inscription Statut Membre Dernière intervention -
spirou0069 Messages postés 141 Date d'inscription Statut Membre Dernière intervention -
Bonsoir à tous,
Voilà je souhaite faire un menu en bas de la page restant en fixe, et de toute la page, tandis que le reste du site est en 800px de largeur.
Voilà le début du css :
Voilà ce que celà donne.
Le menu va bien jusqu'à droite, mais pas jusqu'à gauche comme noté par le trait rouge.
Une idée du pourquoi ?
Merci d'avance. ;)
Spe2d
Voilà je souhaite faire un menu en bas de la page restant en fixe, et de toute la page, tandis que le reste du site est en 800px de largeur.
Voilà le début du css :
#menu_bas
{
background-image: url("../images/menu_bas.png");
bottom: 0px;
position: fixed;
width: 100%;
height: 25px;
}
Voilà ce que celà donne.
Le menu va bien jusqu'à droite, mais pas jusqu'à gauche comme noté par le trait rouge.
Une idée du pourquoi ?
Merci d'avance. ;)
Spe2d
A voir également:
- Menu fixe à 100% de largeur
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Réinitialiser téléphone fixe logicom - Forum Mobile
- Windows 11 menu contextuel classique - Guide
- 100 mo en go ✓ - Forum Mobile
12 réponses
Comme ça, avec si peu d'info, je dirais qu'il s'agit d'un margin-left mal réglé... peut-être est-il définit ailleurs par parenté... auquel cas essayes de mettre margin-left:0; Si ce n'est pas ça, et qu'il se trouve simplement dans un bloc, qui lui, à un padding-left ou un margin-left essayes de mettre un margin-left négatif jusqu'à te positionner là où tu le souhaite !
Bon boulot ! :D
Bon boulot ! :D
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Ben faut voir ce que tu veux faire...
Pour moi le body, c'est la page général...(Ci je me trompe que qqu me le dise...)
Et dans le body tu dois créer ton corp (en 800)
Avec des div
ET tu termine par ton menu en 100 % qui fera la largeur de ton écran
Pour moi le body, c'est la page général...(Ci je me trompe que qqu me le dise...)
Et dans le body tu dois créer ton corp (en 800)
Avec des div
ET tu termine par ton menu en 100 % qui fera la largeur de ton écran
Oui mais tu n'as pas besoin de mettre ton body en 100% car c'est t'as page
Ok, j'ai ceci :
Mon menu du bas fait bien maintenant toute la largeur de la page, mais mon corps fait aussi toute la page au lieu de 800px.
body
{
background-color: black;
background-repeat: repeat-x;
color: white;
height: auto;
margin: auto;
}
#logo
{
background-image: url("../images/logo.bmp");
float: left;
width: 120px;
height: 140px;
}
#corps
{
height: 800px;
width: auto;
margin: auto;
}
#menu_bas
{
background-image: url("../images/menu_bas.png");
bottom: 0px;
position: fixed;
width: 100%;
height: 25px;
}
Mon menu du bas fait bien maintenant toute la largeur de la page, mais mon corps fait aussi toute la page au lieu de 800px.
Théoriquement, lorsque l'on met 100% pour un élément, c'est relatif à son élément parent.
Ex:
Sinon, il semblerait que le problème vient effectivement du body à 800px.
Essaye de mettre 100% à body et d'englober tout le reste dans un div (par ex. <div id="container">) qui aura 800px de large et, si tu veux tout centrer, margin:0 auto; .
Tiens-nous au courant. ;)
Ex:
<div style="width:500px;">
<div style="width:100%;">
Cette div à la même taille que celle qui la contient !
</div>
</div>
Sinon, il semblerait que le problème vient effectivement du body à 800px.
Essaye de mettre 100% à body et d'englober tout le reste dans un div (par ex. <div id="container">) qui aura 800px de large et, si tu veux tout centrer, margin:0 auto; .
Tiens-nous au courant. ;)
Comme le dit spirou0069 il n'est pas primordial de mettre ton body à 100% (que ce soit en width ou height)... mais c'est quand même mieux car sinon il prend comme valeur "auto" qui, dans la plupart des cas, est relatif au contenu... donc plutôt imprévisible !
En plus tous les navigateurs n'appliquent pas cette règle par défaut.
Donc, je te conseil de mettre width et height à 100%... sauf si ça ne se justifie pas pour ton cas évidemment !
En plus tous les navigateurs n'appliquent pas cette règle par défaut.
Donc, je te conseil de mettre width et height à 100%... sauf si ça ne se justifie pas pour ton cas évidemment !
#corps
{
height: 800px;
width: auto;
margin: auto;
}
Je comprend plus la, c'est la largeur ou la hauteur que tu veux en 800px?
Marc
{
height: 800px;
width: auto;
margin: auto;
}
Je comprend plus la, c'est la largeur ou la hauteur que tu veux en 800px?
Marc
Attention, si tu mets margin:auto, c'est toutes les marges que tu définis en 1 coup ! Tu risques d'avoir des marges en haut et en bas aussi !
spirou0069, ta méthode est très bien ! Pas de soucis ! ;)
Il m'arrive aussi de l'utiliser quand il le faut, au final c'est comme on préfère.
Pour ma part j'évite juste de mettre des positionnements qui font "sortir" le contenu du champ visuel car Google et compares ignore ce qui "sort" de la page (ex les technique de remplacement de titre par des images avec des text-indent:-9999px ne sont plus pris en compte pour le référencement, ils sont ignoré).
Même si il ne devrait pas y avoir de problème avec ta méthode car il remet le contenu dans le champ visible... mais j'essaye de pas tenté le diable... 'suffit d'un petit bug d'un robot pour qu'il ne lise pas tout le css. :P
Enfin bon, c'est vrai que j'abuse un peu là... ^^
Il m'arrive aussi de l'utiliser quand il le faut, au final c'est comme on préfère.
Pour ma part j'évite juste de mettre des positionnements qui font "sortir" le contenu du champ visuel car Google et compares ignore ce qui "sort" de la page (ex les technique de remplacement de titre par des images avec des text-indent:-9999px ne sont plus pris en compte pour le référencement, ils sont ignoré).
Même si il ne devrait pas y avoir de problème avec ta méthode car il remet le contenu dans le champ visible... mais j'essaye de pas tenté le diable... 'suffit d'un petit bug d'un robot pour qu'il ne lise pas tout le css. :P
Enfin bon, c'est vrai que j'abuse un peu là... ^^
Voici le css complet (je viens de commencer ;) )
body { background-color: black; background-repeat: repeat-x; color: white; width: 800px; height: auto; margin: auto; } #logo { background-image: url("../images/logo.bmp"); float: left; width: 120px; height: 140px; } #menu_bas { background-image: url("../images/menu_bas.png"); bottom: 0px; position: fixed; width: 100%; height: 25px; }