CSS Texte décalé sur differents écransRésolu/Fermé

Question

Bonjour, je fais un site internet pour une copine que je développe en HTML et CSS. Mon but est que ce site internet marche sur tous les navigateurs ainsi que sur toutes résolutions d'écrans. Je rencontre un gros problème avec les différentes résolutions d'écrans. Je m'explique, lorsque j'insère du texte dans une div j'arrive à bien l'aligner dans le bloc mais quand je regarde sur un autre écran, le texte sors du bloc ou n'est pas centré =s. J'aimerais savoir quelle sont les méthodes pour éviter cela et comment je peux vérifier que mon texte soit bien aligner sur tous les écrans sans avoir à regarder sur un autre pc. Merci pour vos réponse =)



Configuration: Windows 7 / Firefox 10.0.2

dariumis · Answer

Salut, normalement pour que ton site s'adapte aux résolution d'écran il faut utiliser les % pour tous ce qui influe sur l'axe horizontal (width, margin-left...). 
Construire ta page à l'aide des float. Pour constater sur ton ordi le comportement suivant les differentes résolution, il suffit de zoomer , dézoomer la page web (ctrl +, ctrl -).

Drclown · Answer

salut dariumis et merci pour ta réponse!

Si je comprend bien il faut toujours définir la longueur d'une div en pourcentage, donc c'est une erreur de la définir en pixel? Comment je peux faire ça si la div contient une image d'arrière plan? Je pense que je devrais plutôt essayer de définir une taille de texte proportionnel à l'écran mais je sais pas comment faire. J'ai pensé aussi que c'était parce que les navigateurs affichaient un style de police différents alors que j'ai attribué une police par défaut dans mon CSS. Peut tu me conseiller une police que tous les navigateurs reconnaissent?

dwade74 · Answer

Bonsoir 
Il a raison dariumus il faut definir une largeur en % exemple width:100%; comme ca ton site va s'adapter en fonction de l'ecran de ton visiteur. 
Pour les polices tu peut mettre plusieurs polices exemple Verdana, Arial; 
Comme ca si le visiteur n'a pas la police Verdana ca va lui afficher en Arial.

Drclown · Answer

Ok merci pour vos réponse mais j'ai trouvé la solution il faut mettre une taille de police en 'em' qui est une unité proportionnel aux differentes résolutions. Ensuite il faut établir une police par Default dans le css car elle change par rapport aux différents navigateurs et peu dans ce cas la faire dépasser le texte de la div. Merci dariumis pour ta technique du zoom molette + ou - pour changer de résolution. 
Si ça aide certain voici quelque lien trouvé:
-Pour les em:
 https://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html
https://www.alsacreations.com/astuce/lire/12-police-font-taille-font-size-em.html
voila bye :D

CSS Texte décalé sur differents écrans

4 réponses

Discussions similaires

Newsletters