[Résolu] Width d'une liste <ul> ne fonctionne pas

Bonjour !
J'ai un petit soucis, j'ai crée une liste <ul>, mais mon problème c'est que les éléments sont tous concentrés à gauche de la page alors que j'aimerais qu'ils prennent tout le long de la page.
J'ai essayé width:1045px mais quand je fais ça les titres du menu "CV français" "CV anglais"... ne bougent plus du tout, rien ne se passe...

Je vous mets mon code css:

#menu ul {
	margin:0;
	padding:0;
	list-style:none;
	text-align:center;
	display:block;
	position:relative;
	width:500px;
	font-variant:small-caps;
	font-family:Helvetica, Geneva, sans-serif;
	font-size:15px;
	font-weight:300;
}
#menu ul ul {
	width:215px;
	font-size:13px;
	padding:1px;
	list-style:none;
}
#menu li {
	float: left;
	margin: auto;
	padding: 0;
	background-color: #00a0ff;
}
#menu li a {
	display: block;
	width: 100px;
	color: black;
	text-decoration: none;
	padding: 5px;
}
#menu ul ul li a {
	width: 200px;
}
#menu li a:hover {
	color: white;
}
#menu ul li ul {
	display: none;
}
#menu ul li:hover ul {
	display: block;
}
#menu li:hover ul li {
	float: none;
}
#menu li ul {
	position: absolute;
}
/*fix ie7*/
#menu {
	height: 50px;
}

Et mon site internet pour que vous puissiez vous rendre compte : mon site

Merci encore pour votre temps !

Bonjour,

Une solution qui n'est pas très élégante mais qui conviendra puisque ton site a une largeur fixe.

#menu > ul > li {
    width:262; // 1050 divisé par 4
}

Supprime également le width:500px; de ta feuille de style actuelle.

J'ai utilisé le caractère > au lieu d'espaces, pour éviter que ça fasse des conflits avec tes ul/li imbriqués.

Quelqu'un d'autre aura sûrement mieux à proposer...

Merci pour ta réponse, malheureusement ça ne marche toujours pas, rien n'a bougé...
Il doit y avoir quelque chose qui bloque mais je ne sais pas quoi..

Tu peux mettre à jour sur le serveur avec les modifs ? Car là ton fichier css est le même qu'avant.

Ce sera plus simple pour voir ce qui cloche.

Oui pardon c'est fait !

Ouuuuups

J'ai oublié l'unité toute à l'heure:

#menu > ul > li {
    width:262px; // 1050 divisé par 4
}

Modifié par jiber2fr (10 Dec 2012 - 16:30)

Ah oui c'est de ma faute aussi j'avais même pas remarqué !
Ça marche enfin c'est parfait comme ça !
Dernière question, comment je fais maintenant pour centrer les éléments du menu avec la page ? (décaler légèrement sur la droite)
text-align:center ne fonctionne pas donc ça ne doit pas être ça..

Merci beaucoup encore !

Si j'ai bien compris la question, ça viendrait du fait que les liens (<a>) soit en 'display:block'. Or, les blocks, ça se centre pas avec 'text-align'.

Une solution qui a l'air de marcher serait de remplacer, 'display:block' par 'display:inline-block' pour ces liens (à la ligne 78 dans ton fichier CSS).

Par contre, si tu fais ça, c'est moche quand on 'ouvre' un menu. Pour que le menu soit bien en dessous du lien, il faut élargir les menus aussi (vu qu'on a élargi les liens).
- Ligne 64: width:262px;
- Ligne 85: width:262px;

(Bon, il reste un petit détail, c'est qu'on peut 'ouvrir' un menu sans avoir la souris sur le texte, mais ça me paraît pas très gênant.)

Bonjour,

Ceci devrait convenir pour la partie menu :

#menu ul {
	margin:0 auto;
	width:1050px;
	padding:0;
	list-style:none;
	text-align:center;
	display:block;
	position:relative;
	font-variant:small-caps;
	font-family:Helvetica, Geneva, sans-serif;
	font-size:15px;
	font-weight:300;
}
#menu ul ul {
	width:12.5%;
	font-size:13px;
	list-style:none;
	margin-left:10%;
	padding:0;
}

#menu ul li {
	float: left;
	width:25%;
	background-color: #00a0ff;
}
#menu ul li a {
	display: block;
	color: black;
	text-decoration: none;
	padding: 5px;
}
#menu ul ul li a {
	text-align:center;
}
#menu li a:hover {
	color: white;
}
#menu ul li ul {
	display: none;
}
#menu ul li ul li{
	width:100%;
}
#menu ul li:hover ul {
	display: block;
}
#menu li:hover ul li {
	float: none;
}
#menu li ul {
	position: absolute;
}
/*fix ie7*/
#menu {
	height: 50px;
}

Il y a bien sûr moyen d'améliorer

Génial MERCI beaucoup à tous les deux c'est parfait, j'ai exactement ce que je voulais !

De rien, mais il faudrait mettre un petit [Résolu] sur l'autre post que vous avez mis sur ce forum

Attention @Alouce le message est posté deux fois...J'ai répondu à l'autre et il faudra le mettre en résolu aussi.

Oui je suis désolée je le fais de suite !