Centrer verticalement dans un select

Bonjour;


Pouvez-vous m'aider ?
Je souhaiterais que mes textes d'options (dans mes select) soient centrés verticalement,
car par défaut, elles sont visibles en bas.

Voici les CSS,

#categorie00 {
	margin: 1px;
	height: 18px;
	font-size: 11px;
	width: 286px;
}

Voici une partie de mon code HTML,

...
<tr>
  <td>Catégorie 00</td>
  <td colspan="3">
      <select name="categorie00" id="categorie00" class="<? echo ($_POST['categorie00']=="XX")?'valable':'valable'; ?>">
      <option value="XX">ici</option>
      <option <? if ($_POST['categorie00'] == "BE") echo "SELECTED"; ?> value="BE">BE</option>
      <option <? if ($_POST['categorie00'] == "FR") echo "SELECTED"; ?> value="FR">FR</option>
      <option <? if ($_POST['categorie00'] == "NC") echo "SELECTED"; ?> value="NC">--</option>
      </select></td>
</tr>
...

Croyez-moi, c'est pas force d'avoir essayé avec des classes !
Mais je n'y arrive pas. A l'aide !

Apparemment, le problème viendrait du fait
que font-size de 11px soit trop élevé (par défaut) pour une max-height de 18px !
Avez-vous une piste, une idée pour me débloquer ?
J'ai même essayé de "jouer" avec line-height, rien n'y fait !!!
C'est un mystère !!!

Merci d'avance.
Modifié par jytest (15 Jul 2011 - 11:31)

Bonsoir à toutes et à tous,

pour centrer du texte verticalement dans une cellule d'un tableau, tu fais :

vertical-align : middle;

Voici un lien qui détaillera l'usage du vertical-align.

@+
Modifié par Artemus24 (15 Jul 2011 - 01:46)

Bonjour,

ce n'est pas cela mon problème.
Merci quand même...

Je n'ai pas besoin de centrer verticalement mon select dans un tableau.
Mais c'est plutôt que le texte soit centré verticalement à l'intérieur même du select...

D'avance merci

Bonjour à toutes et à tous,

je ne comprends pas très bien ce que vous voulez centrer verticalement en tant que texte dans la partie option ?

J'ai repris l'exemple ci-dessus, mais je n'ai pas retrouvé l'erreur que vous avez indiqué. Chez moi, tout parait normal !

En fait, un select vous donner sous la forme d'une liste toutes les options que vous avez choisi d'y mettre. La hauteur de l'option est en fait la hauteur du texte qui s'y trouve. Donc à moins de totalement me tromper, on ne peut pas centrer verticalement car il n'y a pas la place pour le faire.

Si vous voulez réduire en hauteur le texte ou les dimensions de la partie option, en CSS faite :

option { height : 11px; }

Votre exemple n'est pas assez explicite pour que je puisse vous donner une solution. Le mieux serait de nous donner un lien vers votre site avec l'erreur en question. Il se peut que l'erreur ne vienne pas de ce bout de code mais d'ailleurs.

@+
Modifié par Artemus24 (15 Jul 2011 - 20:39)

Tu ne peux pas appliquer de centrage vertical sur un select, par contre tu peux supprimer la propriété height et remplacer par du padding vertical afin d'obtenir la taille que tu veux (hauteur du text + padding = la hauteur que tu veux). En repartissant le padding en haut et en bas tu obtiendra un select de la hauteur que tu veux avec le texte centré verticalement.

select {
font-size: 12px;
padding: 10px 0;
}

Donne un select de 12px + 2x 10px = 32px avec le texte centré verticalement.

Bonsoir,


Concernant mon souci,
mon autre ami google me dit que le font-size et height des select
sont (automatiquement) gérés et affichés par les navigateurs !!!
Rien en CSS ne peut modifier ce comportement !!!

