Posez votre question Signaler

CSS/Ajustement auto d'un site à taille écran [Résolu]

alexou1984 378Messages postés 13 mai 2008Date d'inscription 2 mars 2010Dernière intervention - Dernière réponse le 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à.
Lire la suite 

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

9 réponses
Réponse
+0
moins plus
alexou1984 378Messages postés 13 mai 2008Date d'inscription 2 mars 2010Dernière intervention 11 nov. 2008 à 01:38
Personne pour m'aider ?

 Ajouter un commentaire
Marco la baraque- 11 nov. 2008 à 22:03
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,
Ajouter un commentaire
Réponse
+0
moins plus
alexou1984 378Messages postés 13 mai 2008Date d'inscription 2 mars 2010Dernière intervention 12 nov. 2008 à 02:23
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.

 Ajouter un commentaire
Marco la baraque- 12 nov. 2008 à 11:22
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,
Ajouter un commentaire
Réponse
+0
moins plus
alexou1984 378Messages postés 13 mai 2008Date d'inscription 2 mars 2010Dernière intervention 15 nov. 2008 à 01:33
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) ?

 Ajouter un commentaire
Marco la baraque- 15 nov. 2008 à 01:42
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,
Ajouter un commentaire
Réponse
+0
moins plus
alexou1984 378Messages postés 13 mai 2008Date d'inscription 2 mars 2010Dernière intervention 15 nov. 2008 à 02:04
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 ?

 Ajouter un commentaire
Marco la baraque- 15 nov. 2008 à 02:19
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 - 19 sept. 2010 à 18:44
http://www.aidenet.com/css/css40a.htm
Ajouter un commentaire
Posez votre question
Ce document intitulé « CSS/Ajustement auto d'un site à taille écran » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?