[Résolu][CSS] Mise en forme liste ul

Salut,

Je suis actuellement en train de refaire un site internet en utilisant XHTML et CSS le plus strict et le plus accessible possible.

J'ai un problème pour la page "plan du site". Le graphiste demande une présentation comme vous pouvez le voir ci dessous :
http://fada09.free.fr/plan_du_site.gif


J'ai pensé réaliser cela en utilisant des <ul> imbriquées. J'ai donc mis les petits traits horizontaux en tant que puce et le trait vertical en tant que background de la liste (<ul>).

A partir de là, plusieurs problèmes :
--> le trait vertical dépasse de quelques pixels en bas (je m'en doutait en le faisant, mais j'arrive pas à résoudre mon pb )
--> Sur Firefox les puces sont bien alignées mais sous IE, en plus d'être décalées d'1px vers la droite par rapport à Firefox, elles ne sont pas toutes alignées

Bref c'est le bordel (qui a dit à cause d'IE ... )

Et voila a quoi ca ressemble sous IE :

http://fada09.free.fr/IE.jpg

Merci de m'avoir lu jusqu'à là
Merci d'essayer de m'aider pour mettre en forme mon truc avec les listes ou autre chose. Je prends toutes les propositions .

Voici mon code XHTML :

Accueil
<ul class="plan" id="plan_niv1">
<li>Partie professionnel
<ul class="plan" id="plan_niv2"><li><a href="detail_categ.php?id_categ=CATEG_1">Categ1</a></li>
<li><a href="detail_categ.php?id_categ=CATEG_2">Categ2</a></li>
<li><a href="detail_categ.php?id_categ=CATEG_3">Categ3</a></li>
<li><a href="detail_categ.php?id_categ=CATEG_4">Categ4</a></li>
<li><a href="detail_categ.php?id_categ=CATEG_5">Categ5</a></li>
</ul>
</li>
<li>Partie particulier</li>
<li>Nous connaitre</li>
<li>Nouveautés</li>
<li>Plan du site</li>
<li>Mentions légales</li>
</ul>

Mon code CSS :

ul.plan * {
list-style-image:url(../../deco/liste/trait_bleu.gif);
margin-left:20px;
padding-left:0px;
}

ul.plan{
   background: url(../../deco/liste/pixel_bleu.gif) repeat-y 3px;
}

Modifié par fada09 (12 Aug 2005 - 13:52)

Bonjour fafa09, et bienvenue sur ce forum,

je proposerais volontier de pendre le graphiste en question. ce serait une solution efficace, mais probablement jugée peu constructive

Pour être plus constructif, donc, je proposerais de laisser tomber les puces (list-style-type: none) et de tout passer via des classes (encombrantes, je sais) en images d'arrière-plan des éléments <li>, avec place réservée par un padding-left. Tu vois ce que je veux dire ? C'est la solution classique pour les puces personnalisées...

En fait, les classes ne seraient pas si encombrantes que cela :
- classe "first" éventuelle pour le premier li, quelque-soit le niveau de la liste, si le premier élément graphique est vraiment différent (hauteur plus grande, par exemple)
- pas de classe pour les autres li
- sauf une classe "last" pour le dernier élément, pour avoir le joli trait coudé à la fin qui fera plaisir à ce fichu graphiste

<edit> sinon, attention à un détail :si tu veux annuler l'espace à gauche des items de listes, géré différemment par Gecko et par les autres navigateurs, c'est sur l'élément <ul> qu'il faut appliquer un double margin-left: 0; padding-left: 0;
Modifié par Laurent Denis (11 Aug 2005 - 15:41)

Merci laurent pour ta réponse rapide.

Pour le graphiste, c'est bon il est pendu mais ca resout pas mon pb

Plus sérieusement, je vais essayer de faire ce que tu m'as dit et je reviens vous tenir au courant.

Encore merci ++

Rebonjour,

Tout d'abord merci laurent

Ta solution de mettre des background a mes <li> résout mon problème de décalage entre navigateurs.
J'ai donc mis en background des images ressemblant à des "T couchés".

Vu que dans mon cas j'ai deux listes imbriqués, mais que la principale doit avoir un trait tout le long (en face de la liste interieure), j'ai aussi mis un background au <ul> (un pixel bleu avec repeat-y). Cela pose un problème pour le dernier element de la liste car le trait dont je parle ci-dessus, continue quelques pixels en dessous du "L" qui sert à faire le coude.
J'ai donc un peu bidouillé mon image "L" pour qu'en fait ce soit un "T couché" comme pour les autres mais avec la branche du bas de la couleur du fond de la page. Ainsi cette image passe dessus mon trait et le cache. C'est peut être pas très très clean mais j'ai pas trouvé mieux.

Je sais pas trop si je me suis bien fait comprendre mais j'aurais essayé

Bonne journée à tous ++