La solution proposée est l'emploi explosé d'une listbox (select).
C'est-à-dire en n'utilisant plus directement la select du html,
mais plutôt en employant :
une zone texte (partie gauche d'une select), suivie par un image (=flèche)
Et dès que l'on clique ou sur la flèche ou sur la zone texte,
je souhaiterais une liste déroulante à 5 lignes s'ouvre,
avec éventuellement un scroll vertical, si il y a plus de 5 options...

Il m'est conseillé d'employer
une div avec overflow-y et une height fixe...

Vu la complexité de ce subterfuge,
je ne peux que solliciter votre aide...

D'avance merci !
Modifié par jytest (21 Jul 2011 - 11:28)

T'as le droit de lire les réponses qu'on te donne...

J'avais bien sûr essayé ta solution (sous Firefox).
Et cela ne fonctionne pas !!! Pourquoi ???
Vois-tu comment résoudre mon problème autrement
que par ma solution trouvée sur google ?
Modifié par jytest (21 Jul 2011 - 11:29)

Je t'ai donné une solution qui fonctionne, teste la !

Merci jb_gfx.
Je viens de mettre le select dans "data.css".

J'ai un impératif de taille : font-size 11 px, pour être identique aux intitulés à gauche.
Je n'y arrive pas avec les padding !

Peux-tu m'aider ?
Aide-moi, stp.
Modifié par jytest (21 Jul 2011 - 11:29)

Bonsoir à toutes et à tous,

j'ai compris ton problème d'alignement vertical !

En fait, ton problème est que tu désires mettre dix select dans un espace vertical qui ne peut pas en contenir dix, et du coup tu as essayé de compresse la hauteur de chaque select en la réduisant, et en changeant la taille de la police de caractères, d'où ton problème du texte dans la fenêtre du select qui est décalé vers le bas.

A vrai dire, je n'ai pas pu remonter le texte dans la petite fenêtre du select.

Mais en admettant que tu puisses le faire (????), un autre problème va subsister ? Ton texte est trop petit pour être correctement lisible.

Je te conseil de changer la présentation en faisant en sorte de mettre deux select par ligne et sans modifier la hauteur normal de ton select, et le problème sera résolu.

Cela va nécessiter de revoir la largeur de ton conteneur de fond gris si cela est nécessaire.

@+
Modifié par Artemus24 (16 Jul 2011 - 00:48)

Tout d'abord, un grand merci...

Mon problème est aussi
la nécessité de mettre la font-size impérativement à 11px
(pour une lecture aisée à l'écran).

D'où peut-être une piste par l'emploi explosé d'une listbox (select).
C'est-à-dire en n'utilisant plus directement la select du html,
mais plutôt en employant :

une zone texte (partie gauche d'une select), suivie par un image (=flèche)
Et dès que l'on clique ou sur la flèche ou sur la zone texte,
je souhaiterais une liste déroulante à 5 lignes s'ouvre,
avec éventuellement un scroll vertical, si il y a plus de 5 options...

Et d'employer donc des div avec overflow-y et une height fixe...

Vu la complexité de ce subterfuge, je ne peux que solliciter votre aide...
Merci d'avance.
Modifié par jytest (16 Jul 2011 - 10:36)

Bonjour à toutes et à tous,

les solutions qui sont à ta disposition sont :

1) la solution que tu nous indiques juste au-dessus de ce post est, je pense à ton niveau, d'une complexité que tu ne sauras pas résoudre. Alors passez d'une usine à gaz à une autre usine à gaz n'est pas la solution. Il faut rester simple !

2) tu conserves tes dix catégories.
Tu supprimes dans "data.css" pour categorie00 ... categorie09, margin et height qui n'ont plus lien d'être.

Et tu agrandis ton image de fond. Est-ce que tu sais augmenter les dimensions de ton image de fond ?

3) tu supprimes 1 catégorie et tu as la place nécessaire pour tes neuf select.
Tu supprimes dans "data.css" pour categorie00 ... categorie08, margin et height qui n'ont plus lien d'être.

Et le tout est joué.

Lorsque tu as un problème de cette nature, au lieu de chercher à le résoudre, essaye de changer la présentation de ta page HTML. C'est bien moins compliqué à mettre en œuvre.

@+
Modifié par Artemus24 (16 Jul 2011 - 19:19)

Si je puis me permettre je te suggère de mettre "Maintenance boutique" en texte en jouant sur les lineheight tu peux faire chevaucher les textes et non en image avec une div conteneur pour ce texte et le formulaire , tu inclus tes deux images dedans que tu positionnes une en haut gauche et une en bas droit , ainsi si ton formulaire s'agrandit les mains suivront.

Au passage mets tes td en vertical-align : baseline. c'est vraiment plus esthétique quand le bas des textes sont alignés.

Merci pour vos suggestions.

J'ai absolument besoin de ces 10 catégories.
Et par respect pour la charte graphique, je ne peux pas modifier l'image de fond avec les 2 mains.
L'emplacement de cette image est par ailleurs "bloqué" aussi pour les mêmes raisons.

Désolés de vous décevoir... Mais
"c'est en forgeant que l'on devient forgeron !"

Oui pour mettre "Maintenance boutique" en texte,
(et non plus en image), mais comment faire pour être sûr que l'utilisateur
ait "cette" police (non standard) installée sur son pc/mac/iphone ?

Je vais m'atteler à réaliser ma solution
<input> <flèche> <select>...
L'expérience n'en sera que plus profitable !

Ou il reste encore la solution "javascript"
pour pallier à mes soucis !

Laquelle choisir ? Comment faire ?
Si vous avez des pistes, n'hésitez pas.
Votre aide me sera très précieuse.
Modifié par jytest (17 Jul 2011 - 09:39)

Elle est bien gentille ta charte graphique si tu ne peux pas mettre correctement ton formulaire dedans de façon ergonomique et plaisante ... La valeur par défaut ( height) des éléments select et td donne une liste aérée et plaisante.
Restreindre la hauteur donne un formulaire ramassé et pas agréable du tout.
Et j'imagine même pas les dégâts avec une taille de police minimale imposée par l'utilisateur ... cas très fréquent avec la taille de police choisie : vraiment trop petite pour beaucoup d'utilisateurs.

Franchement ce qui coince c'est l'habillage du formulaire, pas le formulaire en lui-même ( à part le tableau avec plein de lignes inutiles apparemment, sauf si cela sert pour un autre formulaire )

Pour la police tu as les @font-face qui permettent de fournir la police aux ordinateurs qui n'en ont pas

Sinon pour le formulaire si vraiment la hauteur t'est imposée tu peux jouer avec les overflow pour générer une barre de scrolling verticale