Marge dans menu et feuille de style [Résolu]

[Jolt0x]

Bonsoir,

Mon site est là:

http://jinx.perso.neuf.fr

Je souhaiterais mettre les textes de menu aligné a gauche avec une toute petite marge (quelques pixel) alors que aujourd'hui ils sont centré.

J'ai cela dans ma feuille de style:

Code :

1
2
3
4
 
DIV#halmenu UL {
	TEXT-ALIGN: center; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 975px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}

ET j'ai remplacé le TEXT-ALIGN: center par TEXT-ALIGN: left. Cela fonctionne bien, mais c'est trop a gauche. Je voudrais une marge de quelques pixels. J'ai essayé de jouer sur PADDING-LEFT mais cela ne fonctionne pas. Des idées ?

Seconde question: comment modifier ma feuille de style pour que les menu ne soient pas limité en largeur (ce qui est le cas, aujourd'hui) et que la largeur soit déterminée par le texte du menu (pour les menu de premier niveau, évidement) Il manque en effet trop peu de place pour le menu "Math&Computing" par exemple et trop de place pour les menus "News" et/ou "About".

Le fichier CSS complet est là:

http://jinx.perso.neuf.fr/nav2southp...lib/MyMenu.css

Merci de toute aide.

[Marc22]

Bonjour,

pour la taille fixe, essaye d'aller ton MyMenu.css

dans ton

div#halmenu ul li : essaye de supprimer ton width. Et pour la marge, rajoute ceci :

Code :

1
2
3
div#halmenu ul li {
padding: 0 28px 0 9px;
float:left;}

[ornitho13]

J'ajouterai également qu'il faut éviter d'utiliser des majuscules au niveau des propriétés CSS...

[Jolt0x]

Merci.

Ce ne fonctionne pas bien du tout. Le padding proposé est OK mais des que j'enlève le "width" ca merde a fond dans les menu. Plus de précision ce soir.

[Marc22]

Tu parles des menus ou des sous-menus?

Il faut bien mettre le float:left aussi. Comme j'ai testé ça marchait.

[silverockets]

Bonjour,
Pour commencer, je pense que tu ne mettre qu'une seule fois :

Code :

1
2
 
FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif

Ca devrait suffir sur le html.

Voila, ensuite afin d'arranger ton soucis au niveau du menu, il faut bien penser à enlever également le width que tu as sur tes balises <a> :

Code :

1
2
3
4
 
div#halmenu li a{
width : 100px;
}

Ensuite, tu pourras faire ca :

Code :

1
2
3
4
5
 
ul li{
margin-left : 10px;/*ou la taille que tu veux*/
margin-right : 10px; /*ou la taille que tu veux*/
}

Voila, je pense qu'avec ca tu pourras mettre ton menu comme bon te semble
Tes menus s'adapteront à la taille de ton texte.
Redis-nous ce que ca donne

[Jolt0x]

Merci de votre aide.

Comme proposé par silverockets j'ai enlevé le "width : 100px;" dans le "div#halmenu li a{" et ca fonctionne pas mal.

J'ai mis ensuite le padding comme proposé par Marc22 et sa fonctionne bien (en revanche les margin-left de silverockets fonctionnent moins bien, mais je n'ai pas creusé dans cette direction)

J'ai diminué la largeur des sous menu mais j'ai une ligne vert en bas à droite des sous menu qui apparait. Je ne sais pas comment l'enlever. J'ai regarder comment je pouvais réduire un width par ci par là mais en vain. Une idèe ? (les ligne vertes qui dépassent de la largeur des sous menus sont visibles sur le site: jinx.perso.neuf.fr

Merci de votre aide.

[silverockets]

Ta ligne (bleue pour le coup) vient de ca :

Code :

1
2
3
4
 
div#halmenu ul ul {
    border-bottom: 1px solid #7A95E5;
}

[Jolt0x]

OK merci bien.

J'ai conservé cette ligne bleu et j'ai simplement trouver le bon width a ajuster.

A nouveau merci.