Retour à la ligne avec décalage [Résolu]

[jbrasselet]

Bonjour,

dans le cadre de la refonte d'une application, je dois refaire les interfaces utilisateur.
J'avais actuellement un comportement tableau libelle : valeur classique.
Si la valeur était trop longue, elle passait à la ligne mais en restant dans sa case. J'enfonce un peu des portes ouvertes mais je pense cela nécessaire pour la suite.

J'ai voulu supprimer ces tableaux (comme c'est la mode actuellement) et passer par des div et des spans.
J'ai donc fait ceci :

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<div id="DtlAlarmDesc">
      <div id="CurrentAlarm">
         <span class="formLibelle">Current alarm</span><br />
         <span class="formattedSpan">Identifier</span><span> : <span id="MainContent_almIdentifier">30132608</span></span><br />
         <span class="formattedSpan">Descr.</span><span> : <span id="MainContent_almDescription">Oracle Instance(s) not Monitored</span></span><br />
         <span class="formattedSpan">Status</span><span> : <span id="MainContent_almStatus"></span></span><br />
         <span class="formattedSpan">Start</span><span> : <span id="MainContent_almStartDate"></span></span><br />
         <span class="formattedSpan">End</span><span> : <span id="MainContent_almEndDate"></span></span><br />
      </div>
      <br />
      <div id="Origin">
         <span class="formLibelle">Origine</span><br />
         <span class="formattedSpan">Application</span><span> : <span id="MainContent_oriApplication"></span></span><br />
         <span class="formattedSpan">Host</span><span> : <span id="MainContent_oriHost"></span></span><br />
         <span class="formattedSpan">Class</span><span> : <span id="MainContent_oriClass"></span></span><br />
         <span class="formattedSpan">Instance</span><span> : <span id="MainContent_oriInstance"></span></span><br />
         <span class="formattedSpan">Parameter</span><span> : <span id="MainContent_oriParameter"></span></span><br />
      </div>
      <br />
      <div id="Acknowledgement">
         <span class="formLibelle">Acknowledgement</span><br />
         <span class="formattedSpan">Date</span><span> : <span id="MainContent_ackDate"></span></span><br />
         <span class="formattedSpan">By</span><span> : <span id="MainContent_ackBy"></span></span><br />
         <span class="formattedSpan">Status</span><span> : <span id="MainContent_ackStatus"></span></span><br />
         <span class="formattedSpan">Descr.</span><span> : <span id="MainContent_ackDescr"></span></span><br />
      </div>
   </div>

Avec le css suivant :

Code css :

1
2
3
4
5
6
7
8
 
span.formattedSpan 
{
   display: block; 
   float: left; 
   clear: left; 
   width: 60px;
}

Seulement si ma valeur est trop grande, elle passe à la ligne mais sans décalage. Elle recommande sous mon libellé

Y-a-t-il un moyen simple de régler cela ?

Merci d'avance

NB : Les span avec Id sont générés par Visual Studio. Je peux éventuellement supprimer les span qui les contiennent.

[NoSmoking]

Bonjour,

J'ai voulu supprimer ces tableaux (comme c'est la mode actuellement) et passer par des div et des spans.

les données tabulaires, ce qui semble être ton cas, sont à mettre dans des TABLE, c'est leur but premier, et ce indépendamment des effets de mode qui s'applique surtout pour de la mise en page.

Sinon il existe display:table-cell.

[jbrasselet]

Je vais donc garder un tableau ce sera plus simple puisque je suis sous IE.
Merci