probleme avec les listes a puces

elle ne se met pas ou je voudrais...

8 février 2006 à 19:03:26

bonjour, j'ai un petit probleme, comme l'indique mon titre, c'est que la liste a puce que j'ai faite ne se met pas ou je veux, et je ne sais pas comment faire pour changer ca...

heu j'aurai bien aimé vous montrer comment elle est et ou je voudrais qu'elle soit, mais heu je ne trouve pas comment on insert une image qui vien de mon ordi... :s hum je suis pas tres douée en informatique moi ^^"

enfin bon je vais essayer de vous expliquer au mieux:
je voudrai que ma liste a puce soit a la suite de mon texte, mais ca fait automatiquement un retour a la ligne quand j'essaye d'inserer ma liste,et je voudrais savoir comment faire pour qu'elle reste a la suite du texte...

merci d'avance ! (si vous n'avez pas compris mes explications( ce qui ne m'étonnerais pas^^) n'hesitez pas a me redemander)

strucky

8 février 2006 à 19:21:27

Salut,

Un p'tit bout de ton code, pour se rendre compte de ce que tu souhaites obtenir.

Si j'ai bien compris, tu as du texte, et à la suite de ce texte tu désires insérer une liste à la suite sans retour à la ligne, ça me semble une drôle d'idée, mais tu as peut-être une raison bien précise à cela.

nakaee

8 février 2006 à 19:31:27

bon voila mon code:

les touches :<ul><li>fleches gauches et droites pour deplacer la piece</li>
<li>feches haut et bas pour tourner la piece</li>
<li>barre espace pour faire tomber la piece</li></ul>

et j'aimerais quela liste soit a la suite de "les touches:" mais ca fait un retour automatique a la ligne...

JulFisher

8 février 2006 à 19:42:35

Fais leur un "display: inline;" dans le CSS, car ce sont des balises block, donc le retour à la ligne est automatique.

nakaee

8 février 2006 à 20:13:52

ok merci

heu c'est ce que je vien de faire mais ca ne marche pas, tu peu m'excpliquer ce qu'il faut faire exactement s'il te plait ?

merci

gcyrillus

8 février 2006 à 21:34:07

bonjour,
pour mettre tes liste en ligne, tu applique donc un

li {display:inline;}

comme dis precedemment.
Ceci dit , en ligne les puces n'apparaissent plus

.
alors il faut que tu les mettent en background ou dans une balise image ...

en background:

les touches :
<ul>
<li class="gd">fleches gauches et droites pour deplacer la piece</li>
<li class="hb">feches haut et bas pour tourner la piece</li>
<li class="td">barre espace pour faire tomber la piece</li>
</ul>

et le css

li{
display:inline;
padding-left:20px;/*ou la largeur de ton image */
margin:0 1em; /* pour les decoller les unes des autres */
/* eventuellement fixer la hauteur aussi avec height et recentré horizontalement le texte avec line-height en rprenant la valeur de height */
}
.gd {background:url(gauchedroit.gif) left center no-repeat;}
.hb {background:url(hautbas.gif) left center no-repeat;}
.td {background:url(tabdrop.gif) left center no-repeat;}

c'est une base.

En image :

les touches :
<ul>
<li><img src="gauchedroit.gif" alt="touches clavier" />fleches gauches et droites pour deplacer la piece</li>
<li><img src="hautbas.gif" alt="touches clavier" />feches haut et bas pour tourner la piece</li>
<li><img src="tabdrop.gif" alt="touches clavier" />barre espace pour faire tomber la piece</li>
</ul>

et un peu de css

li{
display:inline;
margin:0 1em; /* pour les decoller les unes des autres */
/* eventuellement fixer la hauteur aussi avec height et recentré horizontalement le texte avec line-height en reprenant la valeur de height */
}
li img {
vertical-align:top;/* pour aligner l'image sur le haut et la faire deborder sous le texte eventuellement */
margin-right:5px;/* repousser le texte de quelque pixel */
}

a toi de readapté ça a ta page, les liens vers les images et les noms des fichiers ainsi que le reste de la mise en forme.

a plus

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

nakaee

9 février 2006 à 10:58:38

ok merci je vais essayer ! (bah oui, douée comme je suis, je ne suis pas sur de reussir^^)
ceci dit, j'ai a peu pres compris, alorsbon je devrais y arriver quand meme...;)