Aligner des listes à puce à gauche et à droite

**Jolt0x** · 29/01/2014, 00h34

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

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 :

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

**JefReb** · 29/01/2014, 09h09

Cela aurait été bien d'avoir aussi un petit bout de code html ...

**Jolt0x** · 29/01/2014, 13h37

OK, merci de ton attention a mon problème.

Tout est en php évidement, mais j'ai fait un "view source" sur une page html du browser:

Code html :

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
<div id="pager"> 
<table width="100%" class="mytable"> 
 <tr> 
 <td style="width:400px;"> 
<ul id="pagination" style="margin-left:0;" > 
<li class="previous-off">Nombre de sujets par page: </li> 
 <li> <a href="show_topics.php?id_forum=2&page=1&nb=5"> 5 </a> </li> 
<li class="active">10 </li> 
 <li> <a href="show_topics.php?id_forum=2&page=1&nb=20"> 20 </a> </li> 
 <li> <a href="show_topics.php?id_forum=2&page=1&nb=50"> 50 </a> </li> 
 <li> <a href="show_topics.php?id_forum=2&page=1&nb=100"> 100 </a> </li> 
</ul> 
</td> 
<td><ul id="pagination" class="align-leftXXX"> 
<li class="previous-off">&laquo; Précédent</li> 
<li class="active"> 1 </li> 
<li> <a href="show_topics.php?id_forum=2&page=2&nb=10"> 2 </a> </li> 
 <li class="next"> <a href="show_topics.php?id_forum=2&page=2&nb=10"> Suivant &raquo; </a> </li> 
</ul> 
</td> </tr> </table> 
</div>

Invité · 29/01/2014, 16h41

Bonjour,
voici tout ce dont tu as besoin pour ta problématique : http://codepen.io/jreaux62/pen/iBgxt

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
#pager
{
	text-align: left;
	padding: 0 5px 5px;
	clear:both; 
	overflow:hidden;
}
 
#pager ul { margin: 0; padding: 0; list-style-type:none; display:inline-block; }
#pager ul.fleft { float:left; }
#pager ul.fright { float:right; }
#pager ul li { float:left; display:inline-block; }

Code html :

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
<div id="pager"> 
 
	<ul class="fleft"> 
		<li class="previous-off">Nombre de sujets par page: </li> 
		<li> <a href="show_topics.php?id_forum=2&page=1&nb=5"> 5 </a> </li> 
		<li class="active">10 </li> 
		<li> <a href="show_topics.php?id_forum=2&page=1&nb=20"> 20 </a> </li> 
		<li> <a href="show_topics.php?id_forum=2&page=1&nb=50"> 50 </a> </li> 
		<li> <a href="show_topics.php?id_forum=2&page=1&nb=100"> 100 </a> </li> 
	</ul> 
 
	<ul class="fright"> 
		<li class="previous-off">&laquo; Précédent</li> 
		<li class="active"> 1 </li> 
		<li> <a href="show_topics.php?id_forum=2&page=2&nb=10"> 2 </a> </li> 
		<li class="next"> <a href="show_topics.php?id_forum=2&page=2&nb=10"> Suivant &raquo; </a> </li> 
	</ul> 
 
</div>

Le reste est décoratif (à toi de jouer).

N.B. J'attire ton attention sur la notation abrégée : padding: 0 5px 5px;...
=> Glossaire des propriétés CSS

**Jolt0x** · 02/02/2014, 23h23

Merci. J'avais déjà utilisé, sans succès, les float left et right comme je l'ai dit dans mon message initial.

Lorsque je teste la page suivante (je donne le code un peu plus bas) dans un navigateur tout est OK. Ca vient bien se coller a gauche (au détail près qu'il faut que je corrige une marge) et a droite lorsque il le faut. En revanche lorsque j'inclus ce pager dans mes pages "projet" ca merdois. Ce qui ne va pas c'est les "puces" active qui ne se placent plus sur la même ligne que les puces non active (elles n'ont pas de lien clickable) mais elles viennent se superposer sur la ligne juste en dessous: confrère l'image dont je donne le lien. C'est incompréhensible.

Voilà l'extrait de page (c'est une page compète basé sur une autre page)

Code html :

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
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
 
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
 <meta charset="UTF-8" />
 <title>Position absolute</title>
 <style type="text/css">
 
 #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-color: currentColor;
        border-width: 0px;
        border-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: 1px solid #dddddd;
}
 
#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: 1px solid #ffffff;
}
 
