concaténation de listes

**malabarbe** · 21/08/2009, 16h09

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 :

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
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

**pop_up** · 22/08/2009, 00h41

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 :

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
 
    <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 :

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
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>

**malabarbe** · 22/08/2009, 00h55

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

@ +

**pop_up** · 22/08/2009, 08h44

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>)

**malabarbe** · 22/08/2009, 08h57

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 ?

**malabarbe** · 22/08/2009, 10h06

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

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

concaténation de listes

CSS

Discussions similaires

Partager

Partager