Mouvement dans ma mise en page

[dcdp]

Bonjour

Sur les pages contenant texte et images, en gros les pages de mes comptes rendus de soirées, le texte se chargait correctement mais à la finalisation de la page, mon texte se réduisait et se recadrait.

Résultat, la mise en page n'était plus respectée.

Cela le faisait sous Safari, mais pas sur mon smartphone sous Android.

Un exemple en images.

Sous iWeb:
https://drive.google.com/file/d/0B80_pNw4AYZcVXh1Qzh0dkJiLUE/edit?usp=sharing

Résultat dans mon navigateur:
https://drive.google.com/file/d/0B80_pNw4AYZcZVBaUUEwZkgwd0U/edit?usp=sharing


Alors je décide d'intégrer le texte et les images dans le cadre, qui n'est autre qu'une forme sans fond. Le problème était donc réglé en terme de mise en page.
Mais c'est horrible en termes d'ergonomie et de stockage.
En gros, iWeb a converti le cadre, le texte intégré et les images insérées dans le texte en une seul grosse image png. Donc mon site est plus lourd et les images individuelles ne peuvent plus être extraite.

A l'instant, j'ai opté pour la solution sans cadre (forme sans fond) et texte et images dans une zone de texte... et bien retour à la case départ...
Voire pire puisque maintenant, entre iWeb, Safari et navigateur sous Android, je n'ai plus de respect de la mise en page et aucune n'est identique.


Alors pourquoi tant de problème ? Quelle est la solution, s'il vous plaît ?

Au secours !!

 

[momo-fr]

Là on est devant un problème culturel plus qu'autre chose, ce que tu appelles une mise en page fait référence à l'impression traditionnelle sur papier. Chose qui il est vrai ne "bouge" plus, sur le web le média reste "adaptatif", il l'est pour :
- La typographie utilisée à l'affichage (un Helvetica sur Mac ne chasse pas comme sur un PC)
- Le réglage d'affichage du corps de caractère que l'on peut adapter à sa vue (+ ou - gros)
- Les dimensions de l'écran et donc des éléments HTML (largeur / hauteur) qui contiennent ton texte.

Tu es donc devant la réalité du média web qui est, dès l'origine, "fluide" et donc sujet à moultes interprétations, la notion même de mise en page est caduque, on peut plutôt parler de mise en forme et de hiérarchisation visuelle, il est vain de vouloir un affichage identique sur toutes les plateformes et dans tous les contextes d'affichage.

Ou alors effectivement tu passes tout en images et tu perds tous les avantages du numérique… il faut "évoluer".

 

[dcdp]

Merci de ces éclaircissement.

Donc je ne peux pas positionner une image au caractère précis, pour faire une jolie présentation ?

Après en avoir discuté avec un ami pro du web, il me dit que j'ai un code source plein d'imperfections. Il faut donc que je trouve le moyen de nettoyer les codes sources de mes pages avant publication sur le serveur.

C'est dommage parce que ça marchait très bien à la première publication du site.

 

[momo-fr]

Le principe de flux des éléments HTML est simple, il fonctionne de haut vers le bas. On peut mettre un élément en position "flottante" à droite ou à gauche du flux principal (du texte par exemple).

Au delà de ces considérations il est possible après de jouer avec les CSS pour modifier la hauteur de ligne, la marge haute du paragraphe, bref d'ajuster un peu tout ça, mais rien de comparable à une mise en page PAO (print) exécutée un poil de mm.

Une page d'exemples de règles CSS appliquées à une page type (c'est un peu vieux mais tu y vois les principes).

 

[dcdp]

Après avoir parcouru plusieurs sites web important, donc d'un oeil plus critique, je reconnais qu'effectivement tous se contentent de mettre les images centrées et sans texte autour.