Ajuster mon site à résolution d'écran

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Répondre
luigidicorsica
Arias
Messages : 5
Inscription : 19 mars 2012, 14:01

Ajuster mon site à résolution d'écran

Message par luigidicorsica »

Bonjour,

Tout est dans le titre. Je me suis fait un CV en ligne avec mes rudiments en javascript, tout roule sauf que 9 fois sur 10 selon la résolution d'écran du PC qui consulte le CV oblige à scroller (j'ai testé avec Chrome et Firefox), ce qui peut être désagréable. Je pensais m'en f***re, car personne n'est parfait, mais hier soir, je vais voir ce que donne mon site sur mon téléphone portable (navigateur Opéra sous Android), et là surprise, il est ajusté en largeur, il faut juste scroller en hauteur ce qui est plus que parfait.

Cela signifie donc qu'il est possible d'ajuster le site (l'image background + la disposition de mes "+") à l'écran. Je le savais déjà mais, incapable que je suis d'y arriver, j'avais laissé tomber. Mais le résultat en ajusté est tellement sympa... Pourriez vous m'aider ?

Merci d'avance ! Et merci de ne pas grimper au rideau en lisant mon code : je sais que c'est dégueulasse, j'ai commencé en piquant des bouts de code à droite à gauche, c'est pour ça que j'emploie le mot "rudiments" :). Sinon, le reste, c'est tout de moi ! (fier) Je vous remercie d'autant plus que ce ne sera peut-être pas de la tarte pour des spécialistes de s'y retrouver dans cette pagaille...

Luigi

PS : mon site, ça pourrait être utile... = http://ergomu.perso.sfr.fr/
teoli2003
Animal mythique
Messages : 7580
Inscription : 13 nov. 2005, 09:23

Re: Ajuster mon site à résolution d'écran

Message par teoli2003 »

L'idée est d'utiliser des pourcentages en CSS et non des valeurs en px. Ainsi quel que soit la largeur du site, il s'adaptera.

(Sur téléphone portable, il zoome automatiquement pour que cela tienne sur la page).
La liberté n'est jamais accordée de bon gré par l'oppresseur; elle doit être exigée par l'opprimé (Martin Luther King).
Les convictions sont des ennemis de la vérité plus dangereux que les mensonges. (Nietzsche).
Native Mozillian.
JVelon
Arias
Messages : 6
Inscription : 17 déc. 2011, 08:38

Re: Ajuster mon site à résolution d'écran

Message par JVelon »

Bonjour,

En complément de la réponse de teoli, qui bien sur est bonne :

Pour ne pas afficher d'ascenseur horizontal, il y a plusieurs méthodes :
- soit ne mentionner aucune largeur dans tout le code, et n'afficher que de petites images, auquel cas le navigateur n'affichera qu'un ascenseur vertical. Cette méthode, largement employée il y a... plus de 10 ans, n'est aujourdh'hui plus satisfaisante dans pas mal de cas.
- soit positionner les éléments en javascript, en tenant compte de la largeur disponible : document.documentElement.clientWidth donne la largeur de la page.
- soit mentionner des largeurs css en pourcentage, et non en pixels.
- soit utiliser les attributs de positionnement relatif du css : float:right et float:left.
Mon avis : utiliser l'une des deux dernières méthodes (ou les deux), bien que les anciens navigateurs ne comprennent pas l'attribut float.
luigidicorsica
Arias
Messages : 5
Inscription : 19 mars 2012, 14:01

Re: Ajuster mon site à résolution d'écran

Message par luigidicorsica »

Merci pour vos réponses, je vais essayer d'en faire bon usage.

Pour les pourcentages, j'ai déjà essayé, en fait 1) cela me tronque l'image en fonction de la résolution de l'écran, pour que ça "tienne" dans l'écran. Alors il n'y a plus de scroll c'est sur, mais... et 2) les "+" ne sont pas repositionnés, puisque le redimensionnement n'agit que sur le background. En fait oui, si j'obtenais le résultat d'un affichage sur téléphone mobile, ce serait déjà très satisfaisant.

Les autres méthodes, je n'ai pas essayé, je ne connais pas. Je vais voir si je peux en tirer quelque chose.

Bien sûr, tout ce que je dis dois être modéré par le fait que je suis débutant, et si ça se trouve, en disant que j'ai essayé, je suis à côté de la plaque...

Merci encore,

Luigi

PS : oui, sur téléphone cela s'ajuste, mais pas sur iPhone, j'ai testé.
Avatar de l’utilisateur
Abraxas
Animal mythique
Messages : 10180
Inscription : 28 juil. 2011, 14:06

Re: Ajuster mon site à résolution d'écran

Message par Abraxas »

Si tu veux voir un site dont la mise en page s'adapte à la résolution de la fenêtre, tu peux regarder ici http://css-tricks.com/ et tester.
Tout est en CSS.
luigidicorsica
Arias
Messages : 5
Inscription : 19 mars 2012, 14:01

Re: Ajuster mon site à résolution d'écran

Message par luigidicorsica »

J'ai pris bonne note de vos conseils mais je vous avoue que je ne crois pas être capable de les appliquer dans mon code. C'est probablement bête mais je ne vois pas comment faire.

Pouvez-vous m'en dire plus ?

Merci.
ptikilo
Arias
Messages : 2
Inscription : 09 oct. 2012, 15:09

Re: Ajuster mon site à résolution d'écran

Message par ptikilo »

Abraxas a écrit :Si tu veux voir un site dont la mise en page s'adapte à la résolution de la fenêtre, tu peux regarder ici http://css-tricks.com/ et tester.
Tout est en CSS.
Très très intéressante cette adaptation

Merci pour le partage ;)
Avatar de l’utilisateur
jpj
Animal mythique
Messages : 25260
Inscription : 01 août 2005, 15:38

Re: Ajuster mon site à résolution d'écran

Message par jpj »

[Modération]

ptikilo, s'il-te plaît, évite de remonter inutilement de vieux sujets. Merci.
► Si votre problème est [Résolu], svp, marquez-le.
► Pas de support par mp, l’aide se fait sur le forum.
luigidicorsica
Arias
Messages : 5
Inscription : 19 mars 2012, 14:01

Re: Ajuster mon site à résolution d'écran

Message par luigidicorsica »

Bonjour,

Le sujet n'est pas vieux, je suis toujours intéressé par une aide. Merci !
Avatar de l’utilisateur
Abraxas
Animal mythique
Messages : 10180
Inscription : 28 juil. 2011, 14:06

Re: Ajuster mon site à résolution d'écran

Message par Abraxas »

Utilise le mode responsive design view dans les outils dev de la version Nightly, tu verras à quoi ressemble ton site avec des résolutions desktop et mobile.
http://www.hongkiat.com/blog/responsive-resume/
luigidicorsica
Arias
Messages : 5
Inscription : 19 mars 2012, 14:01

Re: Ajuster mon site à résolution d'écran

Message par luigidicorsica »

Bonjour,

Merci beaucoup j'ai consulté cette page mais je ne suis pas un utilisateur assez avancé pour m'en sorti seul. Mais merci quand même ! :)

Cyril
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité