Forum Clubic

Ligne en pointillé + css - comment faire?

Logiciel & apps Programmation
#1

Bonjour,

J’aimerai pouvoir agrémenter une boxe de mon site par des pointillés séparateur, je suis vraiment débutant en la matière, j’ai regardé pas mal de poste à ce sujet mais je ne pige pas trop.

Ma boxe est composé comme ceci :

Et j’aimerai pouvoir faire comme ceci :

#2

faut faire une liste de ta box :

<ul>
<li>Qui sommes nous?</li>
<li>…</li>
</ul>

et pour tes css tu mets qqch dans ce genre là =>

http://fr.selfhtml.org/css/proprietes/cadr…tm#border_style

#4

Bonsoir,

Je viens d’essayer d’appliquer les modifs mais cela ne fonctionne pas… voici le contenu de ma boxe “information”

#5

Bonjour,

Personne n’a une petite idée, car la je désespère vraiment.

Cordialement,
Patrick

#6

Si tu donnes le contenu du CSS, c’est plus facile à analyser, vu que c’est la méthode qu’on t’a proposée pour solutionner ton problème, et donc a priori l’endroit où tu as fait tes modifs

#7

je m’autoquote :wink:

#8

Pas sûr d’avoir compris à 100% ton problème mais…
si tu mets des balises < div class=MaBox > < /div > autour de chaque entrée de ta box, et dans ton fichier css (tu as bien créé un fichier css?) tu ajoutes :

.MaBox{
border-top:#999900 1px dotted;
border-left:#999900 1px dotted;
border-right:#999900 1px dotted;
border-bottom:#999900 1px dotted;
}

