Comment créer un effet de ligne en dessous du texte voulu?

[Rin_.]

Bonjour,
Je vous interpelle une fois de plus pour vous faire part d'un problème "d'effet".
Voyez par vous-même le résultat sur un forum.



Comment réaliser le même effet (la ligne perçue en dessous du texte)?

Cordialement.

[SoraNoHime]

Bonjour, cela dépend.

S'agit-il d'une image ? D'un effet css ?

Je ne peux le dire avec ce simple scan. Pourriez-vous me dire avec un schèma de votre forum où vous désirez ceci. Ainsi je pourrais vous expliquer comment faire.

Cordialement.

[Rin_.]

Ce n'est pas un image, mais je ne sais si c'est un travail au niveau d'un CSS ou plutôt de l'HTML.

Je ne possède malheureusement pas assez de temps pour faire un shèma.
Je sais juste que ce code soit présent sur ma page d'accueil.

Cordialement.

[SoraNoHime]

Je pense que ce que tu cherchez à faire est ceci : https://forum.forumactif.com/t305713-codes-css-pour-forum

Il suffit d'enlever le background-color de la css. Et de personnaliser à ton gout.

Cordialement.

[Rin_.]

En fait non.
Je pense que je me suis mal exprimée, mais ce n'est pas grave : je voulais dire la LIGNE derrière le texte.

[SoraNoHime]

Puis-je avoir votre template index_box, ainsi que la css associée ?

Je vais voir ce que je peux faire alors pour n'avoir que cette ligne.

Cordialement.

[Rin_.]

Où se trouve la CSS associée?
Voici la template :

Code:

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

         {CURRENT_TIME}

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

         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>

         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      <th nowrap="nowrap" width="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</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">
         <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}>
         <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>
      <td class="row3" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
   </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 -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

J'insiste sur le fait que la ligne est pour des sujets dans des sous-catégories.

Cordialement.

[SoraNoHime]

Bonjour

Quand je dis associée, je parle de css qui fonctionnerait sur vos catégorie.

Aller voir dans Pa > Affichage > Couleurs et à droite cliquez sur l'onglet Feuille de style css.

Edit :

J'insiste sur le fait que la ligne est pour des sujets dans des sous-catégories.
Cordialement.

Si je prend par rapport au forum dans votre profil :



Ce serait bien sur réglement et contexte ?

[Rin_.]

Oui et non.
En fait, j'aimerai pouvoir le mettre sur réglement et contexte, mais à l'aide d'un autre code, j'aimerai pouvoir le poster sur un "topic" si vous préférez.

Voilà mon CSS, en entier :

Code:

.mon_onglet{
  display: block;
  padding: 5px;
  margin: 4px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
}
.mon_onglet:hover{
  background: #b8efa1;
}       
.mon_onglet_selected{
  display: block;
  padding: 5px;
  margin: 4px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
}         
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  padding: 30px;
  margin: 10 px;
  height: 300px;}
#mes_contenus, #mes_onglets{
  height: 100%;
  width:100%;}


/*----- INFOBULLES ------*/

a.imginfo span {
  display: none;
}

a.imginfo:hover {
  background: none;
  z-index: 999;
  cursor: help;
}

a.imginfo:hover span {
  display: inline;
  position: absolute;
  white-space: nowrap;
  top: 1020px;
  left: 450px;
  background: white;
  color: 7d7d7d;
  padding: 3px;
  border: 3px solid #b6b6b6;
}

body { cursor: crosshair }
a:hover { cursor:ne-resize; }

u{border-bottom: 2px solid;border-color:#1f1f1f;text-decoration: none;
-moz-border-radius:10px;}

I{border-bottom:none; color:#1f1f1f;text-decoration: none
}

a:hover{text-transform:uppercase;}

.bodylinewidth {
width:70%}


a.mainmenu:link, a.mainmenu:visited{
background-color: #8B8B8B;
border-left: 6px solid #8B8B8B;
border-right: 6px solid #8B8B8B;
-moz-border-radius:12px;
}

a.forumlink:hover, a.forumlink:hover:visited{
background-color: #E3DFD6;
border-left: 9px solid #E3DFD6;
border-right: 9px solid #E3DFD6;
-moz-border-radius:6px;}

a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a { text-decoration: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; }

.quote{
font-family: Tahoma;
font-size: 11px;
color: #616161;
line-height: 125%;
background-color: #1f1f1f;
border: #1f1f1f;
border-style: solid;
border: 1px #1f1f1f;
dotted;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
-moz-border-radius:6px;}

.code{
font-family: Courier,Courier New,sans-serif;
font-size: 11px;
color: #616161;
background-color: #1f1f1f;
border: #1f1f1f;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px
border: 1px #1f1f1f;
dotted;
-moz-border-radius:6px;}

input,textarea, select {
-moz-border-radius-bottomleft:9px;
-moz-border-radius-bottomright:9px;
-moz-border-radius-topleft:9px;
-moz-border-radius-topright:9px;
}


a {font-variant: small-caps;}
.forumline{-moz-border-radius:15px;}
.bodyline {-moz-border-radius:40px;}

[SoraNoHime]

OK. Je saisis mieux. Plus besoin des templates alors.

voici ce qu'il faudrait faire. Créer une ligne, et une div contenant le texte qui sera déplacé de sa position.

Exemple : mettre dans le post

Code:

<div class="deplace">ceci est un exemple</div>
<hr class="barre">

Et dans votre css mettez :

Code:

.deplace {
position ; relative;
top : 10px;
z-index : 99;
}

.barre {
border : 1px solid #ff0000;
}

J'attire votre attention sur ce qu'il y a dans le .deplace, vous pouvez régler la position ici : top : 10px;

Cordialement.

[Rin_.]

Sa ressemble au résultat voulu, mais comment réduire la taille de la "barre"?

[SoraNoHime]

La partie en rouge règle l'épaisseur du trait.

border : 1px solid #ff0000;

Cordialement.

[Rin_.]

D'accord, et est-ce possible de régler sa longueur?

[SoraNoHime]

Essayez ceci :

.barre {
border : 1px solid #ff0000;
width: 75%;
}

[Rin_.]

Ce code est à placer dans le CSS, je suppose?

[SoraNoHime]

oui à la place de l'ancien .barre.

[Rin_.]

En effet la ligne est désormais à la bonne taille.

Mais maintenant, comment positionner le texte (dans ce cas précis : Ceci est un exemple) à gauche (voir au-dessus) de cette fameuse ligne?

[SoraNoHime]

Et dans votre css mettez :

[code].deplace {
position ; relative;
top : 10px;
z-index : 99;
}

J'attire votre attention sur ce qu'il y a dans le .deplace, vous pouvez régler la position ici : top : 10px;

Cordialement.

Vous pouvez rajoutez dans cette balise un left : 10px; par exemple pour voir ce que cela donne. régler donc en ajustant les taille de left et top dans cette balise (^^ en sachant que les valeur négatives sont acceptées)

Cordialement.

[Rin_.]

Le texte reste toujours à la même position.
Même avec le left : 10px;

Peut-être l'ai-je mal placé?

Voici l'extrait de mon CSS :

Code:

.deplace {
position ; relative;
top : 1px;
left : 10px;
z-index : 99;
}

.barre {
border : 1px solid #ff0000;
width: 75%;
}

[SoraNoHime]

.deplace {
position : relative;
top : 1px;
left : 10px;
z-index : 99;
}

.barre {
border : 1px solid #ff0000;
width: 75%;
}

voici la correction ^^

[Rin_.]

Merci, je vais pouvoir commencer l'agencement de ma PA *0*
Le sujet est : Résolu

Merci encore.