Problème d'alignement CSS

Bonjour à tous,

Tout d'abord, un grand bravo pour ce superbe site très bien détaillé et expliqué. C'est une mine d'informations pour tous les développeurs de sites Internet ou Intranet tel que moi

Je rencontre actuellement un soucis de positionnement en CSS. Je vous présente le problème : j'ai un entête de tableau (balises TH) contenant un texte centré. Dans cette balise TH, je voudrai dans certains cas (suivant des règles métier bien précises ) ajouter un contenu qui sera toujours aligné à droite de la colonne TH, mais qui ne doit en aucun cas décentré le texte de la colonne.
Je pense qu'un petit dessin s'impose



Voilà. J'ai essayé de m'en sortir en utilisant des div avec des "float: left" et "float: right", mais je n'obtiens jamais le résultat souhaité. Soit le carré rouge est bien aligné à droite du TH mais le texte du TH est décalé à gauche, soit le texte du TH est bien centré mais le carré rouge se décale sur une autre ligne en dessous du texte.

<th class="classeThWithCenter">
<div style="float: left; width: 100%;">Données PREREF</div>
<div style="float: right;">Données dynamiques insérées ici... </div>
</th>

J'espère que vous pourrez m'apporter de l'aide, je continue de chercher de mon côté mais je suis pas contre un petit coup de pouce
PS: le code n'a pas besoin d'être multi-plateformes, mais il doit au moins être compatible IE6.

Cordialement,
Mikael

Bonjour,

Je pense qu'il est important de revoir la construction des tableau en HTML avant de commencer le CSS.

un tableau ce construit comme suit :

<table>
    <tr>
        <th>table header</th>
        <th>table header</th>
    </tr>
    <tr>
        <td>Cellule</td>
        <td>Cellule</td>
    </tr>
</table>

ou éventuellement comme ça :

<table>
    <tr>
        <th>table header</th>
        <td>Cellule</td>
    </tr>
    <tr>
        <th>table header</th>
        <td>Cellule</td>
    </tr>
</table>

Hello

Voici une idée (si j'ai bien saisi ton problème) :

<th class="entete">
     <span>Données PREREF</span>
     <span class="dynamique">Donnée dynamique</span>
</th>

Et en CSS :

th.entete {
width:...px;
height:...px;
text-align:center; /*centrage du texte*/
position:relative; /*pour servir de référence à l'élément positionné absolument */}

span.dynamique {
display:block;
width:...px; /* facultatif */
height:...px; /* = height de th.entete (ou height:100%) */
line-height:...px; /* = height, permet le centrage vertical du texte */
position:absolute;
top:0;
right:0; }

Si tu ne peux pas fixer une taille à span.dynamique (width) tu peux également faire :

span.basique {
[...]
width:100%;
text-align:right; }

Bon courage

Note :
Ça doit également être possible avec la structure suivante :

<tr class="entete">
     <th>Données PREREF</th>
     <th class="dynamique">Donnée dynamique</th>
</tr>

Reste plus qu'à adapter le CSS, en se basant sur mon code précédent
Modifié par BeliG (27 Jan 2009 - 14:26)

Bonjour Laurie-Anne,

Bien évidemment, mon tableau est créé de la manière que tu as décrite, c'est juste que je n'ai pas mis la totalité du code HTML par soucis de lisibilité. Je pratique le HTML régulièrement depuis plus de 10 ans donc je pense avoir une connaissance assez importante là dessus, j'ai juste parfois un peu de mal avec les CSS...

Désolée pour la confusion mais pourquoi avoir deux éléments distincts dans une seule cellule plutôt que dans 2 ?


Et je plussoie pour les span, ils sont bien plus logiques que des divs.
Modifié par Laurie-Anne (27 Jan 2009 - 14:26)

Laurie-Anne a écrit :
désolée pour la confusion mais pourquoi avoir deux éléments distincts dans une seule cellule plutôt que dans 2 ?

Je suis d'accord, c'est pour cette raison que j'ai édité mon message pour lui proposer une solution avec 2 cellules.

En fait le balisage va dépendre de la réponse à la question : Est-ce que le deuxième élément (celui qui est dynamique) est un complément d'information au premier, où doit-il être considéré comme une nouvelle cellule à part entière ?

Bonjour,

Merci BeliG, je suis en train de tester ta solution, cela a l'air de fonctionner malgré un problème de bordures décalées sur la colonne TH...
Si je n'ai pas fait une seconde colonne pour ces données dynamiques, c'est tout simplement parce que sinon, la colonne qui contient le libellé "Données PREREF" ne fait plus la taille maximale de l'écran. Il faut que cette colonne ait toujours la même taille et prenne tout l'écran (demande du client donc on peut pas trop négocier ).
J'essaie de régler mon problème de bordures et je vous tiens au courant !

Illuzionn a écrit :
Si je n'ai pas fait une seconde colonne pour ces données dynamiques, c'est tout simplement parce que sinon, la colonne qui contient le libellé "Données PREREF" ne fait plus la taille maximale de l'écran.

"colspan" sur la première colonne + positionnement absolu sur la seconde et le tour est joué

Le problème vient aussi du fait que le contenu du tableau (hormis l'entête donc) est généré par des tags JSP, donc on ne peut pas trop rajouter de colonne dans le tableau sinon il faut modifier tous les tags (qui, en plus, ne sont pas sous notre contrôle mais développés par une autre équipe). Donc on doit essayer de se débrouiller comme on peut