Mettre des puces avant des liens - Comment faire?

Bonjour,

J’ai actuellement une boxe information sur mon site comportant plusieurs liens…
Edité le 25/05/2008 à 15:52

Première façon (crade) :
Mettre des <img /> devant tes liens.

Deuxième façon (propre) :
Virer ces <div> immondes, les remplacer par des <li> sans oublier de les mettre dans un <ul>. Pour finir, utiliser le CSS pour demander à au moteur de rendu d’utiliser, pour les puces des images (ressemblant à des flèches dans ton cas) : Ce fait avec list-style-image.

Zut. Il m’a devancé. J’irai plus manger des pattes le midi, promis!

Sans-Nom, tu me déçois :o

Merci de mettre le nom du langage dans le titre de ton sujet, comme requis par la charte épinglée juste au dessus :wink:

Pas fait attention, désolé.

Bonjour,

Je ne suis vraiment pas très calé en la matière, cela doit donner quoi exactement?

Merci

La procédure est pourtant simple :

  • remplacer <div par <li puis </div> par </li> (Balise ce qui doit être considéré comme un élément d’une liste)
  • placer <ul> après <td> puis </ul> avant </td> (Balise le début et la fin de la liste d’éléments non ordonnés)
  • ajouter l’attribut style à la balise <ul> en y mettant la directive CSS list-style-image et dont la valeur est le résultat de la “fonction” CSS url() (Précise que les puces de liste doivent utiliser ton image).
    Soit, dans ton cas :[quote=""]
    <ul style=“list-style-image: url(chemin_fichier_en_forme_de_fleche);”>
    <li class=“underline”><a…>…</a</li>
    <li class=“underline”><a…>…</a</li>
    <li class=“underline”><a…>…</a</li>
    </ul>
    [/quote]

Je te conseille d’apprendre l’HTML et le CSS :slight_smile:

Je viens d’appliquer le code comme ceci mais j’obtiens un message d’erreur…

Voici mon code :

  $info_box_contents = array();
  $info_box_contents[] = array('text' => 
  <ul style="list-style-image: url(images/arrow.gif);">

'<li class="underline"><a href="' . tep_href_link(FILENAME_PRIVACY) . '">' . BOX_INFORMATION_PRIVACY . '</a></li>' .
  '<li class="underline"><a href="' . tep_href_link(FILENAME_CONDITIONS) . '">' . BOX_INFORMATION_CONDITIONS . '</a></li>' .
    '<li class="underline"><a href="' . tep_href_link(FILENAME_SITEMAP) . '">' . BOX_SITEMAP . '</a></li>' .
  '<li class="underline"><a href="' . tep_href_link(FILENAME_CONTACT_US) . '">' . BOX_INFORMATION_CONTACT . '</a></li>');

                                    

  new infoBox($info_box_contents);
?>
            </td>
          </tr>
<!-- information_eof //-->

et voici le message d’erreur :

la ligne 24 fait référence à ceci :


<ul style="list-style-image: url(images/arrow.gif);">

et avec des simples quotes ’ de chaque coté de cette ligne, ça serait pas mieux ? :slight_smile:

J’ai mis le code comme ceci :

Maintenant j’obtiens cette erreur :

et voici la ligne 25 :

C’est normal vu que tu mets deux chaînes côte à côte (celle du <ul… et celle du <li…).
Il te faut soit les mettre dans deux éléments différents de ton array() à l’aide d’une virgule, soit les concaténer à l’aide d’un point.

$info_box_contents = array();
 $info_box_contents[] = array('text' =>
'<ul style="list-style-image: url(images/arrow.gif);">' . // <--- Modification ici

'<li class="underline"><a href="' . tep_href_link(FILENAME_PRIVACY) . '">' . BOX_INFORMATION_PRIVACY . '</a></li>' .
 '<li class="underline"><a href="' . tep_href_link(FILENAME_CONDITIONS) . '">' . BOX_INFORMATION_CONDITIONS . '</a></li>' .
   '<li class="underline"><a href="' . tep_href_link(FILENAME_SITEMAP) . '">' . BOX_SITEMAP . '</a></li>' .
 '<li class="underline"><a href="' . tep_href_link(FILENAME_CONTACT_US) . '">' . BOX_INFORMATION_CONTACT . '</a></li>');

                                   

 new infoBox($info_box_contents);
?>
           </td>
         </tr>
<!-- information_eof //-->

Alors maintenant j’ai bien les flèches comme je voulais, mais maintenant les liens ne sont plus à gauche de la boxe mais vont vers la droite de la boxe… comment faire pour bien les positionners vers la gauche?
Edité le 25/05/2008 à 15:53

Quelle box ?
Qu’entends-tu par “vont vers la droite” ?

Bonsoir,

C’est simple regarde les deux screens que je viens de poster…
Sur le premier screen (le pb que je rencontre) tu peux voir que les liens vont vers la droite, sur le deuxième screen (montage que j’ai fais) tu peux voir que les liens sont correctement alignés vers la gauche.
Ma question est : "comment faire pour remettre les liens vers la gauche à l’interieur de la boxe.

Et si tu préfère avant de mettre ta modification, les liens étaient placé correctement vers la gauche, depuis ta modification j’ai bien les flèches mais les liens vont à droite.

postes nous le code CSS correspondant a tes <ul et tes <li

Voici ce que j’ai rajouter dans le css :

}
ul {
    list-style-image: url("images/arrow.gif");
}

et voici le code qui me permet de faire des lignes séparateurs avec une image de pointillé :

Je crois que je viens de trouver :

J’ai rajouter dans le css :

margin-left:10px;

ce qui donne :

Le code est pas “crade” ? c’est bon comme ca? en tout visiblement le pb est corrigé comme ca.

Ah OK (les images n’apparaissaient pas).

Essaie de rajouter la directive CSS "list-style-position: inside;" à tes <li>

Apparement ma modif ne passe pas sous firefox :confused: donc je pense que mon rajout est "crade"…

> chez moi elles apparaissent.

Kojima > j’aurais fait pareil, avec un margin-left de petite taille pout voir le changement. Tu peux aussi le mettre en width:100%; et définir padding-left:10px;