Conseil de codage

Bonjour
Voici une "fenêtre mode d'emploi" qui apparaît quand on clique sur le bouton d'aide de la page.



Je me demande quelle est la meilleure façon de coder cette fenêtre, de telle façon qu'elle ait une présentation correcte sur différents types d'écrans et que l'on ait la même présentation si on a le texte correspondant dans une autre langue (donc longueur de texte pas très stable)
Le problème c'est bien entendu les 2 ou 3 blocs de textes dans les 3 lignes au dessous de l'image.

Première ligne:3 textes, respectivement cadré à gauche, centré et cadré à droite
Deuxième ligne: 2 textes, un cadré à gauche, l'autre cadré à droite; le texte de droite étant très court, il serait bien que le mot "fenêtre" soit remonté, donc que le bloc de gauche soit un peu plus large que celui de droite, mais si le texte devient nettement plus long, ça doit aller à la ligne comme sur l'image.
Troisième ligne: deux blocs de texte. La présentation de l'image est correcte.

Pour l'instant, c'est fait "à l'ancienne", avec une <table>, trois <tr> et un bidouillage pour gérer à la fois les lignes à 3 cellules et celles à 2 cellules.
J'ai essayé d'arranger ça sans succès avec des balises <div> imbriquées et des propriétés CSS float, mais je n'ai rien trouvé de satisfaisant.

Une idée pour arranger ce capharnaüm?
Modifié par PapyJP (15 Feb 2016 - 11:00)

Bonjour,

Dans un premier temps, je mettrais des inline-block sur chacun de tes 7 div, avec des width à 33.33% sur la première ligne, des width du genre 70% - 30% sur la deuxième ligne, et des width à 50% sur la troisième ligne. Éventuellement, je regrouperais les div de chaque ligne dans un div conteneur (1 par ligne donc).

Alternative aux width : des min-width et max-width pour se donner un peu de souplesse.

Sinon, du flex, mais ça ne m'a pas l'air plus simple ici.

Amicalement,

Merci de ta réponse, je vais tester ça dès que possible.

Effectivement, j'ai fait des <div> pour les lignes, des <p> pour les éléments à afficher et défini les bonnes propriétés CSS.
J'ai échangé des bidouilles HTML contre des bidouilles CSS, mais le résultat est tout de même plus clair à la lecture:

<div>
    <p><span>&lt;</span>: station précédente</p><p><span>station actuelle</span></p><p><span>&gt;</span>: station suivante</p>
</div>
<div>
    <p><span>Zoom +et -</span>:change la taille de la fenêtre</p><p><span>?</span>: afficher cette aide</p>
</div>
<div>
    <p><span>Marcher/Examiner</span>: Marchez jusqu'à la paroi qui vous intéresse.<br/>
        Examinez la.<br/>
        Puis retournez au mode marche.</p><p><span>Vertical</span>: à utiliser quand vous êtes dans une position bizarre.</p>
</div>

#help div {display:table;width:100%;}
#help span{font-size:105%;font-weight:800;color:#990000;}
#help div p {display:table-cell;width:50%;padding: 0 0.25em 0 1.25em;	text-indent:-1em;}
#help div p:first-of-type{text-align:left;}
#help div p:nth-of-type(2) {text-align:center}
#help div p:last-of-type{text-align:right}
#help div:first-of-type p:first-child{width:33%}
#help div:first-of-type p:nth-child(2) {width:34%}
#help div:first-of-type p:last-child{width:33%}
#help div:nth-of-type(2) p:first-child{width:70%}
#help div:nth-of-type p:last-child{width:30%}

Modifié par PapyJP (16 Feb 2016 - 10:29)