Discussion :

[oceane751]

Bonjour à tous,

Ca fait quelques semaines que je n'ai pas fait d'entrainement en intégration web/responsive design et là j'ai un problème que je n'arrive pas à résoudre et vous êtes mon dernier espoir

Sur les sites que j'ai intégré j'avais l'habitude de mettre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
 html {
  height:100%;
 }
 
  body {
   width: 100%;
	height:100%;
	background:none; 
  }

et ça fonctionnait nickel
je n'avais pas de scroll en bas

l'url est http://vaurel.free.fr/diner/diner.html

en grande partie, tout se redimentionne bien sauf que j'ai un grand espace blanc à droite

j'ai tenté d'enlever le width:100% du body mais à partir de là plus rien ne se redimensionne.

Je vous demande votre aide car j'ai plus du tout d'idée
J'ai testé plein de truc et je n'arrive pas à avoir le bon résultat

Vous êtes donc ma dernière chance !

J'ai hâte d'avoir un résultat potable et d'apprendre grâce à vous

En attendant, je continue de chercher

Merci !

[CCyrillus]

Il faut faire simple et laisser body dans le flux en virant ton CSS approximatif :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
body {
	width:1440px;
	margin:0 auto;
	background-image:url(images/bg.jpg);
	padding:0;
}

ou reporter ton bg dans HTML.

[Bovino]

Quand on regarde dans la console, il n'y a pas de width: 100%; et pour cause : ta feuille responsive.css est écrasée par diner.css.

D'autre part, mettre une image de fond de 1440px alors qu'elle est répétitive est une hérésie ! Il faut découper le template minimal et supprimer no-repeat !

[oceane751]

avec firebug, je vois bien le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
body {
    background: none repeat scroll 0 0 transparent;
    height: 100%;
    width: 100%;
}

[CCyrillus]

Tes mediaqueries n'ont rien à voir avec ton problème d'espace blanc.
Si en deça de 1200px tu as background:none, tout est blanc, non ?

C'est au dela de 1200px que tu bataille avec ton fond en no-repeat , un width et surtout un positionement en absolu inutile, Ou bien je n'ai pas compris ta question ....

[oceane751]

En fait j'ai du mal à définir un max-width à ce niveau là

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

@media screen and (max-width: 1200px) {

Quelle est le max-width le plus adapté au responsive design (pour un pc)?

[rodolphebrd]

+1 @bovino pour l'image de bg et cela vaut aussi pour celle du menu qui peuvent aisément être découpées sur Photoshop.

Juste pour info: lobster, police ultra usitée est un peu montrée du doigt.
Nonobstant, graphiquement, le site est pas mal du tout,.

[oceane751]

hello rodolphe
toujours présent pour m'aider

j'ai viré le no-repeat

[rodolphebrd]

No problem, tant que le neurone qui me reste fonctionne

Attention à user-scalable=0 qui interdit le zoom de l'utilisateur

[Bovino]

Virer le no-repeat n'est pas suffisant. Par exemple pour ton image de fond, elle ne devrait faire qu'un pixel de haut et en largeur ne devrait comporter qu'une bande claire et une bande sombre. Tu passerais ainsi d'une image de presque 100Ko à quelques octets à télécharger !

[rodolphebrd]

Pour les résolutions:
http://mobit.ubiquitools.net/article...-media-queries
http://en.wikipedia.org/wiki/List_of..._pixel_density

Apparemment 1024px serait une valeur acceptable mais sachant que ça évolue très vite...