Problème de ruban
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Problème de ruban
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 CSS
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;
}
Dernière édition par Sanae le Jeu 15 Mai 2014 - 21:40, édité 1 fois
Re: Problème de ruban
Up *-*
Re: Problème de ruban
Up *-*
Re: Problème de ruban
Bonjour,
serait-il possible d'avoir un lien vers le forum concerné s'il vous plait ? ^^
serait-il possible d'avoir un lien vers le forum concerné s'il vous plait ? ^^
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Problème de ruban
je n'y vois pas les rubans ? ^^"
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Problème de ruban
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 ?
Re: Problème de ruban
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
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Problème de ruban
Bonjour,
Je viens d'installer le code pour que vous puissiez y jeter un oeil.
=)
Nouveau code CSS
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;
}
Re: Problème de ruban
merci ^^
essayez avec ce code css :
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;
}
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Problème de ruban
*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 ?
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 ?
Re: Problème de ruban
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 :
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) :
Et ajoutez-y :
Le bloc devrait être centré ^^
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é ^^
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Problème de ruban
Merci infiniment de l'aide !
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum