Problème de Résolution
IdryX
-
IdryX -
IdryX -
Bonjour,
Bonjour,
Je suis en train de faire un dite web (uniquement en HTML) pour l'entreprise de mon oncle (je suis encore débutant...)
tout se déroule bien, mais j'ai un souci (sinon je ne serais pas là ^^):
lorque mon pc est en résolution 1024x768, le site est nikel, mais en 1280x800 (comme un peu tout le monde...) les images sont en mosaïque et la bannière ne rentre plus dans sa case...
une idée ? est-ce possible de mettre le site en 1024x780 sans changer la résolution de tout les internaut ?!
est-ce possible de faire en sorte à ce que le site soit centré sans bougé et qu'il y ai une zone vide derrière plus ou moins grande en fonction de la résolution ?
je peux tout de même vous donner l'adresse du site: http://t.h.e.2.3.free.fr (nom de domaine encore flexible ^^)
Merci à tous =)
IdryX
Bonjour,
Je suis en train de faire un dite web (uniquement en HTML) pour l'entreprise de mon oncle (je suis encore débutant...)
tout se déroule bien, mais j'ai un souci (sinon je ne serais pas là ^^):
lorque mon pc est en résolution 1024x768, le site est nikel, mais en 1280x800 (comme un peu tout le monde...) les images sont en mosaïque et la bannière ne rentre plus dans sa case...
une idée ? est-ce possible de mettre le site en 1024x780 sans changer la résolution de tout les internaut ?!
est-ce possible de faire en sorte à ce que le site soit centré sans bougé et qu'il y ai une zone vide derrière plus ou moins grande en fonction de la résolution ?
je peux tout de même vous donner l'adresse du site: http://t.h.e.2.3.free.fr (nom de domaine encore flexible ^^)
Merci à tous =)
IdryX
A voir également:
- Problème de Résolution
- Réduire résolution image - Guide
- Resolution changer pc - Télécharger - Divers Utilitaires
- Impossible de charger l'image haute résolution messenger ✓ - Forum Mail
- Cette resolution n'est pas prise en charge par cette tv modifiez la ✓ - Forum Format et connectique vidéo
- Erreur temporaire de résolution de « deb.debian.org » ✓ - Forum Debian
3 réponses
Bonsoir,
mais en 1280x800 (comme un peu tout le monde...) Euh, je ne pense pas. Je pense plutôt qu'aujourd'hui avec la grande diffusion des portables avec des écrans wide-screen de taille différentes, on a sans doute un panel extrêmement large de résolutions possibles (et d'où un grand casse-tête pour les développeurs web).
Le conseil que je te donne (qui vaut ce qu'il vaut vu que je suis loin d'être un expert en programmation web), c'est :
- d'utiliser un maximum le dimensionnement avec des tailles fixes lorsque tu le souhaites (par exemple lorsque tu affiches une image, pour pas qu'elle ne soit déformée), ou à la rigueur d'utiliser une méthode de dimensionnement "faite maison", en javascript par exemple, te permettant de redimensionner tes éléments (ici ton image) tout en gardant les proportions (scale), de manière à l'afficher idéalement pour toutes les résolutions.
L'inconvénient ici est qu'il faut que javascript soit activé, et en plus ça peut être moche le redimensionnement d'images, si tu l'étires ou la rapetisses trop.
- d'utiliser un maximum le dimensionnement en pourcentages pour tout le reste (tableau, div ne contenant pas de contenu "visuel pur", texte en général...).
Au final, tu auras un site qui, grâce au positionnement et redimensionnement en pourcentages, sera identique quelque soit la résolution. Cependant, les contenus visuels (images, vidéos, applets, que sais-je encore ?) auront une taille fixe (ou dimensionnée par tes soins pour s'adapter au mieux à la résolution de l'utilisateur).
Cordialement,
mais en 1280x800 (comme un peu tout le monde...) Euh, je ne pense pas. Je pense plutôt qu'aujourd'hui avec la grande diffusion des portables avec des écrans wide-screen de taille différentes, on a sans doute un panel extrêmement large de résolutions possibles (et d'où un grand casse-tête pour les développeurs web).
Le conseil que je te donne (qui vaut ce qu'il vaut vu que je suis loin d'être un expert en programmation web), c'est :
- d'utiliser un maximum le dimensionnement avec des tailles fixes lorsque tu le souhaites (par exemple lorsque tu affiches une image, pour pas qu'elle ne soit déformée), ou à la rigueur d'utiliser une méthode de dimensionnement "faite maison", en javascript par exemple, te permettant de redimensionner tes éléments (ici ton image) tout en gardant les proportions (scale), de manière à l'afficher idéalement pour toutes les résolutions.
L'inconvénient ici est qu'il faut que javascript soit activé, et en plus ça peut être moche le redimensionnement d'images, si tu l'étires ou la rapetisses trop.
- d'utiliser un maximum le dimensionnement en pourcentages pour tout le reste (tableau, div ne contenant pas de contenu "visuel pur", texte en général...).
Au final, tu auras un site qui, grâce au positionnement et redimensionnement en pourcentages, sera identique quelque soit la résolution. Cependant, les contenus visuels (images, vidéos, applets, que sais-je encore ?) auront une taille fixe (ou dimensionnée par tes soins pour s'adapter au mieux à la résolution de l'utilisateur).
Cordialement,
Merci beaucoup de m'aider,( c'est très bien expliqué en plus ^^).
Seulement, je ne comprends pas comment on peut jouer avec le pourcentage et non pas le pixelage
( je ne sais pas du tout comment faire autrement...)
Et sinon je pensais à autre chose: un simple exemple,
le site www.free.fr. Sur ce site, tout est centré...et même si on change la résolution de l'écran,
le site garde sa taille identique seulement,
il est plus ou moins volumineux sur le fond d'écran selon la résolution choisie...
Comment peut-on jouer avec les chiffre et les codes pour que cela fonctionne ?
Cordialement.
IdryX
Seulement, je ne comprends pas comment on peut jouer avec le pourcentage et non pas le pixelage
( je ne sais pas du tout comment faire autrement...)
Et sinon je pensais à autre chose: un simple exemple,
le site www.free.fr. Sur ce site, tout est centré...et même si on change la résolution de l'écran,
le site garde sa taille identique seulement,
il est plus ou moins volumineux sur le fond d'écran selon la résolution choisie...
Comment peut-on jouer avec les chiffre et les codes pour que cela fonctionne ?
Cordialement.
IdryX
Bonjour Idryx,
Bon, un peu de code vaut mieux qu'un long discours...
Je pense qu'actuellement tu utilises un positionnement absolu, comme le code suivant :
Avec ceci, on crée un rectangle de taille fixe, que l'on positionne à une taille fixe : quelque soit la résolution, il sera toujours de la même taille, toujours au même endroit.
Maintenant, on va lui dire de modifier sa taille en fonction de la taille de la fenêtre, et on va le centrer de cette manière :
L'avantage d'utiliser des pourcentages, c'est que si l'utilisateur change de résolution (ou si simplement il redimensionne sa fenêtre), ton site va s'adapter. L'inconvénient c'est que c'est plus compliqué à mettre en place pour que ton site soit toujours niquel.
En ce qui concerne le fait de centrer des éléments (comme l'image sur le site de free), il faut utiliser un maximum les marges (les marges auto notamment) avant d'essayer de spécifier la position comme je le fais dans cet exemple car c'est impossible dans le cas suivant :
- tu as une image (ou tout simplement un bloc) de taille fixe (spécifiée en pixel)
- cette image (ou ce bloc) est inclu dans un conteneur que tu places grâce aux pourcentages : si tu veux bien le centrer, tu n'y arriveras pas, et tu devras recourir à du javascript, ce qui n'est pas terrible du tout (bon, des fois on n'a pas le choix, mais autant essayer d'éviter).
Cordialement,
Bon, un peu de code vaut mieux qu'un long discours...
Je pense qu'actuellement tu utilises un positionnement absolu, comme le code suivant :
Fichier ccm.html :
<html>
<head>
<title>Résolution et site web</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="pourExemple">
</div>
</body>
</html>
Fichier style.css :
#pourExemple {
border: 1px solid red;
position: absolute;
left: 30px;
top: 30px;
width: 100px;
height: 50px;
}
Avec ceci, on crée un rectangle de taille fixe, que l'on positionne à une taille fixe : quelque soit la résolution, il sera toujours de la même taille, toujours au même endroit.
Maintenant, on va lui dire de modifier sa taille en fonction de la taille de la fenêtre, et on va le centrer de cette manière :
Fichier style.css :
#pourExemple {
border: 1px solid red;
position: absolute;
left: 35%;
top: 42%;
width: 30%; /* 35 + 30 + 35 = 100 */
height: 16%; /* 42 + 16 + 42 = 100 */
}
L'avantage d'utiliser des pourcentages, c'est que si l'utilisateur change de résolution (ou si simplement il redimensionne sa fenêtre), ton site va s'adapter. L'inconvénient c'est que c'est plus compliqué à mettre en place pour que ton site soit toujours niquel.
En ce qui concerne le fait de centrer des éléments (comme l'image sur le site de free), il faut utiliser un maximum les marges (les marges auto notamment) avant d'essayer de spécifier la position comme je le fais dans cet exemple car c'est impossible dans le cas suivant :
- tu as une image (ou tout simplement un bloc) de taille fixe (spécifiée en pixel)
- cette image (ou ce bloc) est inclu dans un conteneur que tu places grâce aux pourcentages : si tu veux bien le centrer, tu n'y arriveras pas, et tu devras recourir à du javascript, ce qui n'est pas terrible du tout (bon, des fois on n'a pas le choix, mais autant essayer d'éviter).
Cordialement,
