Geckozone

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/

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

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.

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

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.

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.

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

Bonjour,

Le sujet n'est pas vieux, je suis toujours intéressé par une aide. Merci !

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/

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