Discussion :

[lodan]

Bonjour,

Un simple problème j'en suis sur, mais je tourne autour depuis un moment :

Voici mon code HTML simplifié, en fait mes ligne <li> sont dans une boucle pour une liste déroulante :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<ul class="contacts">
<li class="contact">
<spanstyle="display:none">'.$autoCompletion['id_tiers'].'-idcache</span>
<div class="nom">'.$autoCompletion['tiers_nom'].' </div>
<div class="nom2">- '.$autoCompletion['tiers_adr1'].'</div>
</li>
<li class="contact">
<spanstyle="display:none">'.$autoCompletion['id_tiers'].'-idcache</span>
<div class="nom">'.$autoCompletion['tiers_nom'].' </div>
<div class="nom2">- '.$autoCompletion['tiers_adr1'].'</div>
</li>
</ul>

Voici mon 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
ul.contacts {
        list-style-type: none;
        margin:0px;
        padding:0px;
        text-align: left;
}
ul.contacts li.selected { background-color: #333300; cursor: pointer; }
li.contact {
        list-style-type: none;
        display:block;
        margin:0;
        padding:2px;
        height:12px;
}
li.contact div.image {
        float:left;
        width:32px;
        height:32px;
        margin-right:8px;
}
li.contact div.nom {
        background-color: #ffffcc;
        font-weight:bold;
        font-size:0.9em;
        line-height:1.5em;
}
li.contact div.nom2 {
        background-color: #ffffcc;
        font-size:0.9em;
        line-height:1.5em;
}

Les div nom et nom2 se placent bien l'un en dessous de l'autre.

Mais...
Exemple avec 2 lignes A et B
ligne A se place bien en li div nom et li div nom2
ligne B nom se place sur nom2 de ligne A

Mon problème est donc ce chevauchement ?

J'ai besoin d'un autre regard.

Merci d'avance

[cedsun]

C'est quoi ton objectif ? tu veux quel résultat ?

Tu veux que les li ne se chevauchent pas ?
Si c'est ça, rajoutes du margin-bottom dans ton li.contact, genre :

Code :

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

1
2
3
4
5
6
7
8
9
 
li.contact {
        list-style-type: none;
        display:block;
        margin:0;
        padding:2px;
        height:12px;
	margin-bottom:20px;
}

... mais je pense mal comprendre la question

[lodan]

Si c'est ça.

Merci beaucoup.