Discussion :

[Marc22]

Bonjour,

si on vous dit de faire un site en 1024*768 par exemple, est ce que vous définissez par exemple le body en width:1024 et height:768?

Ou vous vous dites que pour le height, il y a la barre des taches, les barres d'affichage du navigateur, et que ça représente on va dire 200px. Donc vous retranchez les 200px aux 768?

(Pour le width rien n'empêche de mettre 1024 certes)

Merci

[Théomis]

Bonjour,

Quand tu utilise les pixels dans une feuille de style ce n'est pas pour faire un design extensible mais fixe, c'est à dire que une personne qui est dans une résolution de 1440 x 1900 ne verra pas ton site comme si elle était en 1024 x 768.

Le design extensible est lui utilisé pour faire un site qui prend toute la taille de l'écran et qui est identique dans toutes les résolutions. C'est pour cela que pour un design extensible, on utilise des pourcentage et non des pixels.

[Marc22]

Merci pour vos réponses. En fait on possède une charte graphique avec des bandeaux (haut et bas) fixes, qui sont des images travaillées et qu'on ne peut ni couper, ni rien faire. Et ces bandeaux font 1023 pixels de largeur. Donc quelque soit la résolution de l'internaute, cette valeur ne doit pas varier.

sinon cela ne m'aurait pas déranger d'utiliser les pourcentage.

[Erwan31]

Merci pour vos réponses. En fait on possède une charte graphique avec des bandeaux (haut et bas) fixes, qui sont des images travaillées et qu'on ne peut ni couper, ni rien faire. Et ces bandeaux font 1023 pixels de largeur. Donc quelque soit la résolution de l'internaute, cette valeur ne doit pas varier.

Les images peuvent s'auto-redimensionner en largeur (avec la hauteur qui suit proportionnellement) en fonction de la largeur du viewport (la zone d'affichage du browser) avec ce code:

Code :

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

1
2
3
4
html > body img { 
	max-width: 100%; 
	height: auto;
	}

le html > body sert à exclure IE6 (qui le connait pas max-width)

D'accord mais pour un design extensible, c'est les pourcentages qui sont privilégiés.

Oui c'est certain que si tu veux pouvoir étendre la résolution au maxi, les % sont préférables.

[Marc22]

Merci Erwan, je ne sais pas si la qualité des images ne va pas en pâtir si on les redimensionne. d'autant plus que les résolutions d'écran ne sont pas forcément proportionnelles (hauteur par rapport à la largeur) je crois.

[Erwan31]

Merci Erwan, je ne sais pas si la qualité des images ne va pas en pâtir si on les redimensionne. d'autant plus que les résolutions d'écran ne sont pas forcément proportionnelles (hauteur par rapport à la largeur) je crois.

Oui mais tu sais les largeurs d'écran à moins de 1024 se font rares
Pas dramatique toute de même non?

[Théomis]

En % ou pas. Par exemple un max-width de 960px permet aussi au block conteneur de se rétrécir automatiquement selon la largeur de l'écran.

D'accord mais pour un design extensible, c'est les pourcentages qui sont privilégiés.

[Erwan31]

Bonjour,
ne jamais dépasser 995px pour éviter de voir apparaitre la scrollbar horizontale. Une bonne valeur (car divisible par un grand nombre de chiffres pour mettre en place un colonage) est 960px pour le 1024.
Quant à la la zone de fold (limite imaginaire au delà de laquelle il faut scroller pour voir le contenu), elle se situe en gros entre 600px à 570px pour du 1024X768).

Le design extensible est lui utilisé pour faire un site qui prend toute la taille de l'écran et qui est identique dans toutes les résolutions. C'est pour cela que pour un design extensible, on utilise des pourcentage et non des pixels.

En % ou pas. Par exemple un max-width de 960px permet aussi au block conteneur de se rétrécir automatiquement selon la largeur de l'écran.