Problème de ruban

[Sanae]

Bonjour,

J'ai voulu faire un joli ruban derrière les titres des catégories mais mon problème est que à droite du ruban, celui-ci s'en au lieu de rester coller à la base du ruban. Voilà une bonne heure que je tente à régler la chose mais je n'y arrive toujours pas. Je vous remercie d'avance de l'aide que vous me donnerez.



Code Index_Box

Code:

<br>
          <div class="partenaires"><center>Nos partenaires</center><marquee onmouseout="this.start();" onmouseover="this.stop();" loop="infinite" scrolldelay="55" scrollamount="5" direction="left" behavior="slide"><a href="http://tadakai-rpg.forumgratuit.fr/forum"><img src="http://img11.hostingpics.net/pics/996602tadakai.png" /></a><a target="_blank" href="http://just-married.forum-nation.com/"><img src="http://img15.hostingpics.net/pics/922085110.png" /></a><a href="http://lucifen.forumactif.org/"><img src="http://image.noelshack.com/fichiers/2014/17/1398531728-logo-100-35.png" /></a><a href=" http://hetalia-b-k.forumgratuit.be/"><img src=" http://nsa35.casimages.com/img/2013/09/07/13090705471324726.jpg" /></a><a href="http://e-magique.lebonforum.com/"><img src="http://img4.hostingpics.net/pics/840379bouton1002.png"></a></marquee>
</div>

          <br>
                    <!-- BEGIN catrow --><!-- BEGIN tablehead --><center><table width="60%" border="0" cellspacing="0" cellpadding="0">
</table>
                <table class="tourcat" width="100%" border="0" cellspacing="0" cellpadding="0">
                      <!-- 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}">
 <div class="ribbon-wrapper">
 <div class="ribbon-front">{catrow.cathead.CAT_TITLE}</div>
 <div class="ribbon-edge-topleft"></div>
 <div class="ribbon-edge-topright"></div>
 <div class="ribbon-edge-bottomleft"></div>
 <div class="ribbon-edge-bottomright"></div>
 <div class="ribbon-back-left"></div>
 <div class="ribbon-back-right"></div>
 </div></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 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 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}"><div= class>{catrow.forumrow.FORUM_NAME}</div>
                              </a><br />
                                </span>
                            </h{catrow.forumrow.LEVEL}>
                            <div class="descrip">
                            <span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
                            <div class="sous-forum"><center>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</center></div>
                            <span class="gensmall">
                <div class="sujmsg">
                                <!-- BEGIN switch_moderators_links -->
                  {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}</div>
                                <!-- END switch_moderators_links -->

                          <td align="center" valign="middle" height="50">
                            <span class="gensmall"><div style="width:150px;" class="dersuj">{catrow.forumrow.LAST_POST}</div></span>
                          </td>
                                <!--Script d'apparition des sous forums-->
        <script>
            $(function(){
                $('.sous-forum center').each(function(){
                    if($(this).html() != ""){
                        $(this).parent().css('display', 'inline-block');
                    }else{
                        $(this).parent().addClass('subhidden');
                    }
                });
            });
        </script>
        <!--Fin du script des sous forums-->
                     <!-- END forumrow -->
                      <!-- BEGIN catfoot -->
                      <tr>
                          <!-- BEGIN inc -->
                          <td class="{catrow.catfoot.inc.INC_CLASS}" width="46">
                    <img src="{SPACER}" height="400" width="700" /></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 --></center>

Code CSS

Code:

