28220 sujets

CSS et mise en forme, CSS3

Salut...

Comme beaucoup de gens ici, après avoir fait un premier site bourré de tableaux, j'ai découvert les normes, l'accessibilité...etc et je commence à faire quelques ébauches de la prochaine version de mon site.

Je n'en suis qu'à la création du menu et quelques problèmes se posent déjà !

Voilà un aperçu du menu (très fortement inspirée de fredcavazza.net) :
http://als.web.free.fr/ALSv2/menu.gif

... et le lien où vous pourrez voir le menu à l'oeuvre, ainsi que son code source :
http://als.web.free.fr/ALSv2/liste.html

Tous les navigateurs :

> J'aimerais bien que mon menu occupe toute la largeur de la page. Etant donné qu'il y a 6 parties, ça ferait environ 16% par <li> mais j'ai testé "width:16%;"... sans succès. En attendant j'ai mis un "padding-left" et "padding-right" sur <a> mais ça ne correspond pas à ce que je voulais.

IE :

> Il y a comme un "padding-right" (environ 4 pixels) sur chaque élément du menu (visible au survol avec la souris)...

Firefox :

> Là il y a comme un "padding-right" (environ 4 pixels) et un "padding-bottom" (environ 1 pixel)

... et pourtant pour <li>, <ul> j'ai mis "padding:0;"

Merci beaucoup pour vos conseils.
Modifié par 84mickael (24 Mar 2005 - 22:40)
Salut,

1) Il est normal que ton width ne marche pas, puisque li est un élément inline, dont la largeur est donc par définition celle de son contenu. Si tu veux déterminer la largeur, il te faudra passer ces éléments en display : block (et jouer avec les conséquences Smiley lol ).
2) As-tu mis également la propriété margin à 0 ? Si tu veux savoir s'il s'agit d'un padding ou d'un margin, mets 2 couleurs de fond différentes au parent et à l'élément (ici ul et li). Si tu vois un espace de la couleur du parent, c'est un margin.
J'ai mis :
- <ul> en rouge
- <li> en vert

et pour ces 2 éléments j'ai mis :
- "margin:0;"
- "padding:0;"

Résultat :
http://als.web.free.fr/ALSv2/menu2.gif

Je ne sais pas quoi faire Smiley ohwell

Sinon si je mets "display:block;", c'est compliqué de les mettre bout à bout ? (sachant que je ne souhaite pas utiliser de positions flottantes).