Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Alignez des boutons

6 réponses
Avatar
unbewusst.sein
J'ai deux classes de boutons "normal" et "tiny" et je souhaiterais les
aligner, j'ai essayer de mettre les tiny dans un span et ajouter margin
et/ou padding, pas d'effet...

Ce que j'ai :
<http://cjoint.com/11oc/AJconf21Gv5_actuel.JPG>
Ce que je souhaite :
<http://cjoint.com/11oc/AJconPCnsiz_voulu.jpg>
soit 3px plus haut

Ma page d'essai (non fonctionnelle) :
<http://studio.quatorze.free.fr/buttons/imageless-css-buttons-mvc.html>

--
« La gloire n'est pas de ne jamais tomber, mais de
se relever chaque fois que l'on tombe. »
(Proverbe chinois)

6 réponses

Avatar
grenault
Le 02/10/2011 14:19, Une Bévue a écrit :
J'ai deux classes de boutons "normal" et "tiny" et je souhaiterais les
aligner, j'ai essayer de mettre les tiny dans un span et ajouter margin
et/ou padding, pas d'effet...

Ce que j'ai :
<http://cjoint.com/11oc/AJconf21Gv5_actuel.JPG>
Ce que je souhaite :
<http://cjoint.com/11oc/AJconPCnsiz_voulu.jpg>
soit 3px plus haut

Ma page d'essai (non fonctionnelle) :
<http://studio.quatorze.free.fr/buttons/imageless-css-buttons-mvc.html>




Oui. Moi je les mets dans un div et ensuite il faut jouer sur les
largeurs. On y arrive avec un peu de patience...

--
http://www.grenault.net/trucs-et-astuces.htm
Avatar
unbewusst.sein
grenault wrote:

Oui. Moi je les mets dans un div et ensuite il faut jouer sur les
largeurs. On y arrive avec un peu de patience...



OK, merci.


--
« La gloire n'est pas de ne jamais tomber, mais de
se relever chaque fois que l'on tombe. »
(Proverbe chinois)
Avatar
Y.D.
Le 02/10/2011 14:19, Une Bévue a écrit :
J'ai deux classes de boutons "normal" et "tiny" et je souhaiterais les
aligner[...]



Et en ajoutant dans les css, pour tous les boutons (mais surtout
le plus grand) :

vertical-align: middle;

--
Y.D.
Avatar
unbewusst.sein
grenault wrote:


Oui. Moi je les mets dans un div et ensuite il faut jouer sur les
largeurs. On y arrive avec un peu de patience...



Bon j'y suis parvenu :
<http://cjoint.com/11oc/AJcttYZUQqB_detail.png>

tout simplement en jouant sur le padding car les boutons n'ont pas la
même hauteur de caractère.

ce que je ne comprends pas, basiquement, c'est la position d'une div
imbriquée dans une autre...
margin et padding peuvent déborder de la div contenante ?
--
« La gloire n'est pas de ne jamais tomber, mais de
se relever chaque fois que l'on tombe. »
(Proverbe chinois)
Avatar
unbewusst.sein
Y.D. wrote:

Et en ajoutant dans les css, pour tous les boutons (mais surtout
le plus grand) :

vertical-align: middle;



ben dans la div contenante, les gros boutons sont bien centrés
verticalement.
le problème est que la ligne de base du texte est la même et d'un côté
j'ai :
font-size:1.0em; (gros bouton)
de l'autre :
font-size:0.5em; (petit bouton)

j'y suis parvenu en trichant sur le padding :
padding: 0px 6px 3px 6px; (gros bouton)
padding: 8px 1px 4px 1px; (petit bouton)

du coup ils ont la même hauteur, ce qui ne me gène pas : je souhaite
qu'ils soient étroits car j'ai peu de place en largeur.

mais j'essaie le vertical-align.


--
« La gloire n'est pas de ne jamais tomber, mais de
se relever chaque fois que l'on tombe. »
(Proverbe chinois)
Avatar
unbewusst.sein
Y.D. wrote:

Et en ajoutant dans les css, pour tous les boutons (mais surtout
le plus grand) :

vertical-align: middle;



Super, merci beaucoup !!!
<http://cjoint.com/11oc/AJctKebuR6T_vertical-align--middle.png>

--
« La gloire n'est pas de ne jamais tomber, mais de
se relever chaque fois que l'on tombe. »
(Proverbe chinois)