Discussion :

[Kokito]

Bonjour à tous,

je craque, je n'arrive pas à trouver la solution à mon problème ...

Je vous montre mon code en exemple (ce n'est pas le code final, c'est juste pour faire un test ).

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<table width="200" border="1">
  <tr>
    <th>test</th>
    <th>test</th>
    <th>test</th>
  </tr>
  <tr height="100">
    <th>test</th>
    <td align="center" valign="bottom">
        <div style="background-color:#FF0000; height:35%;"><div>35%</div></div>
     </td>
    <td align="center">69</td>
  </tr>
  <tr>
    <th>test</th>
    <td align="center">23</td>
    <td align="center">69</td>
  </tr>
</table>

Voilà, j'aimerais que le 35% reste au milieu de la cellule TD quoiqu'il arrive. En fait le DIV rouge est une barre de pourcentage qui se remplit selon la valeur.

Et donc je n'arrive pas à caler le pourcentage par dessus ... et ca m'éneeervveee, j'en peux plus !! J'ai essayé avec z-index, ca ne donne pas ce que je voulais etc etc ...

Bref, déjà j'aurais voulu savoir si c'était possible ?

Et si oui, j'aurais besoin d'un petit coup de pouce siouplé

Merci

[mdr_cedrick]

chez moi avec un valign="middle" le 35% est aligné et horizontalement et verticalement.

Je ne comprend pas ton problème, peux-tu nous faire un schèma de ce que tu voudrais

[Kokito]

Merci de ta réponse

Désolé j'ai du mal m'expliquer

Voilà, j'ai fait 2 images, pour montrer ce que je souhaiterais faire (si c'est possible).

Pour une valeur de 35% :


Pour une valeur de 75% :


Merki

[desert]

Tu peux tenter ceci :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<tr>
    <td>test</td>
    <td>
        <div id="content">
            <div id="gauge"></div>
            <div id="percent">35%</div>
        </div>
    </td>
    <td>69</td>
</tr>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
#content {
    position: relative;
    height: 100px;
}
#gauge {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 35%;
    background-color: #F00;
}
#percent {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 20px;
    margin-top: -10px; 
    margin-left: -25px;
}

EDIT : tentative de centrage du pourcentage.

[Kokito]

Je reste sans voix ...

J'ai pas arrêté, la journée d'hier, de tourner autour sans trouver (je mélangeais/confondais absolute et relative etc ... )...

C'est exactement ce que je voulais

Mille mercis desert

Et merci aussi à cedrick d'avoir pris la peine de répondre

[Kokito]

Bon c'est vraiment génial mais ... ( ) y'a IE qu'est pas content

Lorsque on change le "height: 35%;" en dessous de 20%, IE ne fait plus la différence et le div ne change pas de hauteur ... même à 0%, il ne disparait pas

Pourtant il est pas bien compliqué le CSS ...


Edit : bon j'ai trouvé en partie une solution (sur ce forum en plus ), il suffit de rajouter font-size:0px. Le minimum de la hauteur du DIV passe à 2 pixels ... c'est mieux que rien ...

Si quelqu'un a la vraie solution, je prends