28172 sujets

CSS et mise en forme, CSS3

Aligner un bouton et un lien sur la meme ligne et centré

hello,

Je voudrais faire truc de ce genre centré sur une page

http://www.gaiaservice.fr/snapshot1.png

le premier bouton étant un bouton de formulaire et le second, un simple lien

actuellement, j'ai un truc comme ca (qui n'est pas conforme, pas de <a> dans un <button>)

<div style="text-align: center;">
  <button type="submit" class="form_bouton">Valider</button>
  <button type="button" class="bouton"><a href="#">Retour à la liste des aspects</a></button>
</div>


.bouton {
	background: url("../images/fond_bouton.png");
	background-color: #D1D1D1;
	background-repeat: repeat-x;
	border: solid 1px #838383;
	-moz-border-radius : 5px 5px; 
	height: 20px;
	cursor:pointer;
	margin-left: 10px;
	font-size:11px;
	line-height: 20px;
}


.bouton a {
	display: block;
	text-decoration: none;
	color: #606060;
	text-align: center;
	cursor:pointer;
	font-size:11px;
}


ca marche dans la mesure ou ca s'affiche correctement mais le lien ne fonctionne pas (normal). Je pense qu'il doit y avoir une solution sans utiliser de tableau ni javascript

Si qq1 a une idée, je suis preneur Smiley smile
Bonjour,

Pourquoi faire compliqué quand on peut faire simple, hum?
<p class="form-send">
  <button type="submit">Valider</button>
  <a href="#">Retour à la liste des machins</a>
</p>

.form-send {
  margin: 0;
  text-align: center;
}
.form-send button, .form-send a {
  vertical-align: middle;
  margin: 0 6px;
  padding: 5px 12px;
  border: solid 1px #838383;
  -moz-border-radius : 5px 5px;
  -webkit-border-radius : 5px 5px; /* soyons complet... */
  border-radius : 5px 5px; /* pour le futur */
  font-size: 100%; /* éventuellement nécessaire pour le button, à supprimer sinon */
  line-height: 1;
  background: #D1D1D1 url(fond_bouton.png) repeat-x;
  cursor: pointer;
}

Peut-être à perfectionner...

Remarques en passant:
- Les hauteurs fixes c'est pour les faibles.
- Les tailles de texte en pixels aussi.
- Le padding c'est bon, mangez-en. Les line-height excessifs, c'est marrant deux secondes, mais pas tant que ça.
- Il se peut que du display:inline-block soit indiqué ici pour le A, voire pour le A et pour le BUTTON. Le souci c'est qu'il y a quelques subtilités sur le support d'inline-block (cf. Firefox 2, IE6 et 7).
- Pour ma part je mets en forme les liens de navigation comme des liens, et les boutons qui envoient des données comme des boutons. On trouve dans de nombreuses interfaces web des lignes en fin de formulaire qui disent « [Envoyer ces informations] ou bien revenir à la liste ». Ce n'est pas forcément parfait, mais ça peut être intéressant de distinguer validation de formulaire et liens de navigation autrement que par la couleur.
Sujet clos
Aller à