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

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

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

Message par Rin_. le Mer 1 Juin 2011 - 16:22

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.


Dernière édition par Rin_. le Ven 3 Juin 2011 - 18:22, édité 1 fois

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://google.fr
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer un effet de ligne en dessous du texte voulu?

Message par SoraNoHime le Mer 1 Juin 2011 - 16:52

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.

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: Comment créer un effet de ligne en dessous du texte voulu?

Message par Rin_. le Mer 1 Juin 2011 - 17:05

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.

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://google.fr
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer un effet de ligne en dessous du texte voulu?

Message par SoraNoHime le Mer 1 Juin 2011 - 17:25

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

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

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: Comment créer un effet de ligne en dessous du texte voulu?

Message par Rin_. le Mer 1 Juin 2011 - 18:37

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.

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://google.fr
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer un effet de ligne en dessous du texte voulu?

Message par SoraNoHime le Mer 1 Juin 2011 - 18:39

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.

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: Comment créer un effet de ligne en dessous du texte voulu?

Message par Rin_. le Ven 3 Juin 2011 - 11:57

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.

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://google.fr
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer un effet de ligne en dessous du texte voulu?

Message par SoraNoHime le Ven 3 Juin 2011 - 11:59

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 :
@Rin_. a écrit:
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 ?

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: Comment créer un effet de ligne en dessous du texte voulu?

Message par Rin_. le Ven 3 Juin 2011 - 12:21

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

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://google.fr
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer un effet de ligne en dessous du texte voulu?

Message par SoraNoHime le Ven 3 Juin 2011 - 12:36

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.

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: Comment créer un effet de ligne en dessous du texte voulu?

Message par Rin_. le Ven 3 Juin 2011 - 16:41

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

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://google.fr
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer un effet de ligne en dessous du texte voulu?

Message par SoraNoHime le Ven 3 Juin 2011 - 16:46

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

border : 1px solid #ff0000;

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: Comment créer un effet de ligne en dessous du texte voulu?

Message par Rin_. le Ven 3 Juin 2011 - 16:47

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

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://google.fr
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer un effet de ligne en dessous du texte voulu?

Message par SoraNoHime le Ven 3 Juin 2011 - 16:49

Essayez ceci :

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

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: Comment créer un effet de ligne en dessous du texte voulu?

Message par Rin_. le Ven 3 Juin 2011 - 17:04

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

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://google.fr
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer un effet de ligne en dessous du texte voulu?

Message par SoraNoHime le Ven 3 Juin 2011 - 17:05

oui à la place de l'ancien .barre.

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: Comment créer un effet de ligne en dessous du texte voulu?

Message par Rin_. le Ven 3 Juin 2011 - 17:11

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?

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://google.fr
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer un effet de ligne en dessous du texte voulu?

Message par SoraNoHime le Ven 3 Juin 2011 - 17:16

Macema a écrit: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.

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: Comment créer un effet de ligne en dessous du texte voulu?

Message par Rin_. le Ven 3 Juin 2011 - 17:22

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

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://google.fr
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer un effet de ligne en dessous du texte voulu?

Message par SoraNoHime le Ven 3 Juin 2011 - 18:01

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

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

voici la correction ^^

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: Comment créer un effet de ligne en dessous du texte voulu?

Message par Rin_. le Ven 3 Juin 2011 - 18:04

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

Merci encore.

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://google.fr
Rin_. 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