UI CSS, positionnement des icônes

**helpcomm** · 28/05/2011, 03h22

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

**danielhagnoul** · 28/05/2011, 11h16

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.

**helpcomm** · 28/05/2011, 16h07

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

**danielhagnoul** · 28/05/2011, 20h32

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 :

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

**helpcomm** · 28/05/2011, 21h07

Salut,

Vous avez raison, je me suis trompé.

Merci

UI CSS, positionnement des icônes

jQuery

Vue hybride

Discussions similaires

Partager

Partager