Discussion :

[supcomingenieur]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Bovino]

Recherche comment affecter un style à un élément selon son id et évite de le déclarer selon une classe...

[Torgar]

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

Vu qu'un ID est unique tu peux taper directement dessus sans problème.

[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"?

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[supcomingenieur]

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

[Torgar]

Hééé !!! Mais j'avais pas vu !!!

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[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