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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Arc-En-Ciela le Jeu 21 Juil 2011 - 3:59

  • 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@


Dernière édition par Arc-En-Ciela le Jeu 21 Juil 2011 - 4:29, édité 1 fois

Arc-En-Ciela
***

Messages : 120
Inscrit(e) le : 22/08/2010

http://alter-mundus.superforum.fr/portal.htm
Arc-En-Ciela a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet "border-bottom" dans "a.forumlink" (CSS)

Message par SoraNoHime le Jeu 21 Juil 2011 - 4:07

Bonsoir,

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

Cordialement.

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet "border-bottom" dans "a.forumlink" (CSS)

Message par Arc-En-Ciela le Jeu 21 Juil 2011 - 4:15

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 -->

Arc-En-Ciela
***

Messages : 120
Inscrit(e) le : 22/08/2010

http://alter-mundus.superforum.fr/portal.htm
Arc-En-Ciela a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet "border-bottom" dans "a.forumlink" (CSS)

Message par SoraNoHime le Jeu 21 Juil 2011 - 4:24

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

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet "border-bottom" dans "a.forumlink" (CSS)

Message par Arc-En-Ciela le Jeu 21 Juil 2011 - 4:28

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

    Merci beaucoup !

Arc-En-Ciela
***

Messages : 120
Inscrit(e) le : 22/08/2010

http://alter-mundus.superforum.fr/portal.htm
Arc-En-Ciela a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum