Discussion :

[Tpower]

Bonjour,
je me trouve face a un problème qui semble facile à résoudre mais, cela fait maintenant un moment que je réfléchis à une solution mais mes efforts sont restés vains.

Le but est d'afficher une liste contenant plusieurs informations avec un label suivi de l'information. Voilà le résultat attendu (et qui fonctionne avec Internet Explorer):


Et voilà ce que cela me donne avec Chrome (ainsi que sur firefox):


Le problème est que le width de ma balise span n'est pas pris en compte, voilà mon code HTML:

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
 
<ol class="infoTable">
    <li class="generalHead"><span class="title">General informations:</span></li>
    <li class="oddLine"><span class="Label">First Name:</span> John</li>
    <li class="evenLine"><span class="Label">Last Name:</span> Holiday</li>
    <li class="oddLine"><span class="Label">Phone Number:</span> </li>
    <li class="evenLine"><span class="Label">Address:</span> Hollywood Boulevard 10</li>
    <li class="oddLine"><span class="Label">City:</span> L.A</li>
    <li class="evenLine"><span class="Label">Skype:</span> </li>
    <li class="oddLine"><span class="Label">Internal or External User:</span> 
 
            Internal User 
 
</li>
<li class="evenLine"><span class="Label">Default Company:</span> imavox</li>
<li class="oddLine"><span class="Label">Arrival Date:</span> 2010-10-10 </li>
<li class="evenLine"><span class="Label">Departure Date:</span> </li>
<li class="oddLine"><span class="Label">Username:</span> John.Holiday </li>
 
</ol>

Et le CSS:

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
21
22
23
24
25
26
27
28
29
30
31
.infoTable{
    margin-left: 20px;
    padding-left: 0px;
    border:1px #000 solid;
}
 
.generalHead{
    background-color:#E32F0B;
    color:#ffffff;
}
 
.oddLine{
    background-color:#f8f8f8;
 
}
.evenLine{
    background-color:#f6d3cf;
}
.Label
{       
    font-weight: bold;
    padding-left:10px;
    padding-right: 50px;       
}
.title{
    padding-left:10px;
    padding-right: 100px;
}
span{
    width:300px;
}

Comment puis-je faire pour que le width soit pris en compte ou dans le cas ou celà est impossible, y a t-il une autre solution donnant un résultat plus ou moins équivalent?

Merci d'avance pour vos réponses!

Tpower

[NoSmoking]

Bonjour,
la largeur n'est pas prise en compte sur des éléments de type inline, ce qui est le cas des SPANs, il faut donc forcer le type.

Code :

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

1
2
3
4
span{
    width:300px;
    display:inline-block;
}

[Tpower]

Merci pour ta réponse, je vais essayer cela lundi matin. Je te redirais si ça a fonctionné pour moi

[Tpower]

Ouais, alors c'était exactement cela qu'il fallait faire. Merci beaucoup pour ton aide!