/* ribbon style */

 .ribbon-wrapper {
 position: relative;
 border-bottom: 5px solid #ccc;
 border-top: 5px solid #ccc;
 -moz-border-bottom-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
 -webkit-border-bottom-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
 -moz-border-top-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
 -webkit-border-top-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
}
  .ribbon-front {
 background-color: #102047; height: 40px;
 width: 335px;
 position: relative;
 left:-20px;
 z-index: 2;
}


  .ribbon-edge-topleft,
  .ribbon-edge-topright,
  .ribbon-edge-bottomleft,
  .ribbon-edge-bottomright {
 position: absolute;
 z-index: 1;
 border-style:solid;
 height:0px;
 width:0px;
}

  .ribbon-edge-topleft,
  .ribbon-edge-topright {
}

  .ribbon-edge-bottomleft,
  .ribbon-edge-bottomright {
 top: 40px;
}

  .ribbon-edge-topleft,
  .ribbon-edge-bottomleft {
 left: -20px;
 border-color: transparent #082570 transparent transparent;
}

  .ribbon-edge-topleft {
 top: -5px;
 border-width: 5px 10px 0 0;
}
  .ribbon-edge-bottomleft {
 border-width: 0 10px 0px 0;
}

  .ribbon-edge-topright,
  .ribbon-edge-bottomright {
 left: 310px;
 border-color: transparent transparent transparent #082570;
}

  .ribbon-edge-topright {
 top: 0px;
 border-width: 0px 0 0 5px;
}
  .ribbon-edge-bottomright {
 border-width: 0 0 5px 5px;
}

  .ribbon-back-left {
 position: absolute;
 top: -5px;
 left: -30px;
 width: 20px;
 height: 40px;
 background-color: #102047; z-index: 0;
}

  .ribbon-back-right {
 position: absolute;
 top: 0px;
 right: 0px;
 width: 20px;
 height: 40px;
 background-color: #102047; z-index: 0;
}

[Sanae]

Up !

[Sanae]

Up *-*

[Sanae]

Up o>

[Sanae]

Up *-*

[MlleAlys]

Bonjour,
serait-il possible d'avoir un lien vers le forum concerné s'il vous plait ? ^^

[Sanae]

Bonjour, tout a fait. Le voilà.=}

http://sokujitsu.forumactif.info/

[MlleAlys]

je n'y vois pas les rubans ? ^^"

[Sanae]

Oui, j'ai supprimé car ça ne jouait pas pour ne pas accommoder les membres. J'ai pris en photo - car mon screen script est mort -. Dois-je l'installer pour que vous puissiez voir ?

[MlleAlys]

ce serait plus facile pour moi pour essayer de voir d'où vient le problème, puisque j'ai essayé d'installer vos code sur mon forum mais rien ne s'affiche... ^^" Bref, si c'est possible, oui merci

[Sanae]

Bonjour,

Je viens d'installer le code pour que vous puissiez y jeter un oeil.
=)

Nouveau code CSS

Code:

/* ribbon style */

 .ribbon-wrapper {
   position: relative;
}
  .ribbon-front {
   background-color: #C4A062;   height: 40px;
   width: 140px;
   position: relative;
   left:-20px;
   z-index: 2;
}

  .ribbon-front,
  .ribbon-back-left,
  .ribbon-back-right
{
   -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
   -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
   -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
   -o-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
}

  .ribbon-edge-topleft,
  .ribbon-edge-topright,
  .ribbon-edge-bottomleft,
  .ribbon-edge-bottomright {
   position: absolute;
   z-index: 1;
   border-style:solid;
   height:0px;
   width:0px;
}

  .ribbon-edge-topleft,
  .ribbon-edge-topright {
}

  .ribbon-edge-bottomleft,
  .ribbon-edge-bottomright {
   top: 40px;
}

  .ribbon-edge-topleft,
  .ribbon-edge-bottomleft {
   left: -20px;
   border-color: transparent #190F0B transparent transparent;
}

  .ribbon-edge-topleft {
   top: -5px;
   border-width: 5px 10px 0 0;
}
  .ribbon-edge-bottomleft {
   border-width: 0 10px 0px 0;
}

  .ribbon-edge-topright,
  .ribbon-edge-bottomright {
   left: 110px;
   border-color: transparent transparent transparent #190F0B;
}

  .ribbon-edge-topright {
   top: 0px;
   border-width: 0px 0 0 10px;
}
  .ribbon-edge-bottomright {
   border-width: 0 0 5px 10px;
}

  .ribbon-back-left {
   position: absolute;
   top: -5px;
   left: -50px;
   width: 40px;
   height: 40px;
   background-color: #C4A062;   z-index: 0;
}

  .ribbon-back-right {
   position: absolute;
   top: 5px;
   right: -50px;
   width: 40px;
   height: 40px;
   background-color: #C4A062;   z-index: 0;
}


