Probleme rectangle qui ne s'adapte pas en fonction du navigateur?

bonjour,

j'aurrais besoin de votre aide SVP

sur mon site.

voila je voudrais savoir comment rendre le carrer du millieu centrée et qui réduise automatique celon la taille du navigateur.

mon site ce trouve ici

http://78.239.20.4/byb/

j'ai une div qui s'appelle art-nostylemenu1 :

et qui à ce code css

.art-nostylemenu1 {
background: none repeat scroll 0 0 #F2F2F2;
border: 1px solid #B0A6A0;
box-shadow: 0 4px #C9C9C9;
height: 500px;
margin: 49px auto;
margin-left: -152px;
min-width: 118%;
padding-top: 79px;
width: 1171px;
}

pouvez vous me dire ce comment faire pour que le code oblige le carrer à diminuer et agrandir en fonction du restréssisement ou agrandissement du navigateur ?


merci

Salut,

Il faudrait que tu utilises des media queries pour en fonction de la taille tu changes la largeur de ton bloc.
Par exemple :

@media screen and (max-width: 640px) {
  .art-nostylemenu1 {
   width:XXpx;
  }
}

La on indique que si la largeur est inférieur a 640px on met une largeur de XXpx; ensuite tu peux combiner en mettant une valeur comprise entre.

Pour plus d'infos c'est ici : http://www.alsacreations.com/article/lire/930-css3-media-queries.html

bonjour artsx,

Merci pour ta réponse!

j'ai essayer sur mon site et cela ne centre pas le bloc ??

Peu tu me dire si j'ai oublier quelque chose ?

l'ancien code je les mis en commentaire.

voici le code appliquer sur la balise :

.art-nostylemenu1 {
background: none repeat scroll 0 0 #F2F2F2;
border: 1px solid #B0A6A0;
box-shadow: 0 4px #C9C9C9;
height: 483px;
/* margin-bottom: -5px;
margin-left: -433px;
margin-top: 26px;
padding-top: 63px;
width: 1887px; */
}

@media screen and (max-width: 1920px) {
.art-nostylemenu1 {
width:1887px;
}
}

merci de ton aide

voici une impression écran

je vais remettre si vous pouvez tester en déactivant sur firebug ?

merci
Modifié par michael10fr (15 Nov 2013 - 12:22)