Discussion :

[Graphix]

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

Code :

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

float: right;

Par

Code :

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

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.





Code HTML :

Code :

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

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 :

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
 
/* 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

[Candygirl]

Hello,

il aurait été intéressant de voir le css de #head2 aussi. Sur ton image, tu as mis ton cadre à head2 ?

Autrement ton #navlist ul ne s'applique à rien dans ton exemple; il n'y a aucun ul enfant de #navlist...

As-tu placé le

Code :

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

* {padding:0; margin:0;}

en haut de ton css pour supprimer les padding-margin par défaut du navigateur ?

Si ce n'est pas le cas, essaie de l'ajouter ou alors, si tu préfères, de rajouter ceci à ton ul:

Code :

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

#navlist {padding:0;margin:0;}

[tigunn]

Salut Graphix!

je dirais que ton pb vient de ton utilisation :

Code :

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

1
2
3
 
<div id="head2">
	   <ul id="navlist">

il faudrait plutôt faire :

Code :

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

1
2
3
 
<div class="head2">
	   <ul id="navlist">

il faudrait alors déclarer dans ta CSS navlist comme un fils de head2.
Cela devrait te donner qqchose comme:

Code :

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

1
2
3
4
5
6
7
8
9
 
#head2 .navlist {
 float: right;
}
 
#head2 .navlist ul {
white-space: nowrap;
padding: 0;
}

Pour ce genre de souci, il existe un plugin Firefox, webdevelopper toolbar, (téléchargeable sur http://chrispederick.com/work/webdeveloper/)

elle te permet, entre autres, de voir graphiquement les limites de tes <div>.

Je conseille vraiment....

bon dev'

[Candygirl]

il faudrait plutôt faire :

Code :

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

1
2
3
 
<div class="head2">
	   <ul id="navlist">

il faudrait alors déclarer dans ta CSS navlist comme un fils de head2.
Cela devrait te donner qqchose comme:

Code :

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

1
2
3
4
5
6
7
8
9
 
#head2 .navlist {
 float: right;
}
 
#head2 .navlist ul {
white-space: nowrap;
padding: 0;
}

Il n'y a vraisemblablement pas de raison de changer l'id head2 par un class vu que c'est fort probablement un élément unique dans la page.

D'autre part le css et l'html que tu as donné ne correspondent pas; au vu de ton html, le css devrait être:

Code :

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

1
2
3
4
5
6
7
8
.head2 #navlist {
 float: right;
}
 
.head2 #navlist ul {
white-space: nowrap;
padding: 0;
}

le sélecteur de class étant le point et celui de l'id le #

[tigunn]

oki,
je pense qd même que son problème vient de l'ordonnacement de sa CSS.

CandyGirl => pour # et . effectivement c l'inverse (verifié sur W3C) mais ça ne m'a jamais posé de pb l'inverse?!?
tu vois des exemples où ce serait génant?