#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. */
}
 
#pager ul.fleft {
        float:left;
}
 
#pager ul.fright {
        float:right;
}
 
</style>
 
<div id="pager"> 
	<table width="100%" class="mytable" border=1> 
		<tr> 
			<td style="width:400px;"> 
				<ul id="pagination" class="fleft"> 
					<li class="previous-off">Nombre de sujets par page: </li> 
					<li class="active">5 </li> 
					<li> <a href="show_topics.php?id_forum=2&page=1&nb=10"> 10 </a> </li> 
					<li> <a href="show_topics.php?id_forum=2&page=1&nb=20"> 20 </a> </li> 
					<li> <a href="show_topics.php?id_forum=2&page=1&nb=50"> 50 </a> </li> 
					<li> <a href="show_topics.php?id_forum=2&page=1&nb=100"> 100 </a> </li> 
				</ul> 
			</td> 
			<td>
				<ul id="pagination" class="fright"> 
					<li class="previous-off">&laquo; Précédent</li> 
					<li class="active"> 1 </li> 
					<li> <a href="show_topics.php?id_forum=2&page=2&nb=10"> 2 </a> </li> 
					<li> <a href="show_topics.php?id_forum=2&page=3&nb=10"> 3 </a> </li> 
					<li> <a href="show_topics.php?id_forum=2&page=4&nb=10"> 4 </a> </li> 
					<li class="next"> <a href="show_topics.php?id_forum=2&page=2&nb=10"> Suivant &raquo; </a> </li> 
				</ul> 
			</td>
		</tr>
	</table> 
</div> 
 
</body>
</html>

Vola la copie d'écran de mon projet:

http://hpics.li/d20398a

vous vérifiez sur la portion de copié d'écran que les puce actives (clickable bleu) sont sur une seconde ligne superposé.

Mon opinion est que j'ai des propriétés sur des listes à puce définie dans mon projet qui ont des répercussions sur les listes à puce de mon pager et ces propriétés CSS semblent ne pas être active sur des config vierge comme l'extrait de page dont j'ai donne le source

Invité · 03/02/2014, 06h05

Bonjour,
A quoi bon te donnner un code, puisque tu ne l'utilises pas ?

**Jolt0x** · 03/02/2014, 12h51

Ah ben si Jérôme. J'utilise le code que tu m'a proposé. L'important dans ton code était ceci:

Code html :

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

<ul id="pagination" class="fright">

et

Code html :

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

<ul id="pagination" class="fleft">

avec les classes fright et fleft bein defini comme dans ma page que j'ai posté juste au dessus.

Comme je le dit dans ma précédente intervention, ma page complète (celle dont j'ai mis le source) fonctionne très bien seule (faite un copier/coller dans une page vierge et ouvrez là dans un navigateur) mais lorsque elle est incorporé dans mon projet (confère ma portion de copie d'écran) les puce se mettent en superposition au lieu de rester en ligne.

Quid ?

Invité · 03/02/2014, 14h37

Ben non.

L'important, c'est surtout de constater que je n'utilise pas de <table>.
Ce n'est pas pour rien...

=> http://codepen.io/jreaux62/pen/iBgxt

Il ne s'agit pas de prendre un bout de code CSS par çi, et de le coller à un bout de HTML par là.
Le couple HTML/CSS est indissociable.

**Jolt0x** · 03/02/2014, 21h23

Bonsoir Jérôme,

Merci de ta participation a mon sujet.

J'étais peu près certain que le <table> n'étais pas en cause et je l'ai vérifié en le supprimant complètement : résultat mon problème persiste.

Néanmoins, tu n'as sans doute pas bien lu mon dernier message. Je te confirme que ta solution (que j'utilise ou pas les tableau) fonctionne parfaitement. A la condition toutefois que ma portion de code (je la donne un peu plus bas) soit utilisé dans une page html "vierge". Par "vierge", j'entends hors de mon projet. Je viens de le vérifier : c'est OK, MERCI.

Cependant, lorsque j'inclut cette portion de code (ce que tu proposes avec tes float left et right) dans mon projet cela ne fonctionne pas bien, sans que, justement je puisse l'expliquer : c'est la raison de mon intervention ici. Ce qui ne vat pas, comme je l'ai dit, c'est les puces active (clikable) qui ne s'alignent pas avec les puces non actives (non clickable) mais qui, au contraire, se superposent sur une seconde ligne. Confère mes screenshot de mes messages précédents.

