probleme avec css position: fixed;

[GregK84]

Salut,

j'ai fais une recherche sur le forum mais je n'ai pas trouvé comment je pourrais resoudre mon problème.

en quelques mot :
j'ai placé sur mon body un margin et une couleur de fond.

Code : Tout sélectionner

body {
 margin: 20px;
 padding: 0px;
 color: #333333;
 background-color: #919191;
 }

ensuite, sur mon menu, j'ai placé une position fixed, et un width de 100% pour qu'il prenne a n'importe qu'elle resolution 100% de la page avec une marge de 20pixel de chaque cote.

Code : Tout sélectionner

#box_fixe {
 position: absolute;
 margin: 20px 20px 0px 20px;
 width: 100%;
 border-right: 5px solid #DDDDDD;
 border-left: 5px solid #DDDDDD;
 }

mais maintenent, mon menu deborde sur la droite (il ne prend pas en considération la marge de 20pixel qui est placée sur le body)

quand j'enleve l'attribut width: 100% mon menu ne prend plus toute la longueur de ma page, mais seulement les 800pixel de mon mnu flash ce qui n'est pas très beau etant donné que le texte qui defille sur la droite est partiellement cacher

j'espere que 'jai +- ete clair, je vais rajouter l'exemple en ligne se soir (un exemple vaut mieu qu'un long discous )

ma feuille de style :

Code : Tout sélectionner

body {
 margin: 0px;
 padding: 0px;
 color: #333333;
 background-color: #919191;
 }	 

#header {
 padding: 0px;
 margin: 0px;
 top: 0px;
 height: 20px;
 width: 100%;
 background: #919191;
 }

@media screen {
	body>#header {
		position: fixed;
	}
 }

/*
#box_fixe comprend #fct_commune et #menu/.menu
*/

#box_fixe {
 position: absolute;
 margin: 20px 20px 0px 20px;
 width: 100%;
 border-right: 5px solid #DDDDDD;
 border-left: 5px solid #DDDDDD;
 }

@media screen {
	body>#box_fixe {
		position: fixed;
	}
 }
 
#fct_commune {
 height: 20px;
 width: 100%;
 border-bottom: 1px solid #000000;
 color: #333333;
 background: #DDDDDD;
 }

#menu {
 margin: 0px;
 top: 31px;
 height: 120px;
 width: 100%;
 border-bottom: 1px solid #000000; 
 color: #333333;
 background: #FF9999;
 }
 
.menu {
 margin: 0; 
 padding: 0;
 width: 800px;
 height: 120px
 background-color: #FF9999;
 }

/*
#box comprend #content  et #footer
*/

#box {
 margin: 0px 20px 20px 20px;
 border-right: 5px solid #DDDDDD;
 border-left: 5px solid #DDDDDD;
 }
 
#content {
 margin: 0px 0px 0px 0px;
 padding: 160px 0px 0px 0px;
 z-index:1;
 width: 100%;
 color: #333333;
 background: #F5F5F5;
 }

#footer {
 margin: 0px;
 bottom: 0px;
 height: 20px;
 width: 100%;
 color: #333333;
 background: #DDDDDD;
 }

voila merci

[Mirovinben]

Les marges sont extérieures à ton bloc qui fait déjà 100% donc tu as maintenant 100 % + 20 px + 20 px... normal que ça déborde !

Je suis à peu près sûr (*) également que les marges du body ne sont utiles que pour des blocs positionnés "normalement" dans le flux donc pas en absolute.

(*) j'ai fait des essais de CSS pendant les vacances mais j'ai oublié ou zappé tout ce qui ne m'avait pas convenu... Et ces essais sont sur un autre PC ! Donc impossible pour l'instant d'être sûr à .... heu... 100% + les marges.

[GregK84]

effectivement, cela me parrait possible, mais je ne vois pas comment je pourrais agir sur mon width 100% pour le faire diminuer de 20px ???

j'ai oublié de présiser que j'avais aussi essaye avec un padding mais meme probleme.

[calimo]

C'est bizarre, parce que normalement ces 100% c'est les 100% du bloc conteneur, donc du body, plus de la largeur totale... on peut voir ça grandeur nature en fonctionnement ?

[GregK84]

voici l'url du site (version en développement et en beta 0.00001 )

si jamais il y a quelques prob d'affichage du menu flash c normale

http://www.pspliberte.com/greg/site_sdav/

PS: cette version a été testée sur :

firefox 1.0
opera 7.23
netscape 7.02
(et bien entendu il y a tjr quelques (gros) problème d'affichage sous ie 6.0)

voila

[Bobe]

au lieu de width: 100%, fais plutôt left: 20px; right: 20px;

[GregK84]

c oki ca fonctionne, merci bobe (& les autres )

comme j'avais deja un margin de 20 px sur mon menu j'ai simplement du mettre left &right à 0px;

thx