Discussion :

[Invité]

Bonjour,
Je fais afficher la température sur une image de cette façon:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src='data/img/Température.png'><div style="position:absolute;color:black;top:33%;left:38%;font-size:14px;">#value#</div>

Mon souci est que la température change 25°C ou 25,3°C donc le centrage horizontal n’est pas toujours bon.

Je dois conserver la position style="position:absolute;top:33%; et aimerais centrer la position horizontal.

Est-ce possible ?
Avez-vous une idée ?

Bien cordialement

[Invité]

Bonjour,

par exemple :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

position:absolute;color:black;top:33%;width:100%;text-align:center;font-size:14px;

[Invité]

Impeccable cela fonctionne, merci.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src='data/img/Température.png'><div style=" position:absolute;color:black;top:33%;width:86%;text-align:center;font-size:14px;">#value##unite#</div>

Je fais afficher après ma valeur (#value#) la valeur (#unite#) qui fait 1 caractère, donc je dois décaler de 1 caractère soit 14px pour que ce soit centré.
Est-il possible de simplifier cela ?

J’ai un doute sur le fait que je place mes variables #value# et #unite# accolé dans ma div.
Ça fonctionne mais est-ce la bonne pratique ?

[Invité]

Petite rectification !
Je devais avoir un problème d’interface, j’ai dû remettre width:100% pour avoir le centrage.
Ma déduction était fausse.

Concernant mes 2 variables #value# la valeur #unite#.
#value# = 25,3
#unite# = °C
Pour avoir 25,3°C sans espace, ma div est-elle bien écrite ?

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src='data/img/Température.png'><div style="position:absolute;color:black;top:33%;width:100%;text-align:center;font-size:14px;">#value##unite#</div>

[Invité]

Je ne sais pas pourquoi cette div me turlupine autant puisqu’elle fonctionne !
Je ne sais pas pourquoi non plus le fait voir écrit >#value##unite#< me dérange à ce point.
J’ai vraiment l’impression qu’il manque quelque chose entre les 2.
Otez-moi d’un doute SVP ?

[NoSmoking]

Bonjour,

Pour avoir 25,3°C sans espace, ma div est-elle bien écrite ?

on écrit 25.3° sans espace, mais 25.3 °C, dans ce cas il y a un espace.

Je dois conserver la position style="position:absolute;top:33%; et aimerais centrer la position horizontal.

je ne vois pas ce qui t'oblige de plus je ne suis pas trop sûr, mais je ne connais pas l'intégration de ton code, que cette structure soit optimum !

Tu pourrais avoir ton image en fond, background, si celle-ci est purement décorative ou utiliser un élément <figure> ce qui pourrait également convenir.

Après cela ne sera qu'une question de CSS.