28220 sujets

CSS et mise en forme, CSS3

Bonjour, bonsoir,

A peine sortis d'un problème précédent (dont je remercie vivement les participants), je me rend compte cette fois ci d'un autre problème.

Excepté qu'une différence près de l'autre, je suis pratiquement certain de mon coup, d'où que le poste ne se situe pas dans Le Forum Général et Débutant.

Dans la page suivante, j'ai décidé de personnaliser des listes. Ce sont celles qui se situent au niveau des liens permanent et commentaires :

Je met donc le suivant pour le HTML :

		<ul class="participation">
		<li class="commentaire"><a href="#">Poster un commentaire</a></li>
		<li class="trackback"><a href="#">Lien permanent</a></li>
		</ul>

Les liens seront bien entendu personnalisés par la suite...

J'y associe les lignes de CSS suivantes :

	/* définition des effets sur trackback et commentaire */
#document #texte ul.participation {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
	word-spacing: 0.2em;
	width: 60%;
	text-align: right;
	background-color: #D5D5D5;
	margin-left: 30px;
	margin-top: 15px;
	padding-right: 10px;
}
#document #texte ul.participation li.commentaire, #document #texte ul.participation li.trackback {
	display: inline;
	list-style: url("../img/global/write.png");
}
#document #texte ul.participation li.commentaire a, #document #texte ul.participation li.trackback a {
	text-decoration: none;
	color: #666;
}
#document #texte ul.participation li.commentaire a:hover, #document #texte ul.participation li.trackback a:hover {
	text-decoration: underline;
}
	/* définition des effets sur trackback et commentaire */



Pour ceux qui se demandent pourquoi j'inscrit un chemin complet en CSS tel que #IDPrincipal #IDSecondaire Balise.Classe c'est dans le fait que cela me reste de ma programmation script qui est dans ce style. Et vu que cela ne porte pas atteinte au CSS [une petite lourdeur de lecture], je le garde en aisance..

Hors comme vous pouvez le constater, aucune image ne s'inscrit dans la liste sur les LI. Assez exceptionnel, je me suis rendu sur les spécifications en parlant (cela fera plaisir à Laurent Denis, qui m'a déjà dépatouillé la dernière fois !).

Je constate que ma syntaxe est correcte (sauf inattention de ma part), et qu'il y a posibilité aussi d'avoir directement list-style-image [quoique je préfère list-style ; le résultat posant soit sur l'un ou l'autre le problème identique], que mon URI (en absolu ou en relatif) est correcte... Mais qu'en final rien ne s'affiche ! Smiley sweatdrop

J'ai donc fais quelques recherches sur mon forum préféré et j'ai pu y constater quelques problèmes similaires [dans les listes] (relié principalement au chemin et déclaration), et quelques contournement (utilisation de background-image notament)... Malheureusement ici le chemin 'me' semble correct et de fait, le contournement ne me semble pas adéquat.

Pourriez-vous m'indiquer si j'ai fais une erreur dans cette liste et principalement dans la personnalisation de l'image associée ? Ais-je fais une faute de rendu ? Ou une autre erreur de ma part ?

Evidement si l'erreur est évidente et que je me suis de fait trompé de forum, n'hésitez pas à déplacer ce topics vers le forum Général et Débutant.

D'avance merci de votre lecture et de vos idées, de vos participations etc.

Groumphy
Bonjour,

Je ne sais pas. Je ne saisis pas trop. Un dimanche matin, vous me pardonnerez de ne pas vouloir lire XXX obscures lignes de code (Z)(X)HTML CSS2.(XYZ).

J'aimerais bien un simple "je voudrais ça", avec une image du résutlat attendu, et un "j'ai ça" accompagné du code HTML CSS validé, en l'état. Vu que ça se résume inévitablement à la tête que ça a quand c'est affiché dans un navigateur graphique.

On pourrait répondre, au choix :
- oui, c'est comme ça : ...
- non, c'est expérimental, comme ça....
- non. Peut pas.
Modifié par Laurent Denis (08 Jan 2006 - 12:48)
Bonjour,

