28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je suis en train de récupérer l'administration d'un environnement SharePoint et j'ai un problème avec la .css qui est appliquée. Je précise SharePoint pour expliquer que je suis loin de pouvoir faire tout ce que je veux sur la structure HTML des pages, ni sur mon environnement (ça serait trop facile si dans les grandes boites, on nous laissait accéder aux serveurs de production ^^) et qu'il faut que je tente de résoudre mon problème avec le moins d'impact/travail de reprise à faire.
Je viens donc vous demander votre avis éclairé : savoir s'il n'y a pas une solution que je n'aurais pas envisagée, celles me venant ne me plaisant pas spécialement côté impact sur mon existant.

Le Problème :
Lors de la création de liste <ul> dans un éditeur de contenu, si un élément de la liste contient beaucoup de contenu, et que ce contenu passe sur plusieurs lignes, je vois parfois apparaître une seconde puce.

Après avoir fouillé la .css, il apparait que les puces ne sont pas définies par la propriété list-style-image de ma liste (il s'agit de puce personnalisée spécifique à notre charte graphique), mais d'un background défini sur les <li>. Et l'image utilisée pour ce background se trouve dans un fichier de sprites.
Sauf que le background détermine la position d'affichage du sprite, mais ne fait pas disparaitre le reste de l'image. Donc, si, par exemple, chaque sprite dans le fichier de sprites est séparé par un vide (transparent) de 100px, mon problème se pose quand la hauteur de ma ligne <li> dépasse les 100px. L'image suivante apparaît.

Les solutions qui me viennent à l'esprit :
- Recréer un fichier de sprites en agrandissant encore l'espace entre les images
=> Ne fait que décaler le problème (qui d'une ligne encore plus haute ?)
=> Oblige à la révision de l'ensemble des fichiers .css pour modifier les appels aux différents sprites
=> Entraîne la livraison d'un nouveau fichier image dans le répertoire 14 des serveurs

- Créer un fichier d'image spécifique pour ces <li> : peut-être pas possible, j'ai pas encore regardé comment étaient gérés les différents niveaux de puces dans l'éditeur SharePoint.
=> Oblige à une révision partielle des fichiers .css pour les classes en rapport avec les puces des listes
=> Entraîne la livraison d'un fichier image dans le répertoire 14 des serveurs

Si vous voyez d'autres solutions ?
En fait, c'est le sens de mon post : existerait-il un moyen de limiter l'affichage du sprite sans retoucher aux fichiers images ?
Par exemple, serait-il possible de positionner dans le background une zone de mon fichier de sprites en disant au navigateur que le reste n'existe pas pour cet élément ? Donner en background les coordonnées d'un carré à afficher et faire ignorer tout le reste de l'image ?

D'avance merci.

Manu
Bonjour,

Je pencherai vers ta première solution, mais en mettant les sorties en diagonale,ainsi le problème d'espacement ne se posera plus.
C'est une réponse que je craignais un peu je l'avoue ^^
Merci d'avoir pris le temps de me répondre.

Manu
Bonjour Manu,

Pour ne modifier que la CSS, ne pourrais-tu pas mettre ton background non pas sur le LI mais sur un pseudo-élément, genre :before, dont tu aurais la maîtrise complète en terme de dimensions ?

tm