28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Voilà j'ai un problème avec les puces d'une liste inline. Bien sûr, les puces n'apparaissent plus, donc j'ai utilisé des images en background pour faire les pipes (au lieu de border-left pour pouvoir bien les positionner dans IE, de toutes façon ça ne change pas le probleme)...

upload/14205-exemple.gif

On voit dans l'exemple que quand le lien est coupé en 2 pour passer à la ligne, l'image n'est pas positionnée au bon endroit (avant le lien "remboursement des frais des experts"). J'ai essayé donc des borders pour éviter le probleme, j'ai essayé de mettre les images en background sur les liens et non sur les items de la liste, j'ai essayé de changer les padding margin line height et les positions... je ne trouve pas comment régler ce bug...

<UL>
  <LI><A href="#">Présentation</A> </LI>
  <LI><A href="#">Calendrier des réunions</A> </LI>
  <LI><A href="#">Présentation du centre de conférences</A></LI> 
  <LI><A href="#">Comment organiser une réunion</A> </LI>
  <LI><A href="#">Mesures de sécurité</A> </LI>
  <LI><A href="#">Remboursement des frais des experts externes</A> </LI>
  <LI><A href="#">Formation et information </A> </LI>
  </UL>


et voici le css :

.navigationLevel3Content UL {
	MARGIN-TOP: 3px; MARGIN-LEFT: -40px
}
.navigationLevel3Content LI {
	BACKGROUND-POSITION: left top; DISPLAY: inline; PADDING-LEFT: 6px; BACKGROUND-REPEAT: no-repeat; 
	BACKGROUND-IMAGE: url(vertical_line.gif)
}


si quelqu'un pouvait avoir une idée, ce serait vraiment bien !

merci d'avance
Modifié par Tif (27 Sep 2007 - 11:14)
Bonsoir,

Deux solutions :
- laisser les éléments li en display:block et leur attribuer un float:left
-supprimer la liste, mettre les liens dans un pargraphe et les séparer par des pipes.
Salut,

Tif :

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Bonjour Shunkin,

Merci pour ta réponse.

Shunkin a écrit :

- laisser les éléments li en display:block et leur attribuer un float:left


Cette solution empêche d'avoir le menu sur 2 lignes comme avant.

Shunkin a écrit :

-supprimer la liste, mettre les liens dans un pargraphe et les séparer par des pipes.


J'aimerais ne pas toucher à l'html qui est généré via xslt, car ce n'est pas moi qui ait développé les xsl... enfin s'il n'y a pas d'autres solutions...