[MlleAlys]

merci ^^

essayez avec ce code css :

Code:

/* ribbon style */
.ribbon-wrapper {
    position: relative;
    display: inline-block;
    margin: 20px 0 20px -20px;
}
.ribbon-front {
    background-color: #C4A062;
    height: 40px;
    position: relative;
    z-index: 2;
    padding: 0 10px;
    line-height: 40px;
}
.ribbon-front, .ribbon-back-left, .ribbon-back-right {
    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
    -khtml-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
    -o-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
}
.ribbon-edge-topleft, .ribbon-edge-topright, .ribbon-edge-bottomleft, .ribbon-edge-bottomright {
    position: absolute;
    z-index: 1;
    border-style:solid;
    height:0px;
    width:0px;
}
.ribbon-edge-topleft, .ribbon-edge-bottomleft {
    border-color: transparent #190F0B transparent transparent;
}
.ribbon-edge-topleft {
    border-width: 5px 10px 0 0;
    top: -5px;
    left: 0;
}
.ribbon-edge-bottomleft {
    border-width: 0 10px 0px 0;
}
.ribbon-edge-topright, .ribbon-edge-bottomright {
    border-color: transparent transparent transparent #190F0B;
}
.ribbon-edge-bottomright {
    border-width: 0 0 5px 10px;
    right: 0;
    bottom: -5px;
}
.ribbon-edge-bottomright {
    border-width: 0 0 5px 10px;
}
.ribbon-back-left {
    background-color: #C4A062;
    height: 40px;
    left: -30px;
    position: absolute;
    top: -5px;
    width: 40px;
    z-index: 0;
}
.ribbon-back-right {
    background-color: #C4A062;
    height: 40px;
    position: absolute;
    right: -30px;
    top: 5px;
    width: 40px;
    z-index: 0;
}

[Sanae]

*o* ça fonctionne ! Merciii !!

Comment avez-vous fait pour ne pas être trop indiscrète ?

Si je veux centrer le ruban et le titre au milieu du block, je mets <center> directement dans les templates ou via le CSS ?

[MlleAlys]

le bloc principal clair était limité à 140px de largeur, mais l'élément "ribbon-wraper" qui entourait le ruban entier était encore d'une largeur de 100%. Or c'était par rapport à cet élément là qu'étaient placés les bords du ruban. D'où le fait que le bord droit se retrouve tout à droite, à la fin de ribbon-wraper en fait, plutôt qu'à la fin du bloc central.
Et, pour éviter cela, j'ai affiché ribbon-wraper en "inline-block", de façon à ce que sa largeur s'adapte à son contenu, puis fait quelques ajustements pour le placement les bords du ruban ^^

Pour le centrer :

Retrouvez ce passage dans le css :

Code:

.ribbon-wrapper {
  display: inline-block;
  margin: 20px 0 20px -20px;
  position: relative;
}

Et modifiez margin: 20px 0 20px -20px; en margin: 20px;

Puis retrouve dans votre css ce passage (ce n'est pas dans la partie ruban) :

Code:

a.cattitle {
  font-size: 22px;
  margin: 4px;
}

Et ajoutez-y :

Code:

a.cattitle {
  font-size: 22px;
  margin: 4px;
  display: block;
  text-align: center;
}

Le bloc devrait être centré ^^

[Sanae]

Merci infiniment de l'aide !