Affecter un code CSS à un bouton submit

Version imprimable

Bonjour,
J'ai ajouté dans ma page HTML un bouton de type submit que j'ai stylé avec un petit code CSS. mais à l'afichage rien ne se passe. C'est comme i le code CSS n'est pas vu par ma page HTML.
Je crois que je référencie mal le bouton et c'est pour cette raison qu'il ne voix pas la feuille de style (Mon fichier est corectement placé car je l'utilise pour d'autre section de ma pahe web et ça fonctionne).

voici mon code html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="header"></div>
 
<div class="wrap">
 
  <ul class="menu">
    blablabla
  </ul>
 
  <ul class="disconnect">
    <p class="log_out"> 
       <input type="submit" id="leave" value="Log out"/> 
    </p>
  </ul>
 
</div>

et voici le code CSS relatif au bouton "log out"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/* bouton de deconnexion*/
.log_out  p.button input{
	width: 30%;
	cursor: pointer;	
	background: #FF9900;
	padding: 8px 5px;
	font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
	color: #fff;
	font-size: 24px;	
	border: 1px solid #FF9900;	
	margin-bottom: 10px;	
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;	
	-webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
	   -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
	        box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
	-webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	     -o-transition: all 0.2s linear;
	        transition: all 0.2s linear;
}
.log_out p.button input:hover{
	background: #FFCC00;
        border: 1px solid #FFCC00;
-webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
	   -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
	        box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}
.log_out p.button input:active,
.log_out p.button input:focus{
	background: rgb(40, 137, 154);
	position: relative;
	top: 1px;
	border: 1px solid rgb(12, 76, 87);	
 
}
p.leave{
	text-align: right;
	margin: 5px 0;
}

comment corriger ce problème?
Merci

28/05/2013, 11h35
Bovino

:f1:

Recherche comment affecter un style à un élément selon son id et évite de le déclarer selon une classe...
28/05/2013, 11h39
Torgar

Pourquoi tu utilises pas directement le sélecteur : #leave ?

Vu qu'un ID est unique tu peux taper directement dessus sans problème.
28/05/2013, 12h04
supcomingenieur

Merci Torgar pour votre conseil, je l'ai suivi et c'est vrai que ça fonctionne. le seul ennui est que le bouton n'est pas vraiment intégré dans la barre "Disconnect" c'est décalé e je ne veux pas le positionner manuellement.
est ce qu'il y'a un moyen de référencer le bouton non seulement par son id mais par son container "Disconnect"?
28/05/2013, 12h13
Torgar
Sans voir le dit décalage, je ne te serais d'aucune aide j'en ai bien peur.

Au passage, ça, ça ne fonctionnera jamais :
Code:

1 2 3 4 p.leave{ text-align: right; margin: 5px 0; }
Tu définis un ID dans ton HTML et tu mets une classe dans le sélecteur.
28/05/2013, 12h24
supcomingenieur

1 pièce(s) jointe(s)

je t'ai mis un imprim_ecran de mon interface graphique pour que tu puisse voir le décalage du bouton "log out" par rapport à la barre horizontale (en leu claire)

merci Pièce jointe 119553
28/05/2013, 12h39
Torgar
Hééé !!! Mais j'avais pas vu !!!
Code:

1 2 3 4 5 6 7 8 9 <ul class="menu"> blablabla </ul> <ul class="disconnect"> <p class="log_out"> <input type="submit" id="leave" value="Log out"/> </p> </ul>
C'est quoi ça ? Depuis quand on fait comme ça en HTML ?
Soit tu fais de vraies listes et auquel cas tu encadres dans des <li></li> soit t'en fait pas et tu encadres dans des <div></div>.

Tu me laisse pas des <ul></ul> comme ça !

Ensuite, tu dois avoir un margin-top quelque part. Cherche avec firebug.

Il faut apprendre et sérieusement. Ça commence à être trop répétitif !
28/05/2013, 12h46
supcomingenieur

Bien sur que j'ai utilisé des li (c'est un menu en accordion) mais je n'ai pas posté tout le code html car c'est long