Question Liste à puces / CSS

[Savagnin]

'Alut tout le monde...
Voilà ma question :
j'ai une liste à puces avec un image personnalisée créée en CSS...
Le hic, c'est que je ne voudrais pas que mon texte soit alignée sur la base de ma "puce/image", mais décalé vers le haut (en gros, centré par rapport à ma puce...). C'est possible ? Que faut-il faire ?
Merci beaucoup !!!!

J'espère être plus clair avec ce petit schéma...

 

[canibal]

tu mets ton texte entre <span> et tu mets un peu de padding-bottom
(ça serait plus simple avec le code source de te montrer)

 

[Damino]

Et si tu mets ta puce en background avec une propriété center ?

J'ai fais cela sur mon blog Ici : regarde le code.

 

[canibal]

Extrait de ton cite damino
/***puces pour les pages de liens***/

.dossier1 ul li {list-style-type:none;

background: url(http://leregisseur.free.fr/wp-content/fichiers/dossier1.png) center left no-repeat;

padding:5px 0 10px 35px; <--c'est ça que je t'ai dis de faire

}
c'est excatement ce que je viens de dire...
la proprièété center aligne en horizontal... pas en vertical
et la propriété vertical-align ne fonctionne pas "correctement"... donc pas le choix il faut un positionnement "a la con" avec les padding comme il est fait sur ton site dont tu n'as pas du faire les css

beh alors non mais

 

[Savagnin]

J'ai essayé comme ça :

code html:
<ul class="pucelogo">
<li><span class="decalage">Technologies de mesure</span></li></ul>


code css:
.decalage
{
padding-bottom: 5px;
}


...et ça marche pas
Y'a quelque choe que j'ai mal fait ?
Merci encore

 

[Nephou]

je ne vois pas à quoi sert la balise <span> ici ?

un moyen de tricher : tu définis une hauteur pour ton image égale à la propriété line-height (exprimée en pixels) d'un item de ta liste.

 

[canibal]

Nephou => après réflexion moi non plus en fait :rateau:

 

[momo-fr]

Lorsque l'on met une image en guise de puce de liste le mieux et de donner la valeur de hauteur de la ligne de liste à ton image... mais ça ne marche pas tous les coups.

Tu peux faire une liste avec l'attribut background renseigné de ton image, ensuite tu as la possibilité de la placer exactement où tu veux avec les valeurs de position horizontale et verticale.

Exemple :

li {
	list-style-type: none;
	background-image: url(../images/puce.gif);
	background-repeat: no-repeat;
	background-position: left center;
}

L'attribut "background-position" peut être renseigné en pixels pour placer au poil ta puce par rapport au texte. (première valeur horizontale, seconde verticale).

Attention toutefois car si tu mets du padding vertical à ta liste il faut le prendre en compte dans tes valeurs de placement du background (surtout la valeur top).

A essayer.

 

[Savagnin]

Bon ,déjà, merci à tous !

Alors, j'ai fait cette CSS:
.pucelogo
{
width: 422px;
margin-left: 108px;
list-style-type: none;
background-image: url("../IMAGES/PUCE.gif");
background-repeat: no-repeat;
background-position: left center;
color: white;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 25px;
}
... ça marche avec Safari et FF, mais pas avec IE...

Pour que ça marche avec IE, ilf aut que je remplace background-image: url("../IMAGES/PUCE.gif"); par list-style-image: url("../IMAGES/PUCE.gif"); mais après, c'est avec Safari et FF que ça marche plus...

Que dois-je faire ????

Avec IE, ça donne ça...

 

[Savagnin]

En fait, je me suis rendu compte que j'avais ce souci avec IE mais aussi Safari...
Du coup, ce que j'ai fait, c'est un "text-indent" pour chasser le texte vers la droite, et ça marche...

ça vous semble pas trop olé olé comme solution ?

... et mes puces sont centrées !!!! (merci)

 

[Niconemo]

Moi j'aurais plutôt fait un padding-left qu'un text-indent, mai ici ça revient au même (si les liens ne font qu'une ligne en tout cas)... et non, ce n'est pas trop "olé-olé" : les CSS servent à ça. Comme ça il n'y a rien de olé olé dans le code.

Sauf un truc que tu peux optimiser à mon avis :

j'aurais mis le menu dans une div (il y est sans doute déjà) définie par une classe CSS que j'appellerai ici ".menu". Et ensuite il suffit de définir les éléments ul et li (qui, du coup, n'auront plus a avoir une classe propre dans le code HTML). C'est plus propre, plus léger et plus facile à éditer quand on en a besoin :

.menu
{
width: 422px;
margin-left: 108px;
}

.menu ul
{
color: white;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 25px;
}

.menu li
{
list-style-type: none;
background-image: url("../IMAGES/PUCE.gif");
background-repeat: no-repeat;
background-position: left center;
}

Du coup, n'importe quelle liste incluse dans la div "menu" sera mise en forme même si elle n'a pas de classe CSS à elle.
Ça va dans le sens de la séparation de la forme et du contenu.

 

[Savagnin]

Heu, ça, j'ai encore un peu de mal à comprendre...
et des trucs à optimiser, je pense qu'il y en aurait d'autres, mais je n'en ai même pas encore conscience....

Pour faire "simple", j'ai fait ça dans mon code html :

<div id="cadregauche">

<ul class="pucelogo">
<li>Systèmes d'éclairages dédiés</li></ul>

<ul class="puceronde">
<li>Five angst-ridden Klingons gossips</li>
<li>Tokyo lamely untangles the irascible wart hogs. </li>
<li>The angst-ridden sheep quite comfortably bought five bourgeois pawnbrokers.</li>
<li>Quark tickled two slightly schizophrenic trailers, even though umpteen.</li>
</ul>

</div>

et j'avais vu qu'il y avait moyen de faire des CSS imbriquées du style "ul li ul li", mais là, c'était un peu coton pour moi...
Merci en tous cas...

 

[momo-fr]

Ton truc est correct, tu peux effectivement faire des sous-listes imbriquées et là la solution de Niconemo sera meilleure, tu fais un classe div conteneur, un ensemble premier niveau de classe ul et li et ensuite tu descends en ul ul et ul ul li et ainsi de suite. On fait comme ça des sous-menu décalés, imbriqués, masqués... bref la totale.

Un site à consulter pour se donner des idées et trouver le code qui va bien : Listamatic

Le dossier à lire sur Pompage

 

[Niconemo]

Oui, ton code est tout à fait acceptable. D'autant que tu as deux styles de listes différents. Pas de problème, c'est propre
(et si ça peut te rassurer, je n'en suis moi même pas au stade où on a un code 100% irréprochable, loin de là. C'est ça qui est bien avec XHTML/CSS, on avance à son rythme)

 

[Savagnin]

Bien content le Savagnin

 

[Damino]

c'est excatement ce que je viens de dire...
la proprièété center aligne en horizontal... pas en vertical
et la propriété vertical-align ne fonctionne pas "correctement"... donc pas le choix il faut un positionnement "a la con" avec les padding comme il est fait sur ton site dont tu n'as pas du faire les css

beh alors non mais

You're right, un peu de fatigue sans doute,

Ben alors, j'utilise un CMS WordPress donc une partie des Css est déjà réalisée, mais j'ai tout remanié. Gros vilain de laisser entendre que j'ai rien fais

Sinon quelques idées sur Alsacreations ... et de bonnes explications de Raphael (maître es CSS !)