Problème css et lien

Version imprimable

Bonjour je développe un site web en asp.net et dedans j'ai des liens de ce genre

Code:

<a href="Default.aspx" class="menucompte" runat="server">Mon compte</a>

Voici le code css correspondant
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .menucompte { position : relative; top : -140%; width : 100px; display : inline; left: 19%; height : 33px; color : White; font-size : 5px; font-family : Sans-Serif; font-weight : bold; text-decoration : none; border-left: 1px solid black; padding-left: 7px; }
Mon problème c'est que le lien prend la taille en fonction de la taille de la police et non des valeurs que j'ai mis dans height et width ...
Deuxièmement lorsque je met ceci
Code:

1 2 3 4 .a:hover { background-image : url("..\images\changementmenu.jpg"); }
Lorsque je survole le lien avec ma souris sa ne marche pas il ne change pas d'image de fond , d'avance merci pour les réponses.

23/01/2011, 22h33
ornitho13

Salut,

concernant le survol, cela ne peut pas marcher car tu as mis un point devant le "a" (valable pour les class mais pas pour les tags html).

Concernant le respect des tailles, regarde si cela ne vient pas de ton "padding" (width calculé = width + padding-left + padding-right)
23/01/2011, 23h24
Candygirl
Hello,
Citation:
Envoyé par hugo7

Code:

1 2 3 4 5 6 .menucompte { width : 100px; display : inline; height : 33px; }
Les propriétés width et height ne s'appliquent pas à un élément inline.
24/01/2011, 21h17
hugo7

réponse

Merci pour les réponses , même si j'enlève

Code:

display : inline;

cela ne marche pas , sinon pour l'histoire du padding j'ai pas tous compris ^^ .
Et pour le survol j'ai enlevé le . devant le "a" et cela ne marche pas non plus .
D'avance merci
25/01/2011, 13h32
Candygirl

Citation:

Envoyé par hugo7

Merci pour les réponses , même si j'enlève

Code:

display : inline;

cela ne marche pas

Oui, parce que, par défaut, l'élément a est déjà un élément de type inline ;)
Si tu le passe en block (display:block), par exemple, tu verras ton hight et width appliqués. Cela aura d'autres implications qui risquent de nuire à ta mise en page, à voir ce que tu souhaites obtenir pour choisir la meilleure option...

réponse

Merci cela marche mais j'ai un autre problème :
En pleine écran mon menu et comme je le veux mais lorsque je réduit la fenêtre du navigateur c'est le "bordel" , les liens ne sont plus au bon endroits les un sur les autres ...

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
.menucompte
{
 
   position : relative;
   display : block;
   padding-top : 9px;
   text-align : center;
   top : -175%;
   width : 100px;
   left: 22%;
   height : 23px;
   color : White;
   font-size : 5px;
   font-family : Sans-Serif;
   font-weight : bold;
   text-decoration : none;
   border-left: 1px solid black;
   padding-left : 3px;
    }   
.menudownload   
{
 
   position : relative;
   display : block;
   padding-top : 9px;
   text-align : center;
   top : -272%;
   width : 123px;
   left: 30%;
   height : 23px;
   color : White;
   font-size : 5px;
   font-family : Sans-Serif;
   font-weight : bold;
   text-decoration : none;
   border-left: 1px solid black;
 
 
}  
.menuressources
{
 
   position : relative;
   display : block;
   padding-top : 9px;
   text-align : center;
   top : -369%;
   width : 100px;
   left: 39.7%;
   height : 23px;
   color : White;
   font-size : 5px;
   font-family : Sans-Serif;
   font-weight : bold;
   text-decoration : none;
   border-left: 1px solid black;
   padding-left : 1px;
   border-right: 1px solid black;
}  
 
.menudeconnexion
{
 
   position : relative;
   display : block;
   padding-top : 9px;
   text-align : center;
   top : -466%;
   width : 100px;
   left: 73%;
   height : 23px;
   color : White;
   font-size : 5px;
   font-family : Sans-Serif;
   font-weight : bold;
   text-decoration : none;
   border-left: 1px solid black;
   padding-left : 1px;
   border-right: 1px solid black;
}  
 
.menuaide
{
 
   position : relative;
   display : block;
   padding-top : 9px;
   text-align : center;
   top : -566%;
   width : 80px;
   left: 81%;
   height : 23px;
   color : White;
   font-size : 5px;
   font-family : Sans-Serif;
   font-weight : bold;
   text-decoration : none;
   padding-left : 1px;
   border-right: 1px solid black;
}

Je voudrais savoir aussi comment faire pour paramétrer le lien lorsque l'utilisateur clic dessus , c'est à dire par exemple si l'utilisateur clic sur le lien "Mon Compte" celui-ci devienne Bleu.

D'avance merci

28/01/2011, 11h38
ornitho13

Peut être aurais tu une démo (et/ou image) à montrer car on ne peut pas voir le problème en plein écran.
29/01/2011, 22h33
hugo7

réponse

En faite je crois que j'ai trouver , lorsque je place mes éléments je les places en % ,or les % dépendent de la taille de la fenêtre il me semble.