Effet "border-bottom" dans "a.forumlink" (CSS)

[Arc-En-Ciela]

• Bonjour !
  
  Alors, mon problème est que la ligne pointillée du "border-bottom" que j'ai installée ne s'étend pas jusqu'au bout de la cellule en s'arrêtant à différent endroit pour chaque forum. Est-ce que mon code est erroné ou est-ce autre chose ? (J'ai supposé que ça pouvait être à cause du "x messages dans y sujets")
  
  Voici un screen de ce que j'obtiens:
  
  
  Et mon code CSS de cette section:
  

  Code:

  /* TITRE FORUMS */
a.forumlink { font-family: georgia;
 font-size: 17px;
 letter-spacing:1px;
 font-weight: bold;
 font-style: italic;
 text-shadow: 1px 1px 1px #FFFFFF;
 border-bottom: dotted #FFFFFF;
 display: block;
 padding-left: 75px; }

  J'ai essayé en ôtant le display, en ajoutant une width..., bref, ça ne marche pas TT__TT.
  
  Ah oui, j'aimerais savoir s'il est possible de personnaliser la "décoration" de la ligne. Par exemple, au lieu d'avoir des pointillés carrés, d'avoir des pointillés ronds, en losanges ou autres, une ondulation ou une ligne brisée "style éclair".
  
  Merci beaucoup,
  Ciel@

[SoraNoHime]

Bonsoir,

cela ne vient pas de la css, mais de votre tableau dans le template index_box. Pouvez-vous me le fournir ?

Cordialement.

[Arc-En-Ciela]

Le voici :

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<span class="gensmall">{LAST_VISIT_DATE}<br />
{CURRENT_TIME}<br />
</span>
<!-- END switch_user_logged_in -->
<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
<!-- END switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td></tr></table>

<!-- DEBUT MODIF ONGLETS -->

<script type="text/javascript">
<!--
document.write('<div align="center">
<ul class="conteneur_onglets"><font size=1><big><span style="font-variant: small-caps">
<li onClick="change_cat(1)" class="onglet actif" id="onglet_1">[ » Deforis Jocus ]</li>
<li onClick="change_cat(2)" class="onglet " id="onglet_2"> [ » Liber ]</li>
<li onClick="change_cat(3)" class="onglet " id="onglet_3"> [ » Temporale ]</li>
<li onClick="change_cat(4)" class="onglet " id="onglet_4"> [ » Aeolicus ]</li>
<li onClick="change_cat(5)" class="onglet " id="onglet_5"> [ » Pyrei ]</li>
<li onClick="change_cat(6)" class="onglet " id="onglet_6"> [ » Aquaticum ]</li>
<li onClick="change_cat(7)" class="onglet " id="onglet_7"> [ » Sylvestre ]</li>
<li onClick="change_cat(8)" class="onglet " id="onglet_8"> [ » Lucidus ]</li>
<li onClick="change_cat(9)" class="onglet " id="onglet_9"> [ » Obscurum ]</li>
<li onClick="change_cat(10)" class="onglet " id="onglet_10"> [ » Incognitus ]</li>
<li onClick="change_cat(11)" class="onglet " id="onglet_11"> [ » Alterum ]</li>
</span></big></font></ul></div>');

var compteur_cat = 1;

function change_cat(numero)
{
   if(document.getElementById('categorie_'+numero))
   {
      /* affichage de la bonne categorie */
      $('table[id^=categorie_]').css('display','none');
      $('table[id=categorie_'+numero+']').fadeIn();;
      
      /* affichage du bon onglet */
      $('.actif').removeClass("actif");
      $('.onglet[id=onglet_'+numero+']').addClass("actif");
   }
}

function capture_cat()
{
   if(compteur_cat == 1)
   {
      document.write('<table class="forumline" id="categorie_' + compteur_cat + '" >');
   }
   else
   {
      document.write('</table><table class="forumline" id="categorie_' + compteur_cat + '" style="display:none;">');
   }
   
   compteur_cat++;
}

//-->
</script>

<!-- BEGIN catrow --><!-- BEGIN tablehead -->

<script type="text/javascript">
<!--
   capture_cat();
//-->
</script>

<!-- FIN MODIF ONGLETS -->


<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
<th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
</tr>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
<h{catrow.cathead.LEVEL} class="hierarchy">
<span class="cattitle">
<a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
</span>
</h{catrow.cathead.LEVEL}>
</td>
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
<!-- END inc -->
<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td>
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">

<table width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
            </span>
        </h{catrow.forumrow.LEVEL}></td><td style="padding-right: 8px; text-align: right;" class="gensmall">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.</td></tr></tbody></table>

<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
</td>
<!-- BEGIN forum_link_no -->
<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td>
<!-- END forum_link_no -->
<!-- BEGIN forum_link -->
<td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
<!-- END forum_link -->
</tr>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

[SoraNoHime]

Repérez ceci :

Code:

<table width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

Et changez le ainsi :

Code:

<table width="100%" class="barre"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

puis dans votre css changez ceci :

Code:

/* TITRE FORUMS */
a.forumlink { font-family: georgia;
 font-size: 17px;
 letter-spacing:1px;
 font-weight: bold;
 font-style: italic;
 text-shadow: 1px 1px 1px #FFFFFF;
 border-bottom: dotted #FFFFFF;
 display: block;
 padding-left: 75px; }

en

Code:

/* TITRE FORUMS */
a.forumlink { font-family: georgia;
 font-size: 17px;
 letter-spacing:1px;
 font-weight: bold;
 font-style: italic;
 text-shadow: 1px 1px 1px #FFFFFF;
 padding-left: 75px; }
.barre {
 border-bottom: dotted #FFFFFF;
}

Cordialement

[Arc-En-Ciela]

• Mon dieu, c'est merveilleux, ça fonctionne Oo
  
  Merci beaucoup !