Discussion :

[BnA]

Bonjour à tous!

Voici le problème qui m'occupe.

J'ai conçu une sorte de 'clavier virtuel' pour les utilisateurs de la plateforme d'apprentissage pour laquelle je travaille.

Ce clavier virtuel ne comporte que les caractères spéciaux, langue par langue. Par exemple, en espagnol, il y a 8 caractères spéciaux, alors qu'en français, il y en a 13.

Le tout est géré dynamiquement, mais peu importe.

J'ai une <div id="vKeyboard"> qui est destinée à recevoir chacune des lettres (affichées sous forme d'un pseudo-bouton, en fait une balise <a> stylée par CSS).

Voici les codes:

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
 
<div id="vKeyboard">
    <a href="javascript:sendLetter('â');">â</a> 
    <a href="javascript:sendLetter('à');">à</a>
    <a href="javascript:sendLetter('ç');">ç</a> 
    <a href="javascript:sendLetter('é');">é</a> 
    <a href="javascript:sendLetter('è');">è</a> 
    <a href="javascript:sendLetter('ê');">ê</a> 
    <a href="javascript:sendLetter('ë');">ë</a> 
    <a href="javascript:sendLetter('î');">î</a> 
    <a href="javascript:sendLetter('ï');">ï</a> 
    <a href="javascript:sendLetter('ô');">ô</a> 
    <a href="javascript:sendLetter('û');">û</a> 
    <a href="javascript:sendLetter('ü');">ü</a> 
    <a href="javascript:sendLetter('ù');">ù</a> 
</div>

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
#vKeyboard{
		text-align:center;
		margin-top:10px;
		border:1px solid #af0024;
		padding: 5px;
		height:30px;
		padding-left:auto;
		padding-right:auto;
	}
 
	#vKeyboard a{
		color: white;
		background-color: #036793;
		text-decoration: none;
		font-weight: bold;
		text-align: center;
		padding: 5px;
		border: 2px outset #c0c0c0;
		width:25px;
		display:block;
		float:left;
	}
 
	#vKeyboard a:hover{
		background-color: #73a9c3;
		border: 2px inset #c0c0c0;
	}

Je ne mets pas le javascript, puisque c'est un soucis d'affichage uniquement.

Donc, ma <div> prend toute la largeur disponible, et les éléments <a> qu'elle contient sont bien côte-à-côte. Seulement, ce 'paquet' de <a> est aligné à sur la gauche de ma <div> (cf. image), alors que j'aimerais le voir centré.

Affiché


Attendu


Attendu, avec moins d'éléments


Quelqu'un aurait-il une solution pour mon problème?

Merci d'avance!

[Erwan31]

Bonjour,
pour réaliser ce genre de chose sans difficulté, il faudrait que tes liens ne soient pas rendu en boîte de bloc (via un float:left) mais inline.
Pour les centrer il te suffit d'ajouter un text-align:center au div qui les englobe.

[BnA]

Oui bien entendu, mais dans ce cas, je ne peux pas fixer une largeur identique à tous mes <a>. Ceux-ci prennent une largeur par défaut due à leurs contenus respectifs.

Et par souci de lisibilité, je préfèrerai grandement que mes <a> aient tous la même largeur (d'où le display:block)

[c_s_s]

Bonjour,

Une astuce consisterait à suppirmer display:block et float:left des tes liens (#vKeyboard a), et à jouer sur le padding pour obtenir la taille désirée.

Dans ce cas, text-align:center et width:25px ne seraient plus utiles non plus sur les liens.

A toi de voir si le rendu te convient de cette façon.


Edit : autant pour moi, je n'avais pas pris en compte la largeur variable des liens en fonction du texte affiché.

[Erwan31]

Et par souci de lisibilité, je préfèrerai grandement que mes <a> aient tous la même largeur (d'où le display:block)

Pour commencer tu n'as pas besoin d'ajouter de display:block puisque le float génère une boîte de bloc de manière transparente (tout commme position:absolute)
Ensuite la seule solution possible que je vois si tu ne connais à l'avance le nombre de lien est d'attribuer dynamiquement une largeur un bloc qui contiendrait les liens et centré via des marge auto.

[BnA]

Bonjour,

Une astuce consisterait à suppirmer display:block et float:left des tes liens (#vKeyboard a), et à jouer sur le padding pour obtenir la taille désirée.

Dans ce cas, text-align:center et width:25px ne seraient plus utiles non plus sur les liens.

A toi de voir si le rendu te convient de cette façon.


Edit : autant pour moi, je n'avais pas pris en compte la largeur variable des liens en fonction du texte affiché.

J'ai mis une police à largeur fixe (le bête et moche Courier New), ça suffit pour l'instant.

Pour le reste, ça se centre effectivement (j'avais déjà utilisé cette méthode, mais avec une police à largeur variable, les "blocs" <a> étaient de largeurs différentes).

Merci, mais une solution fonctionnelle malgré une police à largeur variable serait l'idéal!

[Erwan31]

Oups je me rend compte que j'ai oublié la solution du display:inline-block

La solution:

Code :

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

1
2
3
4
5
<div><span style="display:inline-block;">
    <a href="javascript:sendLetter('â');">â</a> 
    ...
</span>
</div>

[BnA]

Oups je me rend compte que j'ai oublié la solution du display:inline-block

La solution:

Code :

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

1
2
3
4
5
<div><span style="display:inline-block;">
    <a href="javascript:sendLetter('â');">â</a> 
    ...
</span>
</div>

Oui, j'y ai également pensé, mais le support du inline-block par IE et par FF2 laisse plus qu'à désirer non?

[Erwan31]

Oui, j'y ai également pensé, mais le support du inline-block par IE et par FF2 laisse plus qu'à désirer non?

Il est bugué sous IE et en effet non implémenté par Firefox2- mais tu as la
solution alternative du display: -moz-inline-stack; pour Firefox 2- (avec l'ajout d'un span supplémentaire
pour encadrer les liens + la suppression du float:left) et pour IE voir la solution ici

[BnA]

Il est bugué sous IE et en effet non implémenté par Firefox2- mais tu as la
solution alternative du display: -moz-inline-stack; pour Firefox 2- (avec l'ajout d'un span supplémentaire
pour encadrer les liens + la suppression du float:left) et pour IE voir la solution ici

Oui effectivement, je me suis retrouvé sur ce site dans mes recherches.

Tout semble OK, je n'ai plus qu'à vérifier l'affichage sur les différents navigateurs, et mon problème est résolu.

Un grand merci!