Posez votre question Signaler

Menu fixe à 100% de largeur [Résolu]

spe2d 10947Messages postés 1 février 2009Date d'inscription 11 juillet 2010Dernière intervention - Dernière réponse le 17 sept. 2009 à 22:23

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

Menu fixe à 100% de largeur »

Suggestions

Menu fixe à 100% de largeur
[CSS] Problème d'affichage menus IE6 et IE7 (Résolu) » Forum
Page HTML mobile avec menu fixe (Résolu) » Forum
[XP] barre de menu comme sous Mac (Résolu) » Forum
Menu fixe en bas de page (Résolu) » Forum
Bandeau et menu fixes en haut de page (Résolu) » Forum

Plus

Réponse

monkey_monk 610Messages postés 1 juillet 2009Date d'inscription 27 mai 2012Dernière intervention 17 sept. 2009 à 21:46

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

Ajouter un commentaire

spe2d- 17 sept. 2009 à 21:49

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;
}

Réponse

spirou0069 133Messages postés 12 octobre 2008Date d'inscription 5 avril 2011Dernière intervention 17 sept. 2009 à 21:49

Salut

Essaye margin:0;

Marc

Ajouter un commentaire

spe2d- 17 sept. 2009 à 21:50

Marche pas. :/

Réponse

spirou0069 133Messages postés 12 octobre 2008Date d'inscription 5 avril 2011Dernière intervention 17 sept. 2009 à 21:51

Je pense que le problème vienne du faite que tu donne un width de 800 px pour ton body...
Marc

Ajouter un commentaire

spe2d- 17 sept. 2009 à 21:53

Alors je met le body en 100%, et le corps en 800px ?

Réponse

spirou0069 133Messages postés 12 octobre 2008Date d'inscription 5 avril 2011Dernière intervention 17 sept. 2009 à 21:53

Donc si tu mets une largeur de 100% pour ton menu il fait aussi du 800px;

A voir...
Marc

Ajouter un commentaire

spe2d- 17 sept. 2009 à 21:55

Et non, avec 100% de height, il devrait s'adapter à la fenêtre quelque soit la résolution ?!

Réponse

spirou0069 133Messages postés 12 octobre 2008Date d'inscription 5 avril 2011Dernière intervention 17 sept. 2009 à 21:56

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

Ajouter un commentaire

spe2d- 17 sept. 2009 à 21:57

Euh c'est pas ce que je t'ai dit ? XD

Réponse

spirou0069 133Messages postés 12 octobre 2008Date d'inscription 5 avril 2011Dernière intervention 17 sept. 2009 à 21:59

Oui mais tu n'as pas besoin de mettre ton body en 100% car c'est t'as page

Ajouter un commentaire

spe2d- 17 sept. 2009 à 22:03

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.

Réponse

monkey_monk 610Messages postés 1 juillet 2009Date d'inscription 27 mai 2012Dernière intervention 17 sept. 2009 à 22:02

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. ;)

Ajouter un commentaire

Réponse

monkey_monk 610Messages postés 1 juillet 2009Date d'inscription 27 mai 2012Dernière intervention 17 sept. 2009 à 22:08

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 !

Ajouter un commentaire

spirou0069- 17 sept. 2009 à 22:11

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

spe2d- 17 sept. 2009 à 22:14

J'trouve sa plus complexe ! :/

Je débute dans ce domaine.

Réponse

spirou0069 133Messages postés 12 octobre 2008Date d'inscription 5 avril 2011Dernière intervention 17 sept. 2009 à 22:08

#corps
{
height: 800px;
width: auto;
margin: auto;
}

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

Ajouter un commentaire

spe2d- 17 sept. 2009 à 22:10

Oups...

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

Thanks for your help. ;)

A vous deux biensur.

Réponse

monkey_monk 610Messages postés 1 juillet 2009Date d'inscription 27 mai 2012Dernière intervention 17 sept. 2009 à 22:10

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 !

Ajouter un commentaire

Réponse

spirou0069 133Messages postés 12 octobre 2008Date d'inscription 5 avril 2011Dernière intervention 17 sept. 2009 à 22:13

Pas de problème bonne continuation

Marc

Ajouter un commentaire

Réponse

monkey_monk 610Messages postés 1 juillet 2009Date d'inscription 27 mai 2012Dernière intervention 17 sept. 2009 à 22:20

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à... ^^

Ajouter un commentaire

spirou0069- 17 sept. 2009 à 22:23

Merci ;)

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

Marc

Répondre au sujet

Posez votre question

Dossier à la une

Passage au tout numérique : quel coût pour les particuliers ?

Passage au tout numérique : quel coût pour les particuliers ?

Combien cela coûte-t-il au total ? Quelles aides apportent l'état et les acteurs du marché pour alléger cette charge non choisie ? Tous les détails sur Commentçamarche.net.

Menu fixe à 100% de largeur [Résolu]

Menu fixe à 100% de largeur »

Passage au tout numérique : quel coût pour les particuliers ?