Rechercher : dans
Par :

CSS/Ajustement auto d'un site à taille écran

Dernière réponse le 15 nov 2008 à 02:19:06 alexou1984, le 11 nov 2008 à 01:22:29 
 Signaler ce message aux modérateurs

Bonjour,

J'aimerais savoir comment ajuster automatiquement la taille de mon site à la résolution de l'écran du visiteur !? Je crois qu'il faut donner un valeur à "body" mais sans certitude. Et faut-il mieux que je fasse un site avec une grosse résolution de base pour qu'il soit réajuster sur des écrans plus petits sans perte de qualité !? Moi je suis en 1280 par 1024 par exemple. Merci d'avance.

PS : Je bosse en CSS avec quelques touches de HTML et de JS par-ci par-là.

Configuration: Windows XP
Internet Explorer 6.0

Meilleures réponses pour « CSS/Ajustement auto d'un site à taille écran » dans :
[Webmaster] Adapter un site à toutes les résolutions, le centrer VoirUne question récurrente sur ce forum est "Comment adapter mon site à la résolution du visiteur ? Quelle résolution choisir ?" Pas besoin de se compliquer la vie pour ça ! Comment faire Il suffit d'appliquer une largeur relative (=qui change selon...
Quel écran LCD acheter pour votre ordinateur ? VoirA l’heure où les vieux écrans CRT sont remisés au placard, ce sont les écrans plats LCD qui envahissent nos bureaux. Mais comment choisir ? Quelle taille ? Quelle résolution ? Quelques conseils pour acheter le bon écran. Quel écran pour...
Écran LCD ou Plasma ? VoirLCD VS Plasma : lequel est fait pour vous ? Ces deux types d'écran plat et large présentent chacun des avantages et des inconvénients. Pour être sûr de ne pas faire le mauvais choix, posez-vous une question simple : sur quel aspect êtes-vous...
Le moniteur ou écran d'ordinateur VoirIntroduction aux écrans d'ordinateur On appelle écran (ou moniteur) le périphérique d'affichage de l'ordinateur. On distingue habituellement deux familles d'écrans : Les écrans à tube cathodique (notés CRT pour Cathod Ray Tube), équipant la...
Écran plat VoirLes moniteurs à écran plat Les moniteurs à écran plat (notés parfois FPD pour Flat panel display) se généralisent de plus en plus dans la mesure où leur facteur d'encombrement et leur poids sont très inférieurs à ceux des écrans CRT...

1

alexou1984, le 11 nov 2008 à 01:38:41

Personne pour m'aider ?

Répondre à alexou1984

2

Marco la baraque, le 11 nov 2008 à 22:03:07

Bonsoir Alexou1984,
Je n'ai que peu d'expérience en développement web, donc je suis loin d'être un expert, mais je pense qu'il n'y a pas de solution miracle.

Personnellement, j'essaie d'utiliser un maximum les pourcentages pour fixer la taille de mes blocs, et pour les positionner (left, position absolute ou relative...). Par contre, pour certains éléments de taille fixe, comme les images par exemple, ou pour les marges, j'utilise des tailles en px, parce que je n'ai pas envie de déformer l'image par exemple.

Après, comme je te le dis, la résolution, c'est toujours un problème et je pense qu'il y aura toujours une résolution et un navigateur sur lesquels ton site ne s'affichera pas correctement. Le mieux étant d'essayer de minimiser les dégâts.

Cordialement, rtfm and jfgi

Répondre à Marco la baraque

3

alexou1984, le 12 nov 2008 à 02:23:29

Moi je serais d'avis de créer un site avec une résolution assez importante (1024x768 par exemple). Personnellement moi j'ai décidé de créer un site uniquement (ou presque) avec du <span></span>. Presque tous les éléments de mon site (textes, photos, animations...) sont placés avec les SPANS. Au final, beaucoup moins d'écriture, plus simple, une excellente précision de placement sur la page et pour finir un code qui fonctionne avec les trois navigateurs principaux. Alors peut-être que ce système de programmation va choquer les puristes mais moi je trouve que le mélange CSS et SPAN est une excellente combinaison. Le seul problème est que lorsque la résolution d'écran de l'utilisateur est différente de celle de conception du site ce dernier est tout chamboulé. D'où mon post sur ce forum. Moi j'utilise les valeurs "top" et "left" pour positionner mes éléments et je pense que le problème vient de là. Donc si quelqun'un pouvait me donner un autre moyen pour positionner mes éléments merci d'avance.

