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

Résolu

alexou1984 Messages postés 375 Date d'inscription Statut Membre Dernière intervention -
aloe - 19 sept. 2010 à 18:44

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à.

Afficher la suite

A voir également:

Ajuster affichage page web à la taille de la fenêtre css
Comment réduire la taille d'un fichier - Guide
Web office - Guide
Impossible de supprimer une page word - Guide
Problème affichage fenêtre windows 10 - Guide
Taille 32x32 correspondance ✓ - Forum Loisirs / Divertissements

4 réponses

Réponse 1 / 4

alexou1984 Messages postés 375 Date d'inscription Statut Membre Dernière intervention 35

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) ?

Marco la baraque Messages postés 996 Date d'inscription Statut Contributeur Dernière intervention 329

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,

Réponse 2 / 4

alexou1984 Messages postés 375 Date d'inscription Statut Membre Dernière intervention 35

Personne pour m'aider ?

Marco la baraque Messages postés 996 Date d'inscription Statut Contributeur Dernière intervention 329

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,

Réponse 3 / 4

alexou1984 Messages postés 375 Date d'inscription Statut Membre Dernière intervention 35

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.

Marco la baraque Messages postés 996 Date d'inscription Statut Contributeur Dernière intervention 329

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,

Réponse 4 / 4

alexou1984 Messages postés 375 Date d'inscription Statut Membre Dernière intervention 35

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 ?

Marco la baraque Messages postés 996 Date d'inscription Statut Contributeur Dernière intervention 329

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,

aloe

http://www.aidenet.com/css/css40a.htm

Discussions similaires

Ajustement automatique taille de la page

Résolution d'écran avec une VM Virtualbox

taille des input

HTML - définir taille bouton

Agrandir Button (input) en CSS

Comment redimensionner des images via HTML ?

Votre réponse

Discussions similaires