[résolu] Aligner trois boutons distribués sous tous les navigateurs

Bonjour à tous,

J'ai le soucis suivant : je voudrais aligner dans un bloc d'une certaine largeur 3 boutons de tailles différentes (à cause du texte qu'ils contiennent). Le problème c'est que selon les navigateurs, les boutons changent encore de taille.

Je me suis dit alors autant imbriquer chacun dans un div comme ceci :

<div id="buttonBar">
    <div id="btn1"><input type="button" class="boutonsDialMsg" id="zapBtn" value="ZAPPER" /></div>
    <div id="btn2"><input type="button" class="boutonsDialMsg" id="sendPicBtn" value="ENVOYER AVEC UNE PHOTO" /></div>
    <div id="btn3"> <input type="submit" class="boutonsDialMsg" id="sendBtn" value="ENVOYER" /></div>
</div>

Ma CSS :

#buttonBar{
	width:320px;
}

#btn1{
	float:left;
	text-align:left;
}

#btn2{
	float:right;
	text-align:center;
}

#btn3{
	float:right;
	text-align:right;
}

Je n'arrive pas à centrer ce satané bouton du milieu ! Quelqu'un pourrait-il m'aiguiller ?

Merci d'avance !!!
Modifié par littlewings (30 Sep 2007 - 19:03)

Salut,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Mikachu a écrit :
Salut,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

Merci pour ta réponse, j'ai édité mon message. J'avais tenté le bouton "code" mais celui-ci n'avait pas fonctionné, je ne sais pas pourquoi... En même temps j'aurais dû me douter que le bbcode passe ici, au temps pour moi...

Mikachu a écrit :

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

J'ai beau chercher, je ne vois pas ce lien... Si tu parles du lien "Règles", je les connais et je n'avais pas l'impression de ne pas les avoir respecté. De plus, même si je n'ai pas beaucoup posté je ne suis pas non plus "nouveau"... A moins que cet adjectif ne soit réservé à ceux qui ne sont pas venus depuis longtemps.

Bon, je pense qu'avec une entrée en matière pareille je ne serais pas plus aidé.

Libre à toi de supprimer ce sujet dès maintenant.
Modifié par littlewings (30 Sep 2007 - 17:54)

Bonjour littlewings,

Mikachu te rappelle simplement les règles de fonctionnement du forum et t'indique des pistes de recherche pour t'aider à trouver des solutions par toi même
C'est ce Lien qui apparait lorsque tu n'es pas connecté...
Concernant ton problème :

#buttonBar{
	width:320px; [#blue]Taille à modifier certainement[/#]
}

#btn1{
	[#red]float:right;[/#]
	text-align:left;
}

#btn2{
	float:right;
	text-align:center;
}

#btn3{
	float:right;
	text-align:right;
}

devrait régler ton soucis
Modifié par 6l20 (30 Sep 2007 - 18:37)

Merci beaucoup de ta réponse.
Tous les boutons se sont alignés vers la droite... mais bon, ce n'est pas grave j'ai résolu le problème par un bon vieux hack. C'est sale mais ça fera l'affaire en attendant.

Merci encore !

littlewings a écrit :
Merci beaucoup de ta réponse.
Tous les boutons se sont alignés vers la droite... mais bon, ce n'est pas grave j'ai résolu le problème par un bon vieux hack. C'est sale mais ça fera l'affaire en attendant.

Merci encore !

Ce n'est pas ce que tu voulais faire ?
Il doit suffire de positionner ta div "#buttonBar" ou tu le souhaites, tu peux également "floatter à gauche" de là à faire des "trucs sales" , peut-être même est-il possible de présenter ces boutons sous forme de menu en ligne (cf tuto d'Alsacreations) ?
Cela dépend de ce que tu veux faire...Une petite page en ligne ?

Mmm, non désolé c'est un site "fermé", je ne peux pas trop le montrer sous peine de me faire assassiner par mon client...

Par contre je te joins des screenshots. Je pense que malheureusement, pour le coup, le hack est inévitable car je suis embêté par la nature même du type "button", bien différent sous IE (une fois stylés, les boutons sont trop gros par rapport à la marge que j'ai pour les disposer).

Je pourrais également les remplacer par des images, mais là je voulais juste résoudre mon problème, ce que j'ai fait.

Voici ce que ça donne :

Sous Firefox :


Sous IE :