(le #999900 correspond bien sûr à la couleur des pointillés)

#9

Bonjour,

Désolé d’être nul comme ca…
Donc pour être plus clair je désire faire des pointillés comme ce site :

http://www.babywell.fr/

Voici le css de ma boxe information :

.boxText (line 12)

{

font-family: Verdana,Arial,sans-serif;

font-size: 10px;

color: #000000;

}

et voici le css des textes de ma boxe :

a (line 24)

{

color: #000000;

text-decoration: none;

}

a:hover (line 29)

{

color: #aabbdd;

text-decoration: underline;

}

et le code de ma boxe information :

#10

Vouais je comprends :wink: Alors plusieurs choses :

1/ Comme t’as un site en exemple, une méthode toute bête c’est afficher sa source et regarder ce qu’ils ont fait.

Chez toi ton texte est ainsi :

<a href="#">1er lien</a><br>
<a href="#">2ème lien</a><br>
<a href="#">3ème lien</a><br>

euh ils ont ca dans un tableau (enfin je crois, j’ai regardé en speed) :

<tr><td><a href="#">1er lien</a></td></tr>
<tr><td><a href="#">2ème lien</a></td></tr>
<tr><td><a href="#">3ème lien</a></td></tr>

Pour chaque cellule de leur tableau, ils ont probablement placé un style du genre :

border-style:dotted; border-width:thin; border-color:grey

2/ Ce que toi tu peux faire : refaire comme eux, faire un tableau pour prendre dans des cellules différentes tes liens, un par un => pas très propre :wink:

ton autre possibilité :

3/ NOTE : j’ai pas fait tous les liens ^^

$info_box_contents[] = array(‘text’ => ‘<ul><li><a href="’ . tep_href_link(FILENAME_PROFILE) . ‘">’ . BOX_INFORMATION_PROFILE . ‘</a></li>>’ .
‘<li><a href="’ . tep_href_link(FILENAME_PAIEMENT) . ‘">’ . BOX_PAIEMENT . ‘</a></li>’ .
[…]
‘<li><a href="’ . tep_href_link(FILENAME_CONTACT_US) . ‘">’ . BOX_INFORMATION_CONTACT . ‘</a></li></ul>’);

Tu rajoutes un <ul><li> au tout départ… ensuite tu encadres chaque <a href=""></a> par des <li></li>

C’est quoi ce truc ?

ul = unordered list ==> liste non ordonnée.

Quand tu ouvres un ul, tu annonces au navigateur que tu vas faire une liste (comme des puces dans excel si tu veux).

chaque <li> </li> permet de délimiter un ELEMENT de cette liste.

il faut ensuite attribuer à l’élément <li> (dans ton css) une bordure basse en pointillés et en gris, éventuellement avec un léger padding pour que ca soit plus beau :wink: Là tu te réfères au lien que j’ai posté en haut ca explique tout :wink:

PS : je te conseille de t’entrainer en dehors de tout ce bordel de code PHP que tu as :wink:

Essaie de faire un petit menu rapidos et d’appliquer l’effet que tu veux. Quand tu y seras arrivé, lance toi dans le live où t’as le PHP en plus.

Je pense que php rend la manipulation bien trop compliquée pour toi, donc fais en abstraction dans un premier temps :wink:

Bon courage !

PS : j’espère que j’ai pas tapé de la merde, je fais ca sans filet et un vendredi soir donc faut pas espérer de miracles non plus ^^

PS 2 : cherche google pour “liste css menu”, t’auras plein de trucs :wink:

#11

J’ai pas lu le topic, mais ça c’est incorect, en css c’est border:taille type couleur; …

#12

J’aurais fait quelque chose comme ça moi :

<!-- information //-->
<tr>
  <td>
    <table width="144" border="0" cellspacing="0" cellpadding="1" class="infoboxborder">
      <tr>
        <td>
          <table width=100% border=0 cellpadding=0 cellspacing=0 class="infoBoxContents">
            <tr>
              <td colspan=3 width="100%"><img src="images/boxes/table_information.jpg"></td>
            </tr>
            <tr>
                <?php
  $info_box_contents = array();
  $info_box_contents[] = array('text' => '<td class="underline"><a href="' . tep_href_link(FILENAME_PROFILE) . '">' . BOX_INFORMATION_PROFILE . '</a></td>' .
  '<td class="underline"><a href="' . tep_href_link(FILENAME_PAIEMENT) . '">' . BOX_PAIEMENT . '</a></td>' .
  '<td class="underline"><a href="' . tep_href_link(FILENAME_SHIPPING) . '">' . BOX_INFORMATION_SHIPPING . '</a></td>' .
    '<td class="underline"><a href="' . tep_href_link(FILENAME_MY_POINTS_HELP) . '">' . BOX_INFORMATION_MY_POINTS_HELP . '</a></td>' .//Points/Rewards Module V2.00
  '<td class="underline"><a href="' . tep_href_link(FILENAME_SPONSORSHIP) . '">' . BOX_INFORMATION_SPONSORSHIP . '</a></td>' .
  '<td class="underline"><a href="' . tep_href_link(FILENAME_TO_ORDER) . '">' . BOX_INFORMATION_TO_ORDER . '</a></td>' .
  '<td class="underline"><a href="' . tep_href_link(FILENAME_PRIVACY) . '">' . BOX_INFORMATION_PRIVACY . '</a></td>' .
                                        '<td class="underline"><a href="' . tep_href_link(FILENAME_CONDITIONS) . '">' . BOX_INFORMATION_CONDITIONS . '</a></td>' .
                                                                                 
                                        '<td class="underline"><a href="' . tep_href_link(FILENAME_CONTACT_US) . '">' . BOX_INFORMATION_CONTACT . '</a></td>');

  new infoBox($info_box_contents);
?>
            </tr>
          </table>
        </td>
      </tr>
    </table>

  </td>
</tr>
<!-- information_eof //-->

Et en css :

.underline
{
  border-bottom:1px dashed #000000;
}
#13

Oups je me suis planté, voivi le bon code :
J’aurais fait quelque chose comme ça moi :

<!-- information //-->
<tr>
  <td>
    <table width="144" border="0" cellspacing="0" cellpadding="1" class="infoboxborder">
      <tr>
        <td>
          <table width=100% border=0 cellpadding=0 cellspacing=0 class="infoBoxContents">
            <tr>
              <td width="100%"><img src="images/boxes/table_information.jpg"></td>
            </tr>
                <?php
  $info_box_contents = array();
  $info_box_contents[] = array('text' => '<tr class="underline"><td><a href="' . tep_href_link(FILENAME_PROFILE) . '">' . BOX_INFORMATION_PROFILE . '</a></td></tr>' .
  '<tr class="underline"><td><a href="' . tep_href_link(FILENAME_PAIEMENT) . '">' . BOX_PAIEMENT . '</a></td></tr>' .
  '<tr class="underline"><td><a href="' . tep_href_link(FILENAME_SHIPPING) . '">' . BOX_INFORMATION_SHIPPING . '</a></td></tr>' .
    '<tr class="underline"><td><a href="' . tep_href_link(FILENAME_MY_POINTS_HELP) . '">' . BOX_INFORMATION_MY_POINTS_HELP . '</a></td></tr>' .//Points/Rewards Module V2.00
  '<tr class="underline"><td><a href="' . tep_href_link(FILENAME_SPONSORSHIP) . '">' . BOX_INFORMATION_SPONSORSHIP . '</a></td></tr>' .
  '<tr class="underline"><td><a href="' . tep_href_link(FILENAME_TO_ORDER) . '">' . BOX_INFORMATION_TO_ORDER . '</a></td></tr>' .
  '<tr class="underline"><td><a href="' . tep_href_link(FILENAME_PRIVACY) . '">' . BOX_INFORMATION_PRIVACY . '</a></td></tr>' .
                                        '<tr class="underline"><td><a href="' . tep_href_link(FILENAME_CONDITIONS) . '">' . BOX_INFORMATION_CONDITIONS . '</a></td></tr>' .
                                                                                 
                                        '<tr class="underline"><td><a href="' . tep_href_link(FILENAME_CONTACT_US) . '">' . BOX_INFORMATION_CONTACT . '</a></td></tr>');

  new infoBox($info_box_contents);
?>
          </table>
        </td>
      </tr>
    </table>

  </td>
</tr>
<!-- information_eof //-->

Et en css :

.underline
{
  border-bottom:1px dashed #000000;
}