28172 sujets

CSS et mise en forme, CSS3

Apparence des liens

Bonjour,

pour une page, j'ai besoin d'avoir la meme apparence pour les liens que pour les input.submit
j'ai donc modifié la CSS de la sorte :

.bouton input {
	border: solid;
	border-style: outset;
	border-color: #006388;
	border-width: 1px;
	background-color: #006388;
	float: right;
	width: 81px;
	height: 25px;
	font-weight: bold;
	color: #ffffff;
}

.bouton a:link {
	border: solid;
	border-style: outset;
	border-color: #006388;
	border-width: 1px;
	background-color: #006388;
	float: right;
	width: 81px;
	height: 25px;
	font-weight: bold;
	color: #ffffff;
}
.bouton a:visited {
	border: solid;
	border-style: outset;
	border-color: #006388;
	border-width: 1px;
	background-color: #006388;
	float: right;
	width: 81px;
	height: 25px;
	font-weight: bold;
	color: #ffffff;
}
.bouton a:hover {
	border: solid;
	border-style: outset;
	border-color: #006388;
	border-width: 1px;
	background-color: #006388;
	float: right;
	width: 81px;
	height: 25px;
	font-weight: bold;
	color: #ffffff;
}
.bouton a:active {
	border: solid;
	border-style: outset;
	border-color: #006388;
	border-width: 1px;
	background-color: #006388;
	float: right;
	width: 81px;
	height: 25px;
	font-weight: bold;
	color: #ffffff;
}


html :

<div class="bouton">
        <input type="submit" name="ticket_valider" id="ticket_valider" value="Validate" class="bouton"/>			  	
</div>
<div class="bouton">
        <input  name="ticket_annuler" id="ticket_annuler" type="submit" value="Cancel" class="bouton">
</div>
<div class="bouton">
	<a href="mapage.html">Cancel</a> 
</div>

Par contre, le texte du lien s'affiche toujours en noir Smiley biggol
et sur IE j'ai bien la taille de 25pixels, mais sous Firefox elle fait 31px Smiley biggol

Avez vous une idée de ou peut venir le soucis ?

Merci
Salut sbbrnt et bienvenue Smiley cligne ,

alors pour commencer, l'un des gros avantages des css c'est qu'on n'est pas obligé de renseigner le style de chaque élément. On peut par exemple définir une class que l'on va ensuite affecter aux balises que l'on veut cibler (c'est ce que tu as commencé à faire avec .bouton)

Ensuite il est inutile de rajouter des <div> dans son code sauf si on a besoin d'un conteneur qui n'existe pas directement dans le html (comme <form>, <table>, etc...).

Pour avoir une chance d'uniformiser le rendu d'une page sur différents navigateurs, il faut utiliser un DOCTYPE valide. Est-ce le cas Smiley murf ?

Un petit exemple qui devrait se rapprocher de ce que tu cherches à obtenir :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
	font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
	font-size: .8em;
}
.bouton {
	color: #ffffff;
	border: solid;
	border-style: outset;
	border-color: #006388;
	border-width: 1px;
	background-color: #006388;
	float: right;
	width: 81px;
	height: 25px;
	font-weight: bold;
}
input.bouton {
	font-family: Georgia, Verdana, Arial, Helvetica, sans-serif; /* permet de redéfinir la police de la page qui est redéfinie par les navigateurs pour les <input> */
	cursor: pointer; 
}
a.bouton {
	text-decoration:none;
	line-height:23px;
	height:23px;
	text-align: center;
}
</style>
</head>
<body>
<form action="mapage.html" method="post">
<p>
	<input type="submit" name="ticket_valider" id="ticket_valider" value="Validate" class="bouton" />			  	
	<input  name="ticket_annuler" id="ticket_annuler" type="submit" value="Cancel" class="bouton" />
	<a class="bouton" href="mapage.html">Cancel</a> 
</p>
</form>
</div>
</body>
</html>

Et quelques liens utiles :
CSS : bases et indispensables
Les sélecteurs
Cascade CSS et priorité des sélecteurs
etc...

Bonne continuation Smiley smile !
Modifié par Heyoan (28 May 2008 - 18:00)
Salut,

Merci Heyoan, ta solution marche bien, en fait j'avais un conflit avec une autre feuille css ...
Par contre si je mets un DOCTYPE comme le tien, le resultat est correct sous FireFox mais par contre tout est décalé sur IE
Je me suis arraché les cheveux avant de comprendre que cela venait du doctype grrrrr Smiley biggol
Bonjour,

Styler des boutons de menu est difficile. Il peut y avoir des limites dans tel ou tel navigateur, les boutons de menu étant des éléments remplacés qui peuvent hériter tout ou partie de leur apparence d'éléments système (du navigateur, du système d'exploitation...). Il faudrait voir ce que ça donne avec Safari, par exemple, ça pourrait être surprenant.

Tu n'auras pas de mal à styler les liens, mais si telle ou telle instruction ne passe pas pour les boutons tu auras le bon style pour les liens mais pas pour les boutons. Donc pas le même rendu.

Une solution simple est de ne pas donner le même style aux boutons de formulaire et aux liens. Ces éléments ne servent pas à la même chose.
Sujet clos
Aller à