[Résolu] Probleme de mise en forme CSS

Bonjour,
Je suis nouveau sur ce forum et débute dans le développement web,
et j'ai un petit problème de mise en forme au niveau du menu de navigation de mon site que je code actuellement en local.
Il s'agit d'un problème d'espacement comme vous pouvez le voir sur l'image ci-dessous :

Voici mon code source CSS :

#menu{position: absolute; top: 80px; left: 170px;}
#menu ul li {float: left; width: 70px; list-style:none;}
#menu ul li a {text-decoration:none; float: left; width: 70px; font-size: 14px; font-family:Eurostile; color:#FFFFFF; text-transform: uppercase;}
#menu ul li a:hover{text-decoration:none; float: left; width: 70px; font-size: 14px; font-family:Eurostile; color:#e60118; text-transform: uppercase;}

 

Pourriez-vous m'indiquer mes erreurs s'il vous plait ?

Merci

Cordialement
Modifié par Guillaume15 (04 Feb 2014 - 13:56)

Bonjour et bienvenue,

si un mot fait plus que 70px de large, tu empêches l'élémént d'être assez large pour le contenir.
Il faudrait remplacer le width sur le lien (a) par un min-width ou carrément l'enlever...
Comme il faut quand même laisser de l'espace entre chaque lien, un peu de padding horizontal (padding = marge interne en bon français) les espacera.

Essayez de gérer les padding, ça pourrait aider.

Merci de vos réponses j'essaye ça demain,
je vous tiendrez au courant du résultat.

Cordialement

Bonjour,
J'ai réussi à décoller mes éléments du menu de navigation j'ai effectué un "margin 5px" comme vous pouvez le voir ci dessous :

#menu ul li a {text-decoration:none; float: left; font-size: 14px; font-family:Eurostile; color:#FFFFFF; text-transform: uppercase; margin: 5px;}
#menu ul li a:hover{text-decoration:none; float: left; font-size: 14px; font-family:Eurostile; color:#e60118; text-transform: uppercase; margin: 5px;}

Merci beaucoup de vos réponses

Cordialement

Merci beaucoup sujet résolu !
Modifié par Guillaume15 (06 Feb 2014 - 08:54)