Une autre solution que le % pour adapter la page aux largeurs d'écran

Bonjour,

J'ai réalisé un site internet pour y mettre mon travail photo. Certaines pages ne peuvent pas être mise en % sinon toute la mise en page des images est bouleversée. Du coup mes pages ne s'adaptent pas aux largeurs d'écran des différents internautes. Existe t-il une autre solution ? Merci !

www.ceciledegremont.com ( adresse du site), http://www.ceciledegremont.com/1architecturemosaique.html ( exemple de page).

Hello Cécile et bienvenue,

ccile a écrit :
Certaines pages ne peuvent pas être mise en % sinon toute la mise en page des images est bouleversée.

Si j'ai bien compris ton problème, tu devrais trouver une réponse dans le tuto Faire un site pour toutes les résolutions.


Edit: cela dit une (re)lecture du Guide du positionnement CSS pourrait également aider.
Modifié par Heyoan (05 May 2009 - 15:41)

Merci de cette réponse, pour l'instant ça ne marche pas mieux, mais je lis les docs. Je crois que mon site est mal fichu et qu'il faut que je réduise la taille de mes images qui sont trop grandes pour les petits écrans !

ccile a écrit :
Merci de cette réponse, pour l'instant ça ne marche pas mieux, mais je lis les docs. Je crois que mon site est mal fichu et qu'il faut que je réduise la taille de mes images qui sont trop grandes pour les petits écrans !

Bonjour,
encore faudrait-il que ces photos soient suffisamment grandes pour permettre d'en apprécier les détails, ce dont je doute fort

ccile a écrit :
Je crois que mon site est mal fichu

Mmm... oui !

Je pense qu'il manque quelques bases en html et css.

Par exemple tu as choisi un doctype XHTML1.0 strict mais tu ne respectes pas les conventions d'écriture qui lui sont associées (notamment l'attribut alt obligatoire sur les éléments IMG) et tu te retrouves donc avec plusieurs erreurs de validation.

L'autre gros problème vient de la structure et surtout de cette vilaine table complètement vide à l'exception d'une cellule ! Je suppose que c'est par manque de connaissances en ce qui concerne le positionnement CSS et je te renvoie donc au lien que je t'ai donné plus haut.

En prenant le temps de bien comprendre ce point essentiel tu devrais t'en sortir assez facilement car ta page est très simple.

Cela t'éviterait également de créer une class pour chaque photo ce qui est inutile...

Au passage, penser également à améliorer l'accessibilité et l'ergonomie. Par exemple en ajoutant au :hover les pseudo-classes :focus et :active qui permettraient de naviguer au clavier (tabulations) et ne pas obliger l'utilisation de la souris (cf. cette astuce) ou bien en remplaçant les href="#" par des vrais liens vers les photos de grande taille.