Menu CSS, position et espace
Bonjour,
Je planche sur le menu en CSS de mon futur site, mais il subsiste 2 problèmes.
1. Position
- Comme vous pouvez le remarquer sur l'image, le menu n'est pas à sa place. Il est beaucoup trop bas. Le conteneur dans lequel il doit être a un contour noir. J'ai bien essayer de remplacer
Par
Code:
1
2
| position:absolute;
position: relative; |
mais le problème est le même. Il semble y avoir un espace au dessus du menu, ais pas moyen de savoir d'où il vient. J'ai essayer d'isoler chaque élément de mon fichier CSS, pour voir ce qui le cause, mais aucun, une fois enlevé, ne supprime cette espace.
2. Espace
-Regardez entre le bouton "Services" et "Contact", l'espace est plus grand qu'entre "Accueil" et "Services". Je ne comprends pas, surtout que les valeurs sont les mêmes pour tous.
http://www.hiboox.com/vignettes/3206/8rz3t1v.png
Code HTML :
Code:
1
2
3
4
5
6
7
8
9
10
11
|
<div id="head1">
<a href="index.php?p=home"><img src="img/design/logo.png" alt="Logo Fripix" id="logo" /></a>
</div>
<div id="head2">
<ul id="navlist">
<li><a href="index.php?p=home">Accueil</a></li>
<li><a href="index.php?p=services">Services</a></li>
<li><a href="index.php?p=contact">Contact</a></li>
</ul>
</div> |
Code CSS qui nous intéresse :
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
|
/* Partie 3 : Menu header */
/* Partie 3 : Menu header */
#navlist {
float: right;
}
#navlist ul {
white-space: nowrap;
padding: 0;
}
#navlist li {
margin-right: 15px;
display: inline;
list-style-type: none;
}
#navlist a {
padding: 1px 12px 1px 25px;
border: none;
background-image: url(img/btn/accueil.png);
background-repeat: no-repeat;
}
#navlist a:link, #navlist a:visited {
color: #EEE;
text-decoration: none;
}
#navlist a:hover {
border: none;
background-image: url(img/btn/accueil_roll.png);
background-repeat: no-repeat;
color: #333;
} |
Merci :D
