Discussion :

[Samolo]

Bonjour,

Je vous explique mon problème, j'aimerais obtenir quelque chose comme ça:



qui se trouve être en fait un banal lien fait avec une image + un texte centré par rapport à l'image.
Mais voilà, mon texte se retrouve à coté de l'image mais en haut, donc pas centré.

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
 
/*mon css*/
.li_style{
display:inline;
list-style:none;
}
 
a{
color:#FFFFFF;
padding:8px 14px 8px 14px; /*permet d'aggrandir la zone cliquable*/
}
 
/*mon html*/
<ul class="tabs">
 
<li class="li_style">
<a href="#tab1" id="tab_1">
<img src="url" style="float:left; width:34px; height:34px;" />lien 1
</a>
</li>
 
<li class="li_style">
<a href="#tab2" id="tab_2">
<img src="url" style="float:left; width:34px; height:34px;" />lien 2
</a>
</li>
 
</ul>

Alors j'ai fait comme ceci pour plusieurs raison, comme actuellement je travaille avec JQuery, on m'a demandé de personnalisé des onglets mais voila j'ai utilisé JQuery UI et leur css m'apparaissant assez complexe pour un novice et vu qu'on ma imposé une charte graphique modifiant quasiment tout, j'ai préféré tout simplement me lancer dans la création de mes propres onglet en me basant sur un tuto du site disponible ici: http://pckult.developpez.com/tutorie...-onglets-web2/

Donc ci dessus c'est actuellement ce que je veux pour mes onglets, pourtant impossible de centré ce texte, j'ai essayé de posé des marges/changer la puce du li, j'ai même tenté en desespoir de cause à mettre l'image en background du li (mais bien que ça aurait marché je voulait que l'image soit cliquable mais aussi tenter d'avoir le moins de div ou span possible afin que le code puisse être assez simple parce que selon les situation je risque de devoir rajouté des onglets supplémentaire, et aussi parce que je compte le transformer en plug-in )

voila,j'ai besoin d'avis de professionnel éclairé
merci

[CCyrillus]

bonjour,

li : inline et img : float.

Ce n'est pas vraiment logique et inutile a mon avis .
'float' empêche d'appliquer un vertical-align a img .

test ceci plutot :

Code :

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

<img src="url" style="vertical-align:middle; width:34px; height:34px;" />

GC

[Samolo]

ça marche, mais je pensais que vertical-align était une propriété faites pour fonctionner sur du texte.

Et pour les inline c'est en fait pour aligner horizontalement tout mes li dans le ul

En tout cas merci pour ton aide