Hum, alors si monsieur veux, monsieur aura :

Bonjour,

J'ai un problème d'affichage de personnalisation de liste. En effet, les images ne s'affichent pas. Hors je désirerais personnaliser la liste suivante :



<ul class="participation">
<li class="commentaire"><a href="#">Poster un commentaire</a></li>
<li class="trackback"><a href="#">Lien permanent</a></li>
</ul>


Avec une image personnalisée en place de liste (se trouvant à ../img/global/write.png). Hors rien ne s'affiche.
J'ai pourtant utilisé l'inscription suivante :

display: inline;
list-style: url("../img/global/write.png");

Applicable sur mes LI (ou apparement Laurent D. retournerais bien !).

Est-ce quelqu'un peut m'aider ?

J''en serais ravi !

G.
Bonjour,

Je ne suis pas certain qu'il soit possible d'afficher d'image par list-style-image si en même temps les éléments de liste ont la propriété display à inline.

Il faudrait mieux utiliser un background-image à mon avis.
Salut,
Essaye de mettre "list-style-image" dans la propriété de ton ul "#document #texte ul.participation"
#document #texte ul.participation {
list-style-image: url("../img/global/write.png");}

Il me semble que cela ne fonctionne pas si l'attribut "list-style-image" est attaché aux "li".
Modifié par freedavidoff (09 Jan 2006 - 10:14)
Bonjour,

Je vous remercie de vos participations...

@ Igor > Concernant le background-image, je ne préfère pas (comme cité plus haut) ;
@ freedavidoff > Je vais essayer cela as soon as possible ;

Je vous tiens informé du suivis.

G.
Je ne vois vraiment pas pourquoi on ne pourrait pas mettre un background ... c'est justement comme cela qu'on fait partout, je penses que c'est justement parce que c'est la seule méthode existante..

http://www.yoyodesign.org/doc/w3c/css2/generate.html#lists

C'est surement parce que les navigateurs n'implémentent pas list-style-image ...

Edit :

quoique : http://www.webmasterworld.com/forum83/5742.htm (je n'ai pas lu... mais ça semble parler de la même chose Smiley cligne )
Modifié par Cedric (08 Jan 2006 - 16:56)
Re vous,

Eh bien une mauvaise nouvelle s'annonce... Tant et si bien que list-style ou list-style-image ne fonctionnent.

Cependant, j'ai eu beau faire un copier de ma structure identiquement à cette page, cela ne fonctionne pas ! (Hors sur leur page cela fonctionne comme le dit si bien FreeDavidoff).

De fait, je me suis intérrogé face aux propos de Igor, et j'ai donc remis ma structure en place... Et effacé le display: inline; Et là cela fonctionne ! Smiley cavapa

En bref, ... Heu voila quoi...

G.
Cedric a écrit :
Je ne vois vraiment pas pourquoi on ne pourrait pas mettre un background ... c'est justement comme cela qu'on fait partout, je penses que c'est justement parce que c'est la seule méthode existante..
Bonsoir, merci de ton aide.
Je n'ai pas dit qu'on ne pouvait pas... J'ai dit que je préférais pas...
Cedric a écrit :

Edit :

quoique : http://www.webmasterworld.com/forum83/5742.htm (je n'ai pas lu... mais ça semble parler de la même chose Smiley cligne )

Oui oui il s'agit bien du même sujet. Je compte le lire par après... Car ils semble développer des points sur lesquels je n'avais pas encore eu d'imagination...

Cependant, ce soir je n'ai plus le temps, encore un script à terminer... Et un billet... Hum, de fait, je le fais as soon as possible.

Bien entendu je vous tiens au courant ! Smiley smile

G. Smiley murf
Bonjour,

Me revoila... J'ai pu lire le problème donné dans le topics similaire... Et il est presque identique. La solution proposée est la même, utilisation du background-image.

En bref, s'agit t'il d'un bug ? D'une non prise en considération au niveau CSS ?

G.