Répondre à alexou1984

4

Marco la baraque, le 12 nov 2008 à 11:22:11

L'utilisation du positionnement en absolu (top et left) n'est pas du tout un problème si tu spécifies les valeurs en pourcentage.
Le problème de développer un site en 1024*768, c'est que de moins en moins de personnes utilisent cette résolution (de nos jours tous les ordinateurs portables ont un wide screen et donc une résolution assez différente).

Effectivement, l'utilisation des span c'est bien, mais les div aussi ça peut valoir le coup (grosso modo c'est le même comportement avec du display: block au lieu d'un display inline si je ne m'abuse).

Cordialement, rtfm and jfgi

Répondre à Marco la baraque

5

alexou1984, le 15 nov 2008 à 01:33:46

Le problème c'est que j'ai déjà essayé les valeurs en pourcentage, et tous mes éléments sont chamboulés. Parce que lorsque tu mets des valeurs en pourcentage, ces valeurs sont prises en compte à partir du coin supérieur gauche de l'élément. En gros si tu mets "left:50%;" le coin supérieur gauche de l'image (par exemple) va se trouver au centre de la fenêtre et l'image ne sera pas centrée. Alors que dans l'idée, tu mets "50%" dans l'espoir d'avoir un élément centré (lol). Donc en gros avec des valeurs en pourcentage tu es obligé de centré à vue d'oeil sans être sûr à 100% que ton élément est réèlement centré. Est-ce que j'ai été clair (lol) ?

Répondre à alexou1984

6

Marco la baraque, le 15 nov 2008 à 01:42:03

Tu as été clair mais tu n'as que partiellement raison.
Certes, pour centrer des éléments, il faut éviter d'utiliser des pourcentages, et préférer des marges automatiques autant que possible.
Cependant, quand tu dois créer le squelette de ton site, c'est très pratique. Par exemple si tu as un div 'page', tu peux lui dire qu'il a une marge à gauche de 15% et une marge à droite de 15%. Puis dans ce div, tu peux spécifier des colonnes en pourcentage, un header et un footer qui vont prendre 100% de la largeur de ton div 'page'.

Alors que si tu spécifies tout en pixel, et bien ton site sera niquel dans la résolution prévue, mais dès que tu vas avoir une autre configuration, ça va être tout moche car pas adapté.

L'utilisation des pourcentages n'est évidemment pas à utiliser pour afficher des blocs de taille fixe (comme des images par exemple, il ne faut pas les déformer ou les agrandir sinon c'est moche), mais pour une structure globale, c'est niquel.

Cordialement, rtfm and jfgi

Répondre à Marco la baraque

7

alexou1984, le 15 nov 2008 à 02:04:00

La question est si tu centres deux éléments avec des pourcentages (les deux éléments sont côte à côte) leur positionnement sera-t-il le même dans toutes les résolutions ? Si un espace de 15 pixels les séparent par exemple cet espace fera-t-il toujours 15 pixels dans toutes les résolutions ?

Répondre à alexou1984

8

 Marco la baraque, le 15 nov 2008 à 02:19:06

C'est assez curieux de vouloir centrer deux éléments côte-à-côte non ?
Personnellement je préfère les encapsuler dans un conteneur et centrer ce conteneur (utiliser les attributs left ou right fait sortir les éléments du flux, et donc pour en afficher plusieurs côte à côte c'est casse-tête). Pour répondre à ta question, une marge de 15px reste une marge de 15px quelque soit la résolution.
Ensuite, je viens de te dire que pour centrer, il vaut mieux éviter les pourcentages.

Cependant, tu peux centrer correctement un bloc de taille donnée (largeur x, hauteur y par exemple) en pourcentage, en utilisant les marges négatives (mais encore une fois, les pourcentages, c'est génial pour la structure de ton site, pas pour l'affichage du contenu) :
left: 50%;
margin-left: -32px; /*32 c'est x/2*/
top: 50%;
margin-top: -57px; /*57 c'est y/2*/

Cordialement, rtfm and jfgi

Répondre à Marco la baraque