UI CSS, positionnement des icônes

Version imprimable

Salut,

Je veux utiliser des icones de jqueryui et avoir le meme style pour des chiffre ou texte (sans icones). Je veux aussi pouvoir centrer ces icones comme le reste. Même si tous le contenu est centré, les icones se placent automatiquement a gauche. je vous résume mes questions à la fin après le code:

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
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;} 
</style>
<link type="text/css" href="./jqueryui/css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="./jqueryui/js/jquery-1.5.1.min.js"></script>		
<script type="text/javascript" src="./jqueryui/js/jquery-ui-1.8.13.custom.min.js"></script>
</head>
<body>
<div style = "text-align: center;">
<h1> Je veux que les icones soient au centre comme le reste</h1>
<ul id="icons" class="ui-widget ui-helper-clearfix">
<li class="ui-state-default ui-corner-all" title=".ui-icon-play">
<span class="ui-icon ui-icon-play"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pause">
<span class="ui-icon ui-icon-pause"></span></li>
<li title=".ui-icon-seek-next" class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-seek-next"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev">
<span class="ui-icon ui-icon-seek-prev"></span>
</li>
<li class="ui-state-default ui-corner-all" title="number">
<span>1</span>
</li>
<li class="ui-state-default ui-corner-all" title="number">
<span>2</span>
</li>
<li class="ui-state-default ui-corner-all" title="number">
<span>3</span>
</li>
<li class="ui-state-default ui-corner-all" title="number">
<span>4</span>
</li>
<li class="ui-state-default ui-corner-all" title="number">
<span>5</span>
</li>
</ul>
Ce texte est au centre, c'est juste les icones qui sont décalées vers la gauche
</div>	
</body>
</html>

comment centrer les icones comme le reste?
comment 1, 2, ..., 5 peuvent avoir le même style que les icones.

Merci

28/05/2011, 11h16
danielhagnoul

Bonjour

Il ne suffit pas de vouloir. Les icônes UI sont assemblées dans une image de fond et cette image de fond est positionnée pour montrer uniquement l'icône choisie dans la position top-left

Soit vous utiliser d'autres icônes, soit vous modifier les styles UI.
28/05/2011, 16h07
helpcomm

Salut,

Merci pour la réponse. Avant de baisser les bras et opter pour une autre solution, j'aimerai vous montrer un site qui montre un exemple uilisant la même chose. Peut être, vous pourrez me donner des indications ou de nouvelle pistes, tout en restant sur jquery ui.
Le site est futureshop.ca. Dans la première page, après avoir choisi la langue, vous allez voir des images qui défilent automatiquement, et une barre contient des boutons (icones) pour stopper ou continuer l'animation, une barre de progression, et des boutons, le tout est aligné horizontalement dans une autre barre.

Merci

Bonsoir

Le code de la barre de sélection (1, 2 ,3, 4, play-stop, barre de progression) ne contient pas d'icônes UI, seulement des images. Pour le voir, il suffit d'examiner le code avec le débogueur JavaScript du navigateur. Voici un copier-coller de son code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ul class="indexlinks">
      <li class="qlink"><a href="#home-ss-s01">
            <img src="/Projects/_Content/Mainfeatures/assets/icon_sm_01.png" height="22" width="22" alt=""></a>
       </li>
 
           <li class="qlink active"><a href="#home-ss-s02">
            <img src="/Projects/_Content/Mainfeatures/assets/icon_sm_02_selected.png" height="22" width="22" alt=""></a>
            </li>
 
           <li class="qlink"><a href="#home-ss-s03">
            <img src="/Projects/_Content/Mainfeatures/assets/icon_sm_03.png" height="22" width="22" alt=""></a>
            </li>
 
            <li class="qlink"><a href="#home-ss-s04">
            <img src="/Projects/_Content/Mainfeatures/assets/icon_sm_04.png" height="22" width="22" alt=""></a>
            </li> 
 
            <!--<li class="qlink"><a href="#home-ss-s05">
            <img src="/Projects/_Content/Mainfeatures/assets/icon_sm_05.png" height="22" width="22"alt=""></a>
            </li>-->
 </ul>

28/05/2011, 21h07
helpcomm

Salut,

Vous avez raison, je me suis trompé.

Merci