Menu fixe à 100% de largeur

[Résolu/Fermé]
Signaler
-
Messages postés
141
Date d'inscription
dimanche 12 octobre 2008
Statut
Membre
Dernière intervention
11 décembre 2013
-
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 :
#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

12 réponses

Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
119
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
Utilisateur anonyme
Merci pour ta réponse. (je débute en Web...)

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;
}	
Messages postés
141
Date d'inscription
dimanche 12 octobre 2008
Statut
Membre
Dernière intervention
11 décembre 2013
5
Salut

Essaye margin:0;

Marc
Utilisateur anonyme
Marche pas. :/
Messages postés
141
Date d'inscription
dimanche 12 octobre 2008
Statut
Membre
Dernière intervention
11 décembre 2013
5
Je pense que le problème vienne du faite que tu donne un width de 800 px pour ton body...
Marc
Utilisateur anonyme
Alors je met le body en 100%, et le corps en 800px ?
Messages postés
141
Date d'inscription
dimanche 12 octobre 2008
Statut
Membre
Dernière intervention
11 décembre 2013
5
Donc si tu mets une largeur de 100% pour ton menu il fait aussi du 800px;

A voir...
Marc
Utilisateur anonyme
Et non, avec 100% de height, il devrait s'adapter à la fenêtre quelque soit la résolution ?!
Messages postés
141
Date d'inscription
dimanche 12 octobre 2008
Statut
Membre
Dernière intervention
11 décembre 2013
5
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
Utilisateur anonyme
Euh c'est pas ce que je t'ai dit ? XD
Messages postés
141
Date d'inscription
dimanche 12 octobre 2008
Statut
Membre
Dernière intervention
11 décembre 2013
5
Oui mais tu n'as pas besoin de mettre ton body en 100% car c'est t'as page
Utilisateur anonyme
Ok, j'ai ceci :

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.
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
119
Théoriquement, lorsque l'on met 100% pour un élément, c'est relatif à son élément parent.

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. ;)
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
119
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 !

Messages postés
141
Date d'inscription
dimanche 12 octobre 2008
Statut
Membre
Dernière intervention
11 décembre 2013
5
Moi j'utilise cette methode:


body {
color: #F0E39E; Couleur du texte
background-color: #666699; Couleur de fond
position:absolute;
left:50%;
margin-left:-375px; La 1/2 du corp
}

Voila je sais pas ce que tu en pense

Marc
Utilisateur anonyme >
Messages postés
141
Date d'inscription
dimanche 12 octobre 2008
Statut
Membre
Dernière intervention
11 décembre 2013

J'trouve sa plus complexe ! :/

Je débute dans ce domaine.
Messages postés
141
Date d'inscription
dimanche 12 octobre 2008
Statut
Membre
Dernière intervention
11 décembre 2013
5
#corps
{
height: 800px;
width: auto;
margin: auto;
}

Je comprend plus la, c'est la largeur ou la hauteur que tu veux en 800px?
Marc
Utilisateur anonyme
Oups...

Tu as raison, je mettais un peu mélangé les pinceaux, it's okay !

Thanks for your help. ;)

A vous deux biensur.
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
119
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 !
Messages postés
141
Date d'inscription
dimanche 12 octobre 2008
Statut
Membre
Dernière intervention
11 décembre 2013
5
Pas de problème bonne continuation

Marc
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
119
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à... ^^
Messages postés
141
Date d'inscription
dimanche 12 octobre 2008
Statut
Membre
Dernière intervention
11 décembre 2013
5
Merci ;)

Mais jusqu'à présent pas de bug...

Marc