28172 sujets

CSS et mise en forme, CSS3

Styles sur balise button

Bonjour,

Je cherche à réaliser mes propres boutons avec la balise button et des images.
J'aimerai effectuer le même rendu qu'avec le lien adjacent.

le code xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bouton et lien </title>
<link rel="stylesheet" media="screen, projection" type="text/css" id="css" href="styles.css" />

</head>
<button type="submit" class="button"><span class="add">Ajouter</span></button>
<a href="#" class="button"><span span class="add">Ajouter<span></a>

<body>
</body>
</html>


et le fichier styles.css:


/* BUTTONS */
button{
    border:none;
    text-decoration:none;
    cursor:pointer;
	height: 30px;
	line-height: 30px;
}
button:hover{
    border:none;
}
button {
    overflow:visible;
}
a.button, button {
    background: transparent url('images/right.jpg') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 30px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}
a.button span, button span{
	text-indent:30px;
    display: block;
    line-height: 20px;
    padding: 5px 0 5px 18px;
} 
a.button span.add, button span.add{background: transparent url('images/add.jpg') no-repeat;}


Cela fonctionne sur IE (vu avec IE tab, add-on firefox), mais sur firefox j'ai un petit décalage de l'image d'1px vers le bas... et je n'arrive pas à résoudre cet inconvénient!!

Si quelqu'un a une solution...
D'avance merci!

Les images qui vont bien avec, à mettre dans un répertoire "images/" à la racine
upload/18324-add.jpg
upload/18324-right.jpg
je voulais juste rajouter un lien pour un aperçu en ligne:

http://www.weaving-web.fr/button/

A gauche avec la balise <button>, et à droite avec <a>
J'aimerai obtenir le même rendu avec <button> qu'avec <a>
Je reprécise que le problème apparait sous Firefox.

avant que je ne crie Help...! Smiley cligne
Salut,

D'abord, un petit rappel sur comment ne pas styler les éléments de formulaire ? :
a écrit :
les éléments de formulaire et autres éléments d'interaction (comme par exemple les scrollbars) sont propres aux navigateurs. En d'autre terme, il est fortement improbable d'arriver à les modifier selon une charte graphique rigoureuse, voire carrément impossible d'obtenir un rendu uniforme sur un panel de navigateurs uniquement par le biais du CSS. Ils ne gèrent qu'avec parcimonie et d'une manière qui leur est très personnelle les quelques éléments stylistiques modifiables.

Voilà, ça fait pas de mal Smiley smile . Ensuite, pour ton problème d'angles arrondis, je te conseille d'utiliser tout simplement la propriété CSS3 border-radius, comme ça :
a.button, button.button {
    border: 1px solid black;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
Ainsi, tes angles seront arrondis dans les navigateurs supportant cette propriété, à savoir aujourd'hui Firefox, Safari et Chrome, et carrés dans les autres, ce qui est tout à fait acceptable, je pense...
J’ai vu cette information qui m’a un peu inquiéter alors je voulais savoir si c’était véridique Smiley smile

a écrit :
La balise XHTML BUTTON ne fait plus partie du XHTML 2.0

Ici : Balise HTML ou XHTML BUTTON sur zonehtml


Je voulais savoir d’où sortait l’information ou du moins si l’information était vrai ?
Salut,

OniriX a écrit :
J’ai vu cette information qui m’a un peu inquiéter alors je voulais savoir si c’était véridique Smiley smile
Cet élément n'est effectivement pas dans la liste mais on s'en fiche un peu puisqu'on sait déjà qu'il ne sera pas rétrocompatible avec xhtml 1.

La bonne nouvelle c'est qu'il y a de grandes chances pour que tu utilises plutôt (X)HTML 5 ! Smiley smile

Pour y voir un peu plus clair lire ce sujet.


Edit: au passage ce n'est pas parce que le titre de ce topic comporte le mot button que ta question a sa place ici... la prochaine fois crées ton propre sujet.
Modifié par Heyoan (01 May 2009 - 03:21)
Sujet clos
Aller à