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