28111 sujets

CSS et mise en forme, CSS3

Reset "<button>", "<a>", "input[t

Bonjour,

Je dois réaliser des boutons (valider / modifier / supprimer) qui seront soit des liens, soit des inputs (submit) ou encore des buttons.
Je n'arrive pas à donner le même rendu à ces 3 éléments html ... surtout avec l'élément "button".
Y at'il un reset possible ?

Merci pour votre aide

Raphael.
Bonjour,

En fixant en CSS les attribut background-color, border, padding, etc. vous devriez pouvoir obtenir le même rendu pour tous ces élements. Par exemple:


a, input[type="submit"], input[type="button"] { 
  background-color: #fff; 
  color: #00f; 
  border: #00f 2px solid; 
  padding: 5px; 
  cursor: pointer;
}


Sinon en mettant une classe commune à ces élément, vous obtiendrez le même résultat.

Je ne comprend pas trop votre question concernant le reset..
Bonjour,

@Romain.E > j'ai testé, ça fonctionne, mais il y a un petit problème d'affichage sous Firefox 5 (<5 je ne sais pas). La hauteur de la balise < a> est inférieure aux autres éléments 'input' et 'button'.
Je ne suis pas encore arrivé à trouver la parade ...

Voici pour tester :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>liens - inputs - buttons identiques</title>
<style type="text/css">
body {
	background:#000
}
a, input[type="submit"], input[type="button"], button {
    background-color: #fff;
    color: #00f;
    border: #00f 2px solid;
    padding: 5px;
    cursor: pointer;
	font:bold 14px arial,verdana,helvetica;
	width:150px;
}
a {
	text-decoration:none;
	display:inline-block;
	height:16px;
	text-align:center;
	vertical-align:top;
}
a:hover, input[type="submit"]:hover, input[type="button"]:hover, button:hover {
	background:#ffcc00;
	color:#fff;
}
</style>
</head>
<body>
<form action="#" id="formu">
	<input type="submit" value="Valider" onclick="javascript:;"> 
	<input type="button" value="Modifier" onclick="javascript:;"> 
	<input type="button" value="Supprimer" onclick="javascript:;">
	<button type="button" onclick="javascript:;">Button</button>	
	<a href="#">Balise "a"</a>
</form>
</body>
</html>

A+
A priori, la solution la plus propre que je vois pour être sur que tout soit de la même hauteur, est de la fixer en pixel.
Par contre le décalage sous FF viens du fait que le padding et les marges ne sont pas prises en compte dans le calcul total de la hauteur. Il faut donc les enlever pour le "width" et le "height" des liens


a, input[type="submit"], input[type="button"], button { 
	background-color: #fff; 
	color: #00f; 
	border: #00f 2px solid; 
	padding: 5px; 
	cursor: pointer; 
	font:bold 14px arial,verdana,helvetica; 
	width:150px; 
	height:50px;
} 
a { 
	text-decoration:none; 
	display:inline-block; 
	text-align:center; 
	vertical-align:top;
	height:36px;
	line-height:36px;
	width:136px;
}


Chez moi l'affichage est bon sous FF, Chrome et IE.
@Romain.E > J'avais pourtant essayé avec height, mais en vain. Peut-être est-ce parce que je n'avais pas mis de line-height.
En tout cas, maintenant ça fonctionne nickel! Reste à voir sur Safari et Opera...
Merci!
Super, ça marche aussi pour moi !!
Je ne comprenais effectivement pas la différence hauteur entre l'élément <button> et <a>.

Merci !!
Sujet clos
Aller à