Discussion :

[IILINUXII]

Bonjour,

Je suis entrain de me monter un curriculum vitae en format web et j'essaie tant bien que mal de trouver de l'information sur la façon de faire pour que mon site passe aussi bien dans une définition 16x9 que dans une 4x3.

Présentement mon site regarde bien en 16x9 mais en 4x3 certains textes embarquent par dessus une image.

Merci de bien vouloir m'aider

PS: Je travaille avec Gedit, Gimp, Inkscape et Iceweasel (Firefox).

[Obsidian]

Pour qu'un site exploitant les C.S.S. soit réussi et rende bien sur tous les navigateurs (avec un peu de travail quand même), il y a une règle d'or à toujours observer :

• Le web est un média dynamique : non seulement les dimensions du support de rendu peuvent varier, mais celles des éléments de ta page aussi. À tout moment, le contexte peut être redimensionné, comme le ferait celui d'une boîte de dialogue d'une application informatique.

Même dans une même session sur un même navigateur, l'utilisateur a toujours la possibilité de redimensionner sa fenêtre, et le contenu de cette fenêtre peut encore varier si l'utilisateur choisit d'ouvrir un panneau latéral par exemple. D'autre part, les polices de caractères que tu as choisies peuvent ne pas être disponibles sur la machine de l'utilisateur, et celui-ci peut aussi avoir décidé de les avoir agrandies (Ctrl + sous Firefox, par exemple) ou rétrécies (Ctrl -) pour y voir plus clair ou, au contraire, visualiser plus d'infos à la fois.

Il est donc hors de question de faire de la « composition » telle qu'on la ferait dans un magazine papier, dans lequel on part d'un format de page fixe et que l'on remplit au mieux ensuite.

Ce qu'il faut faire, c'est travailler en amont en définissant une « politique » pour sa charte graphique, qui colle au plus près à l'esprit purement « documentaire » que ta page HTML, elle, doit suivre.

Par exemple : imagine que tu fasses la « une » d'un journal, avec un gros article central et deux manchettes verticales latérales. Que doit-il se passer si tu agrandis la fenêtre ? Est-ce que les trois éléments doivent s'agrandir en conséquence dans les mêmes proportions, ou bien les manchettes doivent-elle conserver la même largeur pour toujours consacrer la majeure partie de l'espace disponible à l'article central ?

Il faut donc que tu définisses ces choses-là à l'avance. Ceci va t'aider à établir des liens de parenté entre les éléments (ex : « les manchettes sont des satellites de l'article principal ») et, de là, la C.S.S. deviendra très simple à établir.

Présentement mon site regarde bien en 16x9 mais en 4x3 certains textes embarquent par dessus une image.

Si c'est le cas, il est possible que les mêmes défauts apparaissent également en 16×9 sur d'autres machines, sans que tu le saches.

Donc, la première question à se poser est : comment veux-tu que ton C.V. soit mis en page d'une manière générale et, plus précisément, quel comportement ton navigateur doit-il adopter dans le cas où le texte et les images viendraient à se chevaucher ? Aller à la ligne ? Décaler l'image au paragraphe du dessous ? Habiller l'image en la rendant flottante à gauche ou à droite ? Etc.

[IILINUXII]

Merci beaucoup pour cette réponse!

Je crois que je vais recommencer mon site avec cette façon de faire.

Donc si j'ai bien compris, je devrais travailler un peu plus avec les pourcentages plutôt qu'avec des dimensions figées?

[Obsidian]

Donc si j'ai bien compris, je devrais travailler un peu plus avec les pourcentages plutôt qu'avec des dimensions figées?

Pas forcément : tu peux figer la taille de certains éléments et laisser libre (automatique) celles des autres, par exemple, et pour reprendre mon cas de figure avec mes manchettes.

Tu peux utiliser les pourcentages si tu veux travailler avec des proportions. Mais la meilleure approche consiste à choisir l'unité adaptée. Par exemple, tu pourras définir une taille en pixels si tu comptes intégrer une image bitmap dont les dimensions sont déjà fixées. Par contre, pour une manchette ou un bloc de texte, il peut être intéressant d'utiliser une unité relative à la taille des caractères : donc em, ex, ou pt.

Par contre, les sites où les tailles de tous les éléments sont fixés une fois pour toutes et définis en pixels, c'est à proscrire totalement. Il y a une seule chose à retenir : un site web est l'opposé d'un PDF. J'insiste particulièrement sur ce point car il y a plusieurs C.S.S. standard utilisées sur les logiciels de blogs qui le font quand même. Résultat, sur un écran large, on se retrouve avec deux immenses marges sur les côtés et le contenu toujours aussi illisible au milieu. C'est aussi pénible que les applications qui définissent des boîtes de dialogue statiques et qui désactivent le bouton de redimensionnement.