Si tu es intéressé (peut-être ne l'es-tu pas) je peux te communiquer un lien internet où tu pourras t'en rendre compte par toi même (sans doute demain ou tard ce soir). Fait le moi savoir.

Comme promis, la page où tout est OK:

Code html :

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
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
 
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
 <title>Pager</title>
	<style type="text/css">
 
        #pager
        {
                text-align: center;
                padding-top: 0px;
                padding-bottom: 5px;
                margin-bottom: 5px;
                margin-top: 0px;
                background-color: transparent;
                height: 75px;
        }
 
        #pagination
        {
                margin-right: auto;
                margin-left: auto;
        /*      margin-right: 20px; */
        /*      margin-left: 20px; */
        }
 
        #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: 0px;
                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;
        }
        #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;
        }
        #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. */
        }
 
 
        #pager ul.fleft {
                float:left;
        }
 
        #pager ul.fright {
                float:right;
        }
 
 
        </style>
 
 
<div id="pager"> 
	<ul id="pagination" class="fleft"> 
		<li class="previous-off">Nombre de sujets par page: </li> 
		<li class="active">5 </li> 
		<li> <a href="show_topics.php?id_forum=2&page=1&nb=10"> 10 </a> </li> 
		<li> <a href="show_topics.php?id_forum=2&page=1&nb=20"> 20 </a> </li> 
		<li> <a href="show_topics.php?id_forum=2&page=1&nb=50"> 50 </a> </li> 
		<li> <a href="show_topics.php?id_forum=2&page=1&nb=100"> 100 </a> </li> 
	</ul> 
	<ul id="pagination" class="fright"> 
		<li class="previous-off">&laquo; Précédent</li> 
		<li class="active"> 1 </li> 
		<li> <a href="show_topics.php?id_forum=2&page=2&nb=5"> 2 </a> </li> 
		<li> <a href="show_topics.php?id_forum=2&page=3&nb=5"> 3 </a> </li> 
		<li> <a href="show_topics.php?id_forum=2&page=4&nb=5"> 4 </a> </li> 
		<li class="next"> <a href="show_topics.php?id_forum=2&page=2&nb=5"> Suivant &raquo; </a> </li> 
	</ul> 
</div> 
 
</body>
</html>

Merci.

Invité · 03/02/2014, 23h17

Il suffit de verifier les styles appliqués.
Firefox -> firebug
Ou google chrome.

Ou donne un lien en ligne.

**thelvin** · 04/02/2014, 00h33

Envoyé par Jolt0x

Si tu es intéressé (peut-être ne l'es-tu pas) je peux te communiquer un lien internet où tu pourras t'en rendre compte par toi même (sans doute demain ou tard ce soir). Fait le moi savoir.

Si si, on est toujours intéressés, ça fait partie des données du problème.
En fait, ce qu'on comprend pas trop, ici, c'est la notion de ne pas donner ce genre de liens. Systématiquement, sans en parler, sans attendre, dès le début, après avoir parlé du problème, toujours, sans aucune exception, comme le voudrait le bon sens le plus élémentaire pour quelqu'un qui, par exemple, a besoin d'aide.

Invité · 04/02/2014, 07h21

je plussois thelvin.

Avec le lien, on trouve la solution en moins de 5 minutes.
Sans blabla.
...à moins que tu ne sois pas intéressé ?

**Jolt0x** · 04/02/2014, 16h15

Réponse simple : avec IE je n'ai pas de problème. Mes soucie d'affichage et de superposition des puces est avec d Firefox et Chrome. Je vins de m'en rendre compte a l'instant.

Il suffit de reprendre le fichier que j 'ai mis plus haut et de l'ouvrir soit avec FF soit avec Chrome. Je ne sais pas le corriger, ce problème de compatibilité avec FF et Chrome. Je n'ai pas testé avec Safari.

Pour ce qui est de la vérification online, elle n'est plus indispensable et, ca tombe bien, j'ai des souci de prod.

Merci si quelqu'un sait faire cette correction.

**rodolphebrd** · 04/02/2014, 16h41

Bonjour,

l'idéal serait de créer un codepen pour tester plus rapidement.

Invité · 04/02/2014, 16h51

Envoyé par rodolphebrd

...l'idéal serait de créer un codepen pour tester plus rapidement.

... ou simplement reprendre celui que j'ai DEJA fait/fourni : http://codepen.io/jreaux62/pen/iBgxt

Textuellement.
Sans changer une ligne.

Mais ça semble trop demander...