Aligner des listes à puce à gauche et à droite
Bonjour,
J'ai un "pager" fait en liste a puce ul/li. La partie gauche c'est la liste (liste a puce) qui permet à l'utilisateur de sélectionner le nombre d'élément a afficher par pages (5, 10, 20, etc., élément par pages) et la partie droite c'est le choisi de la page (page suivante, page précédente ou page numéros x).
J'ai mis la partie gauche du pager (le nombre d'élément par page) dans la colonne gauche d'un tableau, et la partie droite dans la colonne de droite (c'est un tableau aune seule ligne). Le tout encapsulé dans un div.
Pour le besoin de la démonstration j'ai fait un screnshot que j'ai retaillé. J'ai aussi mis des bordures sur la tableau (elles sont en lightgrey mais on les vois un peu) pour vous permettre de mieux vous rendre compte: voila l'image:
http://hpics.li/a96e288
http://img15.hostingpics.net/thumbs/...7testboard.jpg
Mon problème est que je n'arrive pas a coller bien a gauche la première partie du pager (le choix du nombre d'élément par page) et a coller à droite la seconde partie du pager (choix de la page). J'ai essayé des text-align: left et right, je remplacé le tableau par des <div> etc. des float:left/right des text-align, etc. J'ai essayé de jouter sur les propriétés des CSS du pager mais rien ne fonctionne bien. En particulier si je colle tout a droite (pour la seconde partie du pager) les <li> ne restent pas en ligne mais se superpose verticalement : ca na va pas.
Pour la partie gauche j'ai joué sur les même propriété mais sans succès. J'ai aussi essayé un margin-left negatif pour le <ul>/<li> : ca fonctionne mais mal. Cela fonctionne mal, parce que lorsque j'instancie ce pager sur une autre page dans un autre projet (j'ai une classe pager) il faut remodifier ces marges négative (en plus ou en moins).
Voilà le fichier css de mon pager:
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
| #pager
{
/* text-align: center; */
text-align: left;
padding-top: 0px;
padding-bottom: 5px;
margin-bottom: 5px;
margin-top: 0px;
background-color: transparent;
}
#pagination
{
/* margin-right: auto;
margin-left: auto;
*/
margin-right: 0px;
margin-left: 0px;
}
#pagination li
{
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
font-size: 11px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
/* margin-left: -45px; /* Pour un retrait de -45px ; */
border-top-color: currentColor;
border-right-color: currentColor;
border-bottom-color: currentColor;
border-left-color: currentColor;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
list-style-type: none;
/* list-style-position: outside; */
list-style-image: none;
text-align: left;
}
#pagination a
{
margin-right: 2px;
border-top-color: #dddddd;
border-right-color: #dddddd;
border-bottom-color: #dddddd;
border-left-color: #dddddd;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#pagination .previous-off, #pagination .next-off
{
color: #838383;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 3px;
padding-left: 4px;
font-weight: bold;
float: left;
display: block;
}
#pagination .next a, #pagination .previous a
{
font-weight: bold;
border-top-color: #ffffff;
border-right-color: #ffffff;
border-bottom-color: #ffffff;
border-left-color: #ffffff;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#pagination .active
{
color: #fda100;
padding-top: 4px;
padding-right: 6px;
padding-bottom: 4px;
padding-left: 6px;
font-weight: bold;
float: left;
display: block;
/* margin-left: 0px; /* Pour un retrait de -45px ; aussi en paraellel aiallieur */
}
#pagination a:link, #pagination a:visited
{
color: #00a0ea;
padding-top: 3px;
padding-right: 6px;
padding-bottom: 3px;
padding-left: 6px;
text-decoration: none;
float: left;
display: block;
}
#pagination a:hover
{
border-color: #00a0ea; /* blue ciel comme le link. */
} |
Merci
