UI CSS, positionnement des icônes [Résolu]

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

28/05/2011, 11h16	#2
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	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. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

28/05/2011, 16h07	#3
helpcomm Membre du Club Inscription : novembre 2007 Messages : 132 Détails du profil Informations forums : Inscription : novembre 2007 Messages : 132 Points : 44 Points : 44	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
	00

28/05/2011, 21h07	#5
helpcomm Membre du Club Inscription : novembre 2007 Messages : 132 Détails du profil Informations forums : Inscription : novembre 2007 Messages : 132 Points : 44 Points : 44	Salut, Vous avez raison, je me suis trompé. Merci
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email