concaténation de listes

Version imprimable

Bonjour à tous,

Je voudrais concaténer 3 listes ensembles pour que cela donne :
AAAAA AAAAA AAAAA
BBBBB BBBBB BBBBB
CCCCC CCCCC CCCCC

Et qu'au niveau des liens, ils ne fassent plus qu'un par ligne

Code:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 8</title>
 
<STYLE TYPE="text/css">
#navcontainer { width: 200px; }
 
#navcontainer ul
{
margin-left: 000;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
 
#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #C36;			/*dfgsdfg*/
border-bottom: 0px solid #eee;
}
 
#navcontainer a:link, #navlist a:visited
{
color: #EEA;
text-decoration: none;
}
 
#navcontainer a:hover
{
background-color: #369;
color: #9ff;
}
</STYLE>
</head>
 
<body>
<div id="navcontainer">
<ul id="navlist">
<a href="#">AAAAAAAAAA</a></li>
<a href="#">BBBBBBBBBB</a></li>
<a href="#">CCCCCCCCC</a></li>
</ul>
<a href="#">AAAAAAAAAA</a></li>
<a href="#">BBBBBBBBBB</a></li>
<a href="#">CCCCCCCCC</a></li>
</ul>
<a href="#">AAAAAAAAAA</a></li>
<a href="#">BBBBBBBBBB</a></li>
<a href="#">CCCCCCCCC</a></li>
</div>
 
</body>
</html>

Des conseils seraient les bienvenus

tout d'abord, ta liste est mal construite.Tu ouvres un <ul> sans le fermer, tu fermes des <li> sans les avoir ouvert ...

Voici un exemple de liste bien structurée :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
    <ul id="navlist">
        <li>
            <a href="#">AAAAAAAAAA</a>
            <a href="#">BBBBBBBBBB</a>
            <a href="#">CCCCCCCCC</a>
        </li>
        <li>
            <a href="#">AAAAAAAAAA</a>
            <a href="#">BBBBBBBBBB</a>
            <a href="#">CCCCCCCCC</a>
        </li>
        <li>
            <a href="#">AAAAAAAAAA</a>
            <a href="#">BBBBBBBBBB</a>
            <a href="#">CCCCCCCCC</a>
        </li>
    </ul>

Après , tout dépend de ce que tu veux faire. voici un essai

Code:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>test</title>
    <style>
        #navcontainer { background-color: #C36; width: 500px; }
 
        #navcontainer ul
        {
        margin-left: 0;
        padding-left: 0;
        list-style-type: none;
        font-family: Arial, Helvetica, sans-serif;
        width: auto;
        }
 
        #navcontainer ul li {
            overflow: auto;
            width: auto;
        }
 
        #navcontainer a
        {
        display: block;
        float: left;
        padding: 3px;
        width: 160px;
        background-color: #C36;			/*dfgsdfg*/
        border-bottom: 0px solid #eee;
        }
 
        #navcontainer a:link, #navlist a:visited
        {
        color: #EEA;
        text-decoration: none;
        }
 
        #navcontainer a:hover
        {
        background-color: #369;
        color: #9ff;
        }
    </style>
</head>
 
<body>
<div id="navcontainer">
    <ul id="navlist">
        <li>
            <a href="#">AAAAAAAAAA</a>
            <a href="#">BBBBBBBBBB</a>
            <a href="#">CCCCCCCCC</a>
        </li>
        <li>
            <a href="#">AAAAAAAAAA</a>
            <a href="#">BBBBBBBBBB</a>
            <a href="#">CCCCCCCCC</a>
        </li>
        <li>
            <a href="#">AAAAAAAAAA</a>
            <a href="#">BBBBBBBBBB</a>
            <a href="#">CCCCCCCCC</a>
        </li>
    </ul>
</div>
 
</body>
</html>

21/08/2009, 23h55
malabarbe

Bonsoir pop_up,

Ok, c'est beaucoup mieux comme cela.

Reste a voir :
- Que le rollover agisse sur la ligne complète
- Les liens des 3 colones d'une ligne sont identiques
alors ne faire peut-être qu'un seul href ?

Déjà un grand Merci pour votre aide

@ +
22/08/2009, 07h44
pop_up

Si tous les liens d'une ligne sont les mêmes, tu peux faire une seule balise <a>
Dans ce cas, ton rollover se fera sur toute la ligne.

En revanche, si tous les liens qui doivent êtres identique sont tous les "AAAAAA" alors, tu es obligé de répéter ta balise <a>.
Pour obtenir le rollover sur la ligne complete, il te faudra agir sur "#navcontainer li:hover" (a noter que ça ne fonctionnera pas sous IE6 car il ne sait interpreter le :hover que sur la balise <a>)
22/08/2009, 07h57
malabarbe

Bonjour pop_up,

Ok, je vais esseyer de faire avec le <a>

Il y a t'il une possibilité qu'au survol des liens,
ils n'apparaissent pas dans la barre d'état ?
22/08/2009, 09h06
malabarbe

J'ai torturé le code, mais sans résultats

Pas moyen de réunir au survol les trois
liens de la mème ligne.