AccueilAccueil  FAQFAQ  RechercherRechercher  S'enregistrerS'enregistrer  MembresMembres  GroupesGroupes  ConnexionConnexion  

Partagez | 
 

 cadre à côté du forum

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

avatar

Féminin
Nombre de messages : 224
Age : 20
Localisation : quelque part dans un monde sans fin
Logiciel de Création : The Gimp et un peu photoshop
Date d'inscription : 18/06/2010

MessageSujet: cadre à côté du forum   Lun 30 Juil 2012, 17:09

BONJOUR \o/

J'aurai besoin de votre aide parce qu'en fait sur mon forum j'ai des top-partenaires et je les ai mis dans un cadre sur le côté du forum. L'ennui, c'est qu'il cache les messages >< C'est pour ça, je voudrais savoir s'il n'y a pas un moyen de les mettre sur le fond du forum?

Voilà un petit schéma :

Spoiler:
 

J'espère que vous comprendrez et que vous pourrez m'aider ^^

GRACIAS en tout cas ^^ \o/
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://weird-pension.jeunforum.com/
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: cadre à côté du forum   Mer 01 Aoû 2012, 09:53

Huum, à priori c'est en fonction de la taille d'écran du membre que le cadre est dessus le texte ou non.

As tu essayé de le mettre plus vers le coté et de le faire coulisser au passage de la souris ?

Ou de baisser son opacité pour que même si le cadre chevauche le contenu du forum, on puisse quand même lire ce qu'il y a dessous ?
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Light

avatar

Féminin
Nombre de messages : 224
Age : 20
Localisation : quelque part dans un monde sans fin
Logiciel de Création : The Gimp et un peu photoshop
Date d'inscription : 18/06/2010

MessageSujet: Re: cadre à côté du forum   Jeu 02 Aoû 2012, 08:06

Et bien comme je suis absolument nulle en code, et bien je n'ai touché à rien mais c'est vrai que les faire coulissants ce serait bien ^^
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://weird-pension.jeunforum.com/
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: cadre à côté du forum   Ven 03 Aoû 2012, 10:34

Ok cool alors ! Bon, le code pour mettre les partenaires sur le côté a été ajouté à partir d'un template non ?
Si c'est le cas je pourrais avoir le code du cadre ? Je te ferais modifier le CSS par la suite pour que le cadre coulisse au passage de la souris.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Light

avatar

Féminin
Nombre de messages : 224
Age : 20
Localisation : quelque part dans un monde sans fin
Logiciel de Création : The Gimp et un peu photoshop
Date d'inscription : 18/06/2010

MessageSujet: Re: cadre à côté du forum   Ven 03 Aoû 2012, 13:18

Pas de problème ^^ Voilà donc le template Very Happy

Code:
<!-- BEGIN html_validation -->
<div>
   <div>
      <table>
         <tbody>
            <tr>
               <td>
<!-- END html_validation -->
               </td>
               <td valign="top" width="{C3SIZE}">
               <div id="{ID_RIGHT}">
                  <!-- BEGIN giefmod_index2 -->
                  {giefmod_index2.MODVAR}
                  <!-- BEGIN saut -->
                  <div style="height: {SPACE_ROW}px"></div>
                  <!-- END saut -->
                  <!-- END giefmod_index2 -->
               </div>
               </td>
            </tr>
                  <div style="position: absolute; top: 800px; right: 10px; "><span class="boxtoproundtitle">Tops-Partenaires</span>
                    <div style="width: 200px; text-align: center;" class="boxmenu"><a href="http://www.mysteryorphanage.com/">www.</a>Mystery Orphanage<br><a href="http://welcome-to-inazuma.forumactif.com/">www.</a>Sekai No Chousen</br><a href="http://newday-thelastchance.forum-canada.com">www.</a>New Day<br><a href="http://under-graph.forumactif.fr/">www.</a>Under Graph</br>
</div></div>

<div style="position: absolute; top: 180px; right: 0px; "><span class="boxtoproundtitle">Votez pour le forum</span>
  <div style="width: 200px; text-align: center;" class="boxmenu"><a href="http://www.root-top.com/topsite/korben/in.php?ID=12469">♠</a>....<a href="http://www.root-top.com/topsite/moonlighttoprpg/in.php?ID=2778">♠</a>.....<a href="http://www.root-top.com/topsite/blackycalimera/in.php?ID=3094">♠</a>....
  <a href="http://www.root-top.com/topsite/abysses/in.php?ID=6174">♠</a>....<a href="http://www.root-top.com/topsite/titop/in.php?ID=1629">♠</a>....<a href="http://www.root-top.com/topsite/forumrpg/in.php?ID=6961">♠</a></div></div>
         </tbody>
      </table>
   </div>
</div>
<!-- close div id="page-body" -->
<div id="page-footer">
   <div align="center">
      <div class="gen">
<!-- BEGIN html_validation -->
      </div>
   </div>
</div>
<!-- END html_validation -->
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://weird-pension.jeunforum.com/
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: cadre à côté du forum   Ven 03 Aoû 2012, 17:41

D'acc, je vais faire quelques tests, j'espère que j'arriverai à faire coulisser tout ça Smile
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Light

avatar

Féminin
Nombre de messages : 224
Age : 20
Localisation : quelque part dans un monde sans fin
Logiciel de Création : The Gimp et un peu photoshop
Date d'inscription : 18/06/2010

MessageSujet: Re: cadre à côté du forum   Ven 03 Aoû 2012, 18:12

Merci beaucoup beaucoup beaucoup >< T'es vraiment géniale Ella" =u= *fait un gros calin qui étouffe Ella"*
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://weird-pension.jeunforum.com/
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: cadre à côté du forum   Lun 06 Aoû 2012, 17:05

Bon, je n'ai pas ton CSS donc je n'ai pas le même rendu visuel que toi sur mon forum de test, mais ça coulisse ;)

Déjà je te conseille de ne pas mettre tes div entre un tr et un tbody, mieux vaut le sortir directement du tableau, surtout que les boites sont en position absolute. Bref, mieux vaut que tu le mettes avant ou après la table.

Ensuite donc voilà ton code un chouilla corrigé ( surtout au niveau des ‹br› que tu ouvres et que tu fermes, or le saut de ligne est une balise unique qui s'ouvre et qui se ferme en même temps avec ‹br /› ) et ré-indenté pour une meilleure visualisation du contenu.

Code:
<div class="boxcoulissante" style="position: absolute; top: 800px; ">
   <span class="boxtoproundtitle">Tops-Partenaires</span>
   <div style="width: 200px; text-align: center;" class="boxmenu">
          <a href="http://www.mysteryorphanage.com/">www.</a>Mystery Orphanage
          <br /><a href="http://welcome-to-inazuma.forumactif.com/">www.</a>Sekai No Chousen
          <br /><a href="http://newday-thelastchance.forum-canada.com">www.</a>New Day
          <br /><a href="http://under-graph.forumactif.fr/">www.</a>Under Graph
     <br />
   </div>
</div>

<div class="boxcoulissante" style="position: absolute; top: 180px; ">
   <span class="boxtoproundtitle">Votez pour le forum</span>
   <div style="width: 200px; text-align: center;" class="boxmenu">
          <a href="http://www.root-top.com/topsite/korben/in.php?ID=12469">♠</a>....
          <a href="http://www.root-top.com/topsite/moonlighttoprpg/in.php?ID=2778">♠</a>.....
          <a href="http://www.root-top.com/topsite/blackycalimera/in.php?ID=3094">♠</a>....
     <a href="http://www.root-top.com/topsite/abysses/in.php?ID=6174">♠</a>....
          <a href="http://www.root-top.com/topsite/titop/in.php?ID=1629">♠</a>....
          <a href="http://www.root-top.com/topsite/forumrpg/in.php?ID=6961">♠</a>
   </div>
</div>

Et tu places ce qui correspond à .boxcoulissante :

Code:
.boxcoulissante{
  right:-150px;
 -webkit-transition:right 0.4s ease-in-out;
 -o-transition:right 0.4s ease-in-out;
 -moz-transition:right 0.4s ease-in-out;
 transition:right 0.4s ease-in-out;

}

.boxcoulissante:hover{
  right:0px;
 -webkit-transition:right 0.4s ease-in-out;
 -o-transition:right 0.4s ease-in-out;
 -moz-transition:right 0.4s ease-in-out;
 transition:right 0.4s ease-in-out;

}

Je te laisse modifier le right:-150px; en fonction de ce que tu veux Smile
Pour t'expliquer, tout est joué avec le :hover, on change juste son affichage par rapport au bord droit

Tiens moi au courant si ça marche cheers
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Light

avatar

Féminin
Nombre de messages : 224
Age : 20
Localisation : quelque part dans un monde sans fin
Logiciel de Création : The Gimp et un peu photoshop
Date d'inscription : 18/06/2010

MessageSujet: Re: cadre à côté du forum   Lun 06 Aoû 2012, 19:19

Et bien il y a un petit problème >< Si je ne passe pas ma souris dessus, les cadres se mettent sur le forum à gauche (là où il y a les profils -_-) et si je passe ma souris dessus, il apparait à droite en "résultat final " si tu veux ^^

Tiens, je te passe mon CSS si ça peut t'aider ;)


Code:
/*------------------ Fiche de présentation ------------------*/

/*--- Fond de la présentation ---*/

.fondpres {
  background-color : #000000; /* Couleur de fond */
  border-radius:70px 70px 10px 10px; /* Arrondis des bordures */
  width:600px; /* Largeur */
  color: #FFFFFF; /* Couleur du texte */
  border:10px solid #520000; /* Bordure : taille et couleur */
}

/*--- Les cadres ---*/

.cadrepres {
  background-color : #520000; /* Couleur de fond */
  color: #FFFFFF; /* Couleur du texte */
  border-radius:10px 10px 10px 10px; /* Arrondis des bordures */
  width:320px; /* Largeur */
  height:240px; /* Hauteur */
}

.cadrepres2 {
  background-color : #520000; /* Couleur de fond */
  color: #FFFFFF; /* Couleur du texte */
  border-radius:10px 10px 10px 10px; /* Arrondis des bordures */
  width:520px; /* Largeur */
  height:240px; /* Hauteur */
}

.cadrepres3 {
  background-color : #520000; /* Couleur de fond */
  color: #FFFFFF; /* Couleur du texte */
  border-radius:10px 10px 10px 10px; /* Arrondis des bordures */
  width:420px; /* Largeur */
  height:240px; /* Hauteur */
  margin-left : 20px; /* Marge à gauche */
}

/*--- Les titres ---*/

.titrepres {
    font-size: 30pt; /* Taille de la police */
  text-shadow: 0px 5px 10px #000000; /* Ombre sur le texte */
  font-family: palace script mt; /* Police */
  letter-spacing: 4px; /* Lettres espacées */
  margin-bottom: 10px; /* Marge en bas */
  margin-top: 10px; /* Marge en haut */
  color: #FFFFFF; /* Couleur du texte */
}

/*--- Nom du personnage ---*/

.nomperso{
    font-size: 25pt; /* Taille de la police */
  text-shadow: 0px 5px 10px #000000; /* Ombre sur le texte */
  font-family: script mt bold; /* Police */
  letter-spacing: 4px; /* Lettres espacées */
  margin-bottom: 10px; /* Marge en bas */
  margin-top: 10px; /* Marge en haut */
  color: #FFFFFF; /* Couleur du texte */
}

/*--- Scrollbars ---*/

.overflow1 {
  width:300px; /* Largeur */
  height:200px; /* Hauteur */
  overflow:auto;
  text-align: justify; /* Alignement du texte */
}

.overflow2 {
  width:500px; /* Largeur */
  height:200px; /* Hauteur */
  overflow:auto;
  text-align: justify; /* Alignement du texte */
}

.overflow3 {
  width:400px; /* Largeur */
  height:200px; /* Hauteur */
  overflow:auto;
  text-align: justify; /* Alignement du texte */
}

 /* =================
                              ===== Message d'accueil =====
        script by James1920 de CSSACTIF  - Novembre 13, 2010.  MAJ Avril 20, 2012
      http://www.themes-fa.com - BY-NC  (http://creativecommons.org/licenses/by-nc/2.0/fr/)

 =================  */

 
 
  /*----------------- Ma général ----------------- */
 

 /* Pour les défilement */
#scroller_container
{
padding-top: 15px;
overflow: hidden;
}
/* CSS Hack Safari */
#dummy
{
;#
}
#scroller_container
{
overflow: auto;
}


/*le tableau invisible */

.table25
{
border: none ;
}


/* Liens */

.a2
{
display: block;
width: 130px;
color: black;
text-align:center;
border: 1px solid black;
 -moz-border-radius: 5px;
height: 30px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}


.a2:hover
{

background-color: black;
color: white;
}



#table22 /* fond du ma */
{
width: 770px;
background-color: #090D08;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}




/*-----------------Titre----------------- */


/* Le titre special pour le texte de bienvenu */

.h2_themebienvenu
{
font-size: 14px;
background-color: #4A4646;
padding: 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
color: white;
text-align: center;
margin: 10px;
/max-width: 367px;
}


/* le titre special pour les credits */


.h2_themecredit
{
font-size: 14px;
background-color: #4A4646;
padding: 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
color: white;
text-align: center;
margin: 10px;
/max-width: 160px;
}

/* le titre pour les autres boites */



.h2_theme
{
font-size: 14px;
background-color: #4A4646;
padding: 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
color: white;
text-align: center;
margin: 10px;

}


/* effet de transparance FF */

.transparence {
background-color: transparent;
border: none;
opacity: 0.5;
}

.transparence:hover{
background-color: transparent;
border: none;
opacity: 2;
}

/*-----------------Les boites contenant les textes----------------- */





/* Navigation */

 .navi_ma
 {
  background-color:#5C5C5C;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
color: black;
font-size: 16px;
height: 300px;
margin: 10px;
width: 130px;
padding: 5px;
line-height:34px;
-webkit-box-shadow: 4px 4px 0 #e6e6e6; 
-moz-box-shadow: 4px 4px 0 #e6e6e6; 
-khtml-box-shadow: 4px 4px 0 #e6e6e6; 
padding-top: 20px;

}


/* News  */

 .news
 {
 background-color: #5C5C5C;
  -moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
color: black;
font-size: 14px;
height: 120px;
width: 160px;
margin: 10px;
overflow-y: auto;
overflow-x: visible;
padding: 5px;
-webkit-box-shadow: 4px 4px 0 #e6e6e6; 
-moz-box-shadow: 4px 4px 0 #e6e6e6; 
-khtml-box-shadow: 4px 4px 0 #e6e6e6; 
}

/* Partenaires */

.partenaire_test
{
 background-color: #5C5C5C;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
color: black;
font-size: 14px;
height: 105px;
width: 160px;
margin: 10px;
padding: 5px;
-webkit-box-shadow: 4px 4px 0 #e6e6e6; 
-moz-box-shadow: 4px 4px 0 #e6e6e6; 
-khtml-box-shadow: 4px 4px 0 #e6e6e6;   
padding-top: 20px;

}


/* message de bienvenu */


#bienvenu_ma
{
 background-color: #5C5C5C;
  -moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
color: black;
font-size: 14px;
height: 120px;
margin: 10px;
overflow-y: auto;
overflow-x: visible;
padding: 5px;
-webkit-box-shadow: 4px 4px 0 #e6e6e6; 
-moz-box-shadow: 4px 4px 0 #e6e6e6; 
-khtml-box-shadow: 4px 4px 0 #e6e6e6; 
width: 370px;
}
 
/* membres staffs */
 

 
 .staff
{
 background-color: #5C5C5C;
 -moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
color: black;
font-size: 10px;
height: 105px;
width: 180px;
margin: 10px;
padding: 5px;
font-size: 14px;
-webkit-box-shadow: 4px 4px 0 #e6e6e6; 
-moz-box-shadow: 4px 4px 0 #e6e6e6; 
-khtml-box-shadow: 4px 4px 0 #e6e6e6; 
padding-top: 20px;
}


/*crédits */

 
 .credits
 {
 background-color: #5C5C5C;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
color: white;
font-size: 14px;
height: 105px;
width: 160px;
margin: 10px;
padding: 5px;
-webkit-box-shadow: 4px 4px 0 #e6e6e6; 
-moz-box-shadow: 4px 4px 0 #e6e6e6; 
-khtml-box-shadow: 4px 4px 0 #e6e6e6; 
padding-top: 20px;

}




/*-----------------inffobulles----------------- */

 
div.infobulle
{
 position: relative;
 float: left;
color: black;
}

div.infobulle span
{
 display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover
{
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
  color: black;
}


/* style de l infobulle */

div.infobulle:hover span
{
display: inline; /* on affiche l'infobulle */
position: absolute;
top: 10px; /* on positionne notre infobulle */
background-color: #4A4646;
color: black;
 padding: 3px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
 white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
text-align: center;
font-size: 14px;
}

___________________________________
.mainmenu{
text-shadow: 1px 1px 1px black;
}
.postlink{
color: #000000
}
body{
background-image: url("IMAGE DE FOND DE FORUM");
}
.forumline{
border: 1px #171717 dashed;
}
.bodyline
{
  width: 80%;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px; /* est utilisé pour les navigateurs Linux et autres que Firefox*/
  background-color: #5C411F;
  background-attachment: fixed;
}
u{border-bottom: 1px dotted;border-color:#a9b841;text-decoration: none;
}

I{border-bottom:none; color:#999999;text-decoration: none;
}
 
a:hover {
text-decoration: none ; color: black ; border-bottom: 1px dotted #758219;
}

.bodylinewidth {
width:60%;}
body{
display:block;
}

a.cattitle{
 text-decoration: none;
 color : #000000;
 text-shadow: 1px 1px 1px black;
 }
a.cattitle:hover{
 text-decoration: none;
 text-shadow: 1px 1px 1px black;
 color: #FFFFFF;
 }
.forumlink{
 text-align: center;
 font-weight: bold;
 font-size: 12px;
 color : #000000;
 display: block;
 }
a.forumlink {
text-align: center;
background-image: url("IMAGE DE CATEGORIE");
border-bottom: 2px #740f0f;
border-top: 2px #740f0f;
-moz-border-radius: 7px ;
-webkit-border-radius: 7px;
border-right: 5px solid #740f0f;
border-left: 5px solid #740f0f;
-moz-border-radius: 7px ;
-webkit-border-radius: 7px;
color: #000000;
display:block;
}

a.forumlink:hover {
text-align: center;
text-decoration: none;
color : #ffffff;
text-shadow: #FFFFFF 1px 1px 1px;
background-color: #740f0f;
border-right: 3px solid #740f0f;
border-left: 3px solid #740f0f;
-moz-border-radius: 7px ;
-webkit-border-radius: 7px;
border-bottom: 2px solid #740f0f;
border-top: 2px solid #740f0f;
-webkit-border-radius: 7px;
-moz-border-radius: 7px ;

display:block;
}
a.forumlink:hover:visited{
background-color: #740f0f;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-left: 5px solid #740f0f;
-moz-border-radius: 6px ;
-webkit-border-radius: 6px;
border-right: 5px solid #740f0f;
}
 a.nav{
 text-decoration: none;
 color : #999999;
 }
a.nav:hover{
 text-decoration: none;
 }

a.topictitle:hover{
 text-decoration: none;
 color : #999999;
 }
 a.postlink:hover{
 text-decoration: none;
 color : #999999}
 a.gen:hover,a.genmed:hover,a.gensmall:hover{
 color:#999999;
 text-decoration: none;
 }
 a.copyright:hover {
 color: #dba1c1;
 text-decoration: none;
}
a:link
{
text-decoration: none;
}

a:visited
{
text-decoration: none;
}

a:active
{
text-decoration: none;
}
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; }
a.gen:hover,a.genmed:hover,a.gensmall:hover { background-color: #d4d4d2; }
a:hover{text-transform:uppercase;}

.quote{
font-family: Tahoma;
font-size: 12px;
color:#999999 ;
line-height: 125%;
background-color: #999999;
border: #cfcdce;
border-style: solid;
border: 1px #a08491 dotted;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;}

.code{
font-family: Courier,Courier New,sans-serif;
font-size: 11px;
color: #9b6b6b;
background-color: #E6E6E6;
border: #cfcdce;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border: 1px #a08491 dotted;}


a:hover{text-transform:uppercase;}

.bodylinewidth {
width:70%}




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

a.forumline{
    background-color: #ffffff;
    border: 5px #ffffff solid;
    }



.statistiques
{
border:0px;
background-image: url("image je sais pas quoi");
background-repeat: repeat-x;
background-position: center;
height:211px; /* HAUTEUR DE VOTRE IMAGE DE FOND, C'EST UNE VARIABLE */
}

.groupes
{
background-color:#dad0c7; /* FOND DES NOMS DE GROUPES */
border: 1px #D0D0D0 dotted; /* POUR METTRE LE CONTOUR EN POINTILLES */
-moz-border-radius : 5px 5px 5px 5px; /* ARRONDI DES CONTOURS */
height:40px; /* HAUTEUR DES ENCADRES */
padding-right:24px; /* SÉPARATION ENTRE LES GROUPES */
padding-left:24px;
padding-bottom:1px;
font-size:13px; /*TAILLE ECRITURE */
font-weight: bold; /* STYLE DE L'ECRITURE */
text-align:center;
text-decoration: none !important;
}




a.infobulle {
  position: relative;
}

a.infobulle span {
  display: none; /* ceci masque l'infobulle */
}
a.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}
a.infobulle:hover span {
  display: inline; /* ceci affiche l'infobulle */
  position: absolute;

  white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

  top: 5px; /* on positionne notre infobulle */
  left: 15px;

  background: #ebebeb; /* arrière-plan de l'infobulle */

  color: black; /* texte dans l'infobulle */
  padding: 3px;

  /* bordures de votre infobulle*/
  border: 1px dotted black;
  border-left: 1px dotted black;
}








div.infobulle_avatar em {
display:none;
}

div.infobulle_avatar:hover {
background: none;
z-index: 999;
cursor: hand;
position: relative;
text-decoration:none;
}

div.infobulle_avatar:hover em {
font-style: normal; /*écriture de la police*/
font-size: 10px; /*taille de la police*/
color:#000 !important; /*couleur de la police*/
padding: 3px;
display: block;
position: absolute;
-moz-border-radius: 5px; /* bord arrondis*/
-webkit-border-radius: 5px; /* bord arrondis*/
border-radius: 5px ; /* bord arrondis*/
background-color: #FFF; /*couleur de fond de l'infobulle*/
border: 1px solid #000; /*taille et couleur de la bordure de l'infobulle*/
width:150px; /*largeur de l'infobulle*/
top: 100px; /*infobulle à 100px du haut*/
left: 100px; /*infobulle à 100px de la gauche*/
}






 .vignettes
{-moz-border-radius:7px;
-webkit-border-radius:7px;
background-color: #ffffff;
padding-right:10px;
padding-left:10px;
padding-bottom: 3px;
padding-top:3px;}









.haccordion{
padding: 0;
width: 800px;
}


.haccordion ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}


.haccordion li{
margin: 0;
padding: 0;
display: block;
width: 100%;
height: 20px;
overflow: hidden;
float: left;
}

#hc1 li{
margin:0 0px 0 0;
width: 800px;
}

#hc1 li .hpanel{
padding: 0px;
background: transparent;
}

.haccordion li .hpanel{
width: 20px;
height: 20px;
}

#hc1 li{width: 118px;
height: 124px;
}
#hc1 li .hpanel{width: 205px;
height: 124px;
}




.paonglet
        {
        display:inline-block;
        margin-left:20px;
        margin-right:20px;
        padding:10px;
        cursor:pointer;
        background-color: #8A8A8A;
        color: #fff;
        }
        .paonglet_0
        {
        border-radius: 2px 2px 2px 2px;
        -moz-border-radius: 2px 2px 2px 2px;
        -webkit-border-radius: 2px 2px 2px 2px;
        }
        .paonglet_1
        {
          color: #9F0000;
          border-radius: 2px 2px 2px 2px;
          -moz-border-radius: 2px 2px 2px 2px;
          -webkit-border-radius: 2px 2px 2px 2px;
        }

        .contenu_paonglet
        {
                margin-top:-1px;
                padding: 2px;
                display:none;
                height: 320px;
        }

/* set millions of background images */
.rbroundbox { background: url(nt.gif) repeat; }
.rbtop div { background: url(tl.gif) no-repeat top left; }
.rbtop { background: url(tr.gif) no-repeat top right; }
.rbbot div { background: url(bl.gif) no-repeat bottom left; }
.rbbot { background: url(br.gif) no-repeat bottom right; }

/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 50%; margin: 1em auto; }

________________________________________

LES PLUS

___________________________________________________

.titre_categorie {
      background: #COULEUR; /*fond*/
      -moz-border-radius-topleft: 50px; /*arrondi angle gauche*/
      -moz-border-radius-topright: 50px; /*arrondi angle droit*/
      -webkit-border-radius-top-left: 50px; /*arrondi angle gauche*/
      -webkit-border-radius-top-right: 50px; /*arrondi angle droit*/
      margin-top: 10px; /*ne pas modifier*/
      margin-bottom: -10px; /*a modifier selon vos goûts*/
      text-align: center; /*alignement du texte*/
      height: auto; /*hauteur à modifier selon vos goûts*/
      width: 500px; /*largeur à modifier selon vos goûts*/
      margin-left: 350px; /*pour déplacer la position des titres des catégories*/
      padding-top: 1px !important; /*espace entre la bordure et le texte*/
      padding-bottom: 5px !important; /*espace entre la bordure et le texte*/
      -moz-text-shadow:  2px 2px 2px #COULEUR; /*ombre sur le texte*/
      -webkit-text-shadow:  2px 2px 2px #COULEUR; /*ombre sur le texte*/
      text-shadow:  2px 2px 2px #COULEUR; /*ombre sur le texte*/
}


___________________________________________________
BORDURE:

.ajout_haut {
  background-color: transparent;
  background-image: url('http://nsa10.casimages.com/img/2010/01/14/100114065535545189.png') center top no-repeat;
  width: LARGEUR DE VOTRE IMAGE DU HAUTpx;
  height: HAUTEUR DE VOTRE IMAGE DU HAUTpx;
  border: none;
}

.ajout_bas {
  background-color: transparent;
  background-image: url('http://nsa11.casimages.com/img/2010/01/14/100114065612568113.png') center top no-repeat;
  width: LARGEUR DE VOTRE IMAGE DU BASpx;
  height: HAUTEUR DE VOTRE IMAGE DU BASpx;
  border: none;
}

.forumline {
  background-color: transparent;
  background-image: url('http://nsa10.casimages.com/img/2010/01/14/100114070515465818.png') center repeat-y;
  padding: QUELQUESpx; /* Il vaut mieux ajouter quelques pixels de marge intérieure, sinon le forum est collé à l'image intérieure, et ça ne rend pas bien. Faites le test sinon !*/
  border: none;
}


______________________________________
sous-forums

.vignettes
{-moz-border-radius:7px;
background-color: #ffffff;
padding-right:10px;
padding-left:10px;
padding-bottom: 3px;
padding-top:3px;}

____________________________________________
queel
.forumline {
 -moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 4px dotted #7f7757;
padding:3px;
}

.statistiques {
background-color: #473021;
overflow:auto;
max-height: 200px;
 -moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 4px dotted #7f7757;
padding:10px;
margin:10px;
text-align:left;
}

.groupes {
    font-size:16px;
font-weight:bold;
font-style:italic;
text-transform:lowercase;
text-decoration: none!important;
margin-left: 20px;
letter-spacing:1px;
}

.catqeel {
 -moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 4px dotted #5C411F;
padding:20px;
background-color:#5C411F;
}
__________________________________________________

PA
/* ***************** CSS DE LA PAGE D'ACCUEIL ********************
                  by mimizZ | www.graph-forum.com
  Droit à la modification des couleurs et du fond uniquement
****************************************************************** */


#EnTete {
  position:relative;
  /* largeur et hauteur de l'image */
  width:800px;
  height:500px;
}




.titre { /* TITRE " BIENVENUE SUR LE FORUM " */
  font-family:Helvetica Neue;
  text-transform:uppercase;
  letter-spacing:-1px;
  font-weight:bold;
  font-size:38px;
  color:#120C0C;
  text-shadow: 1px 2px 1px #999999;
  text-align:center;
  -webkit-border-radius: 10px;
  -webkit-border-bottom-right-radius: 40px;
  -webkit-border-bottom-left-radius: 40px;
  -moz-border-radius: 10px;
  -moz-border-radius-bottomright: 40px;
  -moz-border-radius-bottomleft: 40px;
  border-radius: 10px;
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 40px;
  background-color:#292929;
  border-bottom: 3px solid #414141;
  padding:5px;
  }



.presentation { /* CADRE TURQUOISE " PRÉSENTATION " */
  margin-right:-4px;
    margin-left:-10px;
  background-color:#262626;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  box-shadow: 0px 0px 5px #000;
  width:430px;
  height:auto;
  padding-bottom:8px;
  padding-left:16px;
  padding-right:16px;
  padding-top:50px;
  }

.presentation p { /* ZONE DE TEXTE PRÉSENTATION */
  background-color:#4D4D4D;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  border-bottom: 3px solid #666666;
  border-left: 3px solid #666666;
  border-right: 3px solid #666666;
  color:#999999;
  font-family:calibri;
  font-size:13px;
  text-align:justify;
  padding:20px;
  }

.navigation { /* LIENS */
  font-family:"Courier New", Courier, monospace;
  text-transform:uppercase;
  -webkit-border-top-left-radius: 30px;
  -webkit-border-bottom-left-radius: 30px;
  -moz-border-radius-topleft: 30px;
  -moz-border-radius-bottomleft: 30px;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  width:125px;
  background-color:#171717; 
  font-size:12px;
  text-align:center;
  text-shadow:0px 0px 3px #666;
  margin-left:15px;
  margin-top:12px;
  padding: 3px;
  border-bottom:2px solid #4D4D4D;
  }

.navigation:hover {
  background-color:#fff15f;
  text-shadow:0px 0px 3px #fff;
  letter-spacing:1px;
  border-bottom:2px solid #ffd05f;
  }

.navigation a {color:#FFF} /* COULEUR DES LIENS */
.navigation a:hover {color:#F60} /* COULEUR DES LIENS AU SURVOL */
 
.annonces { /* ANNONCES QUI DÉFILENT */
  width:170px;
  max-height:185px;
  -webkit-border-top-right-radius: 30px;
  -webkit-border-bottom-right-radius: 30px;
  -moz-border-radius-topright: 30px;
  -moz-border-radius-bottomright: 30px;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  background-color:#171717;
  padding-top:8px;
  padding-bottom:8px;
  padding-right:10px;
  box-shadow: 1px 0px 4px #4D4D4D;
  border-left:thin solid #4D4D4D;
  text-align:center;
    }

.titre3 { /* TITRE " ANNONCE " */
  color:#666666;
  font-size:19px;
  font-family:helvetica neue;
  text-transform:uppercase;
  letter-spacing:-1px;
  font-weight:bold;
  text-align:center;
  text-shadow: 2px 2px 1px #212121;
  }

.titre3:hover {
  color:#d6c8f5;
  letter-spacing:0px;
  }

.annonces p { /* ZONE DE TEXTE " ANNONCES */
  color:#999999;
  font-family:calibri;
  font-size:13px;
  background-color:#4D4D4D;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomright: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  text-align:justify;
  padding:8px;
  border-right:3px solid #d6c8f5;
  border-bottom:3px solid #d6c8f5;
  }

.html-marquee {height:125px;} /* PERMET DE LE DÉFILEMENT DES ANNONCES, NE PAS TOUCHER ! */
.html-marquee2 {height:31px;} /* PERMET DE LE DÉFILEMENT DES PARTENAIRES, NE PAS TOUCHER ! */


.partenaires { /* CADRE DES PARTENAIRES + TITRE */
  width:500px;
  background-color:#212121;
  box-shadow: 0px 0px 5px #000;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  padding-left:250px;
  padding-right:10px;
  padding-top:1px;
  padding-bottom:1px;
  background-image: url(http://img444.imageshack.us/img444/3598/partenaires.png);
  background-repeat:no-repeat;
  background-position: left center;
  }

.partenaires p { /* ZONE OÙ LES LOGOS SONT MIS */
  background-color:#383838;
  height:31px;
  padding:6px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  border-bottom: 3px solid #383838;
  border-right: 3px solid #383838;
  border-left: 3px solid #383838;
  }

.partenaires img { /* OMBRE PORTÉE SUR LES LOGOS DE PARTENARIAT */
  box-shadow: 0px 0px 4px #999; }
 
.credits { /* NE PAS ENLEVER ! */
  font-family:calibri;
  font-size:12px;
  color:#b5b5b5;
  padding:10px;
  text-shadow: 0px 0px 4px #000;
  text-align:center; }
.credits a {color:#e2007a;}
.credits a:hover {color:#ea69a0;}
 
/* ********************* FIN DU CODE DE LA PA ********************* */

____________________________________________________________________________________
Cadre

____________________________________________________________________

PA

#acordvert
{
width: 275px;
-moz-border-radius : 10px;
-webkit-border-radius: 10px;
}
#info1
{
width: 275px;
height: 30px;
overflow: hidden;
background-color:#171717;
border-bottom: 1px dotted #000000;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
-moz-border-radius : 10px;
-webkit-border-radius: 10px;
}
#info3
{
width: 275px;
height: 30px;
overflow: hidden;
background-color:#171717;
border-bottom: 1px dotted #000000;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
-moz-border-radius : 10px;
-webkit-border-radius: 10px;
}
#info4
{
width: 275px;
height: 30px;
overflow: hidden;
background-color:#171717;
border-bottom: 1px dotted #000000;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
-moz-border-radius : 10px;
-webkit-border-radius: 10px;
}
#info1:hover, #info2:hover, #info3:hover, #info4:hover
{
height: 150px;
overflow: hidden;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;

}
.titre
{
display: block;
text-align: center;
width: 275px;
height: 36px;
font-size: 12px;
letter-spacing: 2px;
font-family: verdana;
font-weight: italic;
padding-top: 2px;
color:#4D4D4D
}
.contenu
{
width: 90%;
margin: auto;
background-color: #000000;
padding: 4px;
color: #4D4D4D;
font-size: 12px;
}

/*---------------- CHATBOX ----------------*/
#chatbox_header .cattitle strong {
display: none;
}

#chatbox_header .cattitle:before {
content: "Faites la Paix pas la Guerre";
}

_____________________________________________

INFOBULLE


/* ------------- FICHE PV
Créee par Orange de CSSActif (http://www.css-actif.com)
Merci de conserver cette mention par respect ----------- */
.cssactif_pv { /* Fond de la fiche */
  background-color: #1D1D1D; /* Couleur de fond */
 
 
  -webkit-border-radius: 20px; /* Bordures arrondies (voir: http://border-radius.com/) */
  -moz-border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
  border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
 
  -webkit-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 10px 0px #000000;  /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
     
}

td.cssactif_pv_header { /* En-tête avec image de fond */
  background-repeat: no-repeat; /* Empêche la répétition de l'image du header */
  background-position: top center; /* Postionne l'image du header en haut, au center */

  width: 200px; /* Donne la largeur de la bannière latérale (Largeur de l'avatar) */
  height: 320px; /* Donne la hauteur en px du header, l'image de header devrait être même hauteur ou plus grande (Hauteur de l'avatar) */
 
  border-right: 15px double #921628; /* Bordure côté du header: ÉPAISSEURpx STYLE #COULEUR (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#border-style)  */
 
 
  /* Bordures  gauche arrondies (voir: http://border-radius.com/) */
  -webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
 
 
  text-shadow: 1px 1px 0px #000; /* Ombre du texte */
  font-size: 10px; /* Taille du texte: TAILLEpx */
}

div.cssactif_pv_titre h1 { /* Titre prénoms & nom */

font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */

  font-size: 32px; /* Taille du texte: TAILLEpx */
 
  text-shadow: 1px 1px 0px #000; /* Ombre du texte */
 
  color: #d51731; /* Couleur du texte */
 
  margin: 0; /* Supprime la marge par défaut de l'élément h1 */
 
  text-align: right;  /* Aligne le titre à droite */
  text-transform: uppercase; /* Met le titre en majuscules */
 
}

div.cssactif_pv_titre { /* Titre + feat */
  /* Positionne le titre "à cheval" sur la bordure */
  position: relative;
  top: -28px;
 

  text-align: right;      /* Aligne le texte à droite */
 

  padding-right: 20px;    /* Défifine une marge interne */
  color: #CCCCCC; /* Couleur du feat */
}

.cssactif_pv h2 { /* Sous-titres "Identité", "Opinions" etc. */
 background-color: #111111;  /* Couleur du fond des sous-titres */
 border-color: #6a0e1b; /* Couleur de la bordure */
 border-width: 1px 0px; /* Taille de la bordure: HAUT & BAS  GAUCHE & DROITE */
 border-style: solid; /* Style de la bordure */
 
    -webkit-box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 3px 0px #000000;  /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */

  text-align: center;  /* Aligne le titre au centre */
  text-transform: uppercase; /* Met le titre en majuscules */
  font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
  color: #921628;  /* Couleur du titre */
  margin: 0; /* Supprimer marge */
  font-size: 20px; /* TAILLE DU TEXTE: TAILLEpx */
  font-weight: normal; /*Épaisseur du texte */
  text-shadow: 1px 1px 0px #000; /*Ombre du texte */
  letter-spacing: 5px; /* Espacement des caractères */
 
}

.cssactif_pv_content { /* Contenu */
 padding: 10px; /* Marge interne */
 text-align: justify; /* Justifie le texte */
 text-shadow: 1px 1px 0px #000; /*Ombre du texte */
}

.cssactif_pv em { /* Libellés */
  font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
  color: #921628;  /* Couleur du titre */
  font-style: normal;
  text-transform: uppercase;
 
}


div.infobulle {
  position: relative;
  cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
  display: inline-block; /*Place les icones un à côté de l'autre */
  margin: 10px; /* marge entre les icones */
  border: 1px solid #333; /* bordure des icones */
 
  -webkit-box-shadow: 0px 0px 5px 0px #000000; /* Ombre de l'icone (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 5px 0px #000000; /* Ombre de l'icone  (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 5px 0px #000000;  /* Ombre de l'icone  (voir http://css3generator.com/ choix "Box-shadow") */

}

div.infobulle img {
 height: 50px;
 width: 50px; 
}

div.infobulle div{
  display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 500; /* on définit une valeur pour l'ordre d'affichage */

}
div.infobulle:hover div{
  display: block; /* ceci affiche l'infobulle */
  position: absolute;

  width: 300px; /* Largeur de l'infobulle */

  top: 50px; /* on positionne notre infobulle */
  left: 0px;

  background-color: #1D1D1D; /* Couleur de fond */
 
 
  -webkit-border-radius: 20px; /* Bordures arrondies (voir: http://border-radius.com/) */
  -moz-border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
  border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
 
  -webkit-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 10px 0px #000000;  /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
      border-left: 6px double #921628;
      padding: 10px; /* marge interne de l'infobulle */
}
/* ------------- FIN FICHE PV */

________________________________________________________________

CATEGORIES

.descriptions-categories {
background-color:#855230;
padding:5px; 
-moz-border-radius-topleft: 18px;
-moz-border-radius-topright: 18px;
-moz-border-radius-bottomleft: 18px;
-moz-border-radius-bottomright: 18px;
border-radius: 18px;
-webkit-border-radius: 18px;
margin-left:20px;
margin-right:2px;
 margin-bottom: 2px;
font-family:Arial;
width: 400px;
font-size: 11px;
line-height: normal;
height:60px;
overflow:auto;
}

.forumlink {
font-size:20px;
margin-left:15px;
font-weight:bolder;
word-spacing:2px;
text-align:center;
display:block;
font-family:Georgia;
text-shadow: 1px 1px 1px rgb(66, 66, 66);
width:80%;
}

.forumlastpost {
width:95%;
background-color:#5C3D28;
padding:5px;
margin:5px;
-moz-border-radius-topleft: 18px;
-moz-border-radius-topright: 18px;
-moz-border-radius-bottomleft: 18px;
-moz-border-radius-bottomright: 18px;
border-radius: 18px;
-webkit-border-radius: 18px;
 box-shadow: 0px 3px 3px #ffffff;
  -moz-box-shadow: 0px 2px 3px #888;
-webkit-box-shadow: 0px 2px 3px #888;
height:140px;
}

.stats-nombre {
font-weight: bold;
font-family: georgia,serif;
padding:4px;
margin-bottom:-5px;
margin-top:8px;
text-align:center;
-moz-border-radius-topleft: 18px;
-moz-border-radius-topright: 18px;
  border-radius: 18px;
-webkit-border-radius: 18px;
    float:right;
background-color:#473021;
border:3px solid #8A6C4B;
border-bottom:none;
height:14px;
width:250px;
font-size:12px;
}

.stats-forum {
font-size:11px;
background-color:#473021;
padding:5px; 
-moz-border-radius-topleft: 18px;
-moz-border-radius-topright: 18px;
-moz-border-radius-bottomleft: 18px;
-moz-border-radius-bottomright: 18px;
border-radius: 18px;
-webkit-border-radius: 18px;
text-align:center;
margin-right:30px;
}

.categories {
background-color:#663616;
padding:20px;
margin:10px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-topright: 30px;
-moz-border-radius-bottomleft: 30px;
-moz-border-radius-bottomright: 30px;
border-radius: 30px;
-webkit-border-radius: 30px;
border:3px solid #8A6C4B;
}

.noms-categories {
font-weight: bold;
font-family: georgia,serif;
text-shadow: 1px 1px 1px rgb(66, 66, 66);
padding:4px;
margin-right:20px;
margin-top:8px;
text-align:center;
-moz-border-radius-topleft: 18px;
-moz-border-radius-topright: 18px;
  border-radius: 18px;
-webkit-border-radius: 18px;
    float:right;
background-color:#473021;
border:3px solid #8A6C4B;
border-bottom:none;
height:15px;
width:250px;
}

______________________________________________

gif

.postdetails.poster-profile img {
 width: 200px;
}

.titre { /* Titre non survolé, normal*/
display: block;
font-family: ; /* Police du texte */
font-size: ;/* Grosseur du texte soit 100%, 190% étant plus gros */
text-decoration: none; /* Décoration du texte : overline */
text-transform: ; /* Uppercase, capitalize, none, lowecase */
border-bottom: 2px dotted #COULEUR; /* 2px : épaisseur du trait ; dotted : en pointillé */
padding-bottom: 2;
text-align: left ;/* Alignement du texte : left, right, center ou justify */
font-size: 16px;
color: #COULEUR; /* Couleur du texte */
}

.titre:hover { /* Titre survolé */
color: #COULEUR ; /* Couleur du texte au survol */
text-transform: uppercase;
border-bottom: 2px dotted #COULEUR; /* 2px : épaisseur du trait ; dotted : en pointillé */
}
_____________________________________________
parto

.boxcoulissante{
  right:-150px;
 -webkit-transition:right 0.4s ease-in-out;
 -o-transition:right 0.4s ease-in-out;
 -moz-transition:right 0.4s ease-in-out;
 transition:right 0.4s ease-in-out;

}

.boxcoulissante:hover{
  right:0px;
 -webkit-transition:right 0.4s ease-in-out;
 -o-transition:right 0.4s ease-in-out;
 -moz-transition:right 0.4s ease-in-out;
 transition:right 0.4s ease-in-out;

}
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://weird-pension.jeunforum.com/
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: cadre à côté du forum   Lun 06 Aoû 2012, 19:44

Alors je ne comprends pas tout là, dans les codes du template, on a des class="boxtoproundtitle" et des class="boxmenu", or rien ne les définie dans ton CSS :S.
Il doit y avoir quelque chose qui empêche que ça fonctionne bien, mais d'après ce que je vois, je ne sais pas d'où ça vient, je dois sûrement passer à côté d'un truc aussi gros que moi x)
Je vais faire quelques autres tests voir d'où ça peut clocher, je te tiens au courant.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Light

avatar

Féminin
Nombre de messages : 224
Age : 20
Localisation : quelque part dans un monde sans fin
Logiciel de Création : The Gimp et un peu photoshop
Date d'inscription : 18/06/2010

MessageSujet: Re: cadre à côté du forum   Lun 06 Aoû 2012, 20:55

Ok, merci beaucoup beaucoup beaucoup beaucoup >
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://weird-pension.jeunforum.com/
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: cadre à côté du forum   Jeu 09 Aoû 2012, 16:52

Oups, j'avais oublié ce topic T_T, je suis vraiment désolée ...

J'ai essayé une autre chose qui fonctionne sur mon forum de test, en espérant que ça soit la même chose sur ton forum n_n

Dans tes templates remplace l'ancien code des block :

Code:
<div class="boxcoulissante" style="position: absolute; top: 800px; ">
  <span class="boxtoproundtitle">Tops-Partenaires</span>
  <div style="width: 200px; text-align: center;" class="boxmenu">
          <a href="http://www.mysteryorphanage.com/">www.</a>Mystery Orphanage
          <br /><a href="http://welcome-to-inazuma.forumactif.com/">www.</a>Sekai No Chousen
          <br /><a href="http://newday-thelastchance.forum-canada.com">www.</a>New Day
          <br /><a href="http://under-graph.forumactif.fr/">www.</a>Under Graph
    <br />
  </div>
</div>

<div class="boxcoulissante" style="position: absolute; top: 180px; ">
  <span class="boxtoproundtitle">Votez pour le forum</span>
  <div style="width: 200px; text-align: center;" class="boxmenu">
          <a href="http://www.root-top.com/topsite/korben/in.php?ID=12469">♠</a>....
          <a href="http://www.root-top.com/topsite/moonlighttoprpg/in.php?ID=2778">♠</a>.....
          <a href="http://www.root-top.com/topsite/blackycalimera/in.php?ID=3094">♠</a>....
    <a href="http://www.root-top.com/topsite/abysses/in.php?ID=6174">♠</a>....
          <a href="http://www.root-top.com/topsite/titop/in.php?ID=1629">♠</a>....
          <a href="http://www.root-top.com/topsite/forumrpg/in.php?ID=6961">♠</a>
  </div>
</div>

par celui ci :
Code:
<div class="boxcoulissante" style="position: absolute; top: 800px; ">
  <span>Tops-Partenaires</span>
  <div style="width: 200px; text-align: center;" >
          <a href="http://www.mysteryorphanage.com/">www.</a>Mystery Orphanage
          <br /><a href="http://welcome-to-inazuma.forumactif.com/">www.</a>Sekai No Chousen
          <br /><a href="http://newday-thelastchance.forum-canada.com">www.</a>New Day
          <br /><a href="http://under-graph.forumactif.fr/">www.</a>Under Graph
    <br />
  </div>
</div>

<div class="boxcoulissante" style="position: absolute; top: 180px; ">
  <span>Votez pour le forum</span>
  <div style="width: 200px; text-align: center;">
          <a href="http://www.root-top.com/topsite/korben/in.php?ID=12469">♠</a>....
          <a href="http://www.root-top.com/topsite/moonlighttoprpg/in.php?ID=2778">♠</a>.....
          <a href="http://www.root-top.com/topsite/blackycalimera/in.php?ID=3094">♠</a>....
          <a href="http://www.root-top.com/topsite/abysses/in.php?ID=6174">♠</a>....
          <a href="http://www.root-top.com/topsite/titop/in.php?ID=1629">♠</a>....
          <a href="http://www.root-top.com/topsite/forumrpg/in.php?ID=6961">♠</a>
  </div>
</div>

J'ai juste enlevé les class="boxtoproundtitle" et class="boxmenu" car ils ne figurent pas dans ton CSS ô_Ô.

Ensuite, remplace le dernier CSS que je t'ai donné par
Code:
.boxcoulissante{
  right:0px;
 -webkit-transition:width 0.4s ease-in-out;
 -o-transition:width 0.4s ease-in-out;
 -moz-transition:width 0.4s ease-in-out;
 transition:width 0.4s ease-in-out;
width:20px;
  overflow:hidden;
  white-space: nowrap;
}

.boxcoulissante:hover{
  right:0px;
 -webkit-transition:width 0.4s ease-in-out;
 -o-transition:width 0.4s ease-in-out;
 -moz-transition:width 0.4s ease-in-out;
 transition:width 0.4s ease-in-out;
  width:200px;
}

Là en fait elle ne coulisse plus de droite à gauche, mais elle s'agrandit de droite à gauche, mais à priori on obtient le même effet visuel Smile
Je croise les doigts pour que ça fonctionne !
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Light

avatar

Féminin
Nombre de messages : 224
Age : 20
Localisation : quelque part dans un monde sans fin
Logiciel de Création : The Gimp et un peu photoshop
Date d'inscription : 18/06/2010

MessageSujet: Re: cadre à côté du forum   Ven 10 Aoû 2012, 16:46

Bah ça marche, mais le beug reste le même >< Il y a toujours le texte à gauche et quand on passe la souris dessus, ça coulisse TTnTT. Mais il ne faut pas mettre une image ou un bouton pour que quand on passe la souris dessus ça marche ^^? *ne sait pas si elle s'est fait comprendre ><*
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://weird-pension.jeunforum.com/
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: cadre à côté du forum   Ven 10 Aoû 2012, 18:19

Arg, je comprends pas ... Quand la souris n'est pas dessus, le cadre est à gauche ou à droite ? Et quand elle est dessus ça "s'ouvre" à gauche ou à droite ?

Citation :
Mais il ne faut pas mettre une image ou un bouton pour que quand on passe la souris dessus ça marche ^^? *ne sait pas si elle s'est fait comprendre ><*

En effet je ne comprends pas ^^"


Bon, déjà on va faire un test : sur le lien suivant → Là Smile, est ce que ça fonctionne sur ton ordi ?
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Light

avatar

Féminin
Nombre de messages : 224
Age : 20
Localisation : quelque part dans un monde sans fin
Logiciel de Création : The Gimp et un peu photoshop
Date d'inscription : 18/06/2010

MessageSujet: Re: cadre à côté du forum   Dim 12 Aoû 2012, 09:12

Nan mais laisse tomber pour l'image x)

Mais oui, je vois sur ton fow >< Ca marche ><

Mais regarde en faite ce que ça me fait >< : Faut cliquer ici
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://weird-pension.jeunforum.com/
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: cadre à côté du forum   Dim 12 Aoû 2012, 15:17

Ah oui en effet o_O Je pense que c'est une histoire de templates modifiés qui créé un bug :X
As tu essayé de placer le code de ces box dans un autre template ? Genre l'enlever de overall_footer_begin pour le placer dans Index_box par exemple ( tout en haut, avant la première table par exemple)...

Car c'est étrange que sur mon forum de test tout fonctionne alors que sur le tien ça cafouille Sad
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Light

avatar

Féminin
Nombre de messages : 224
Age : 20
Localisation : quelque part dans un monde sans fin
Logiciel de Création : The Gimp et un peu photoshop
Date d'inscription : 18/06/2010

MessageSujet: Re: cadre à côté du forum   Dim 12 Aoû 2012, 19:34

Ah oui, c'est vrai que beaucoup de mes templates sont modifiés >< Mais là, je l'ai mis dans index_body et ça change rien TTnTT

Oui, c'est très étrange comme tu dis TTnTT Mais en même temps j'ai mis la masse de codes qui servent à rien sur le mien ><
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://weird-pension.jeunforum.com/
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: cadre à côté du forum   Lun 13 Aoû 2012, 13:21

Ahlalala ... Je ne sais pas trop comment faire Neutral Il faudrait désactiver ( enfin supprimer mais en gardant une copie ^^') un après l'autre chaque template pour savoir lequel fait buguer les boites coulissantes puis essayer de bidouiller le template bugueur pour que tout fonctionne ...
Après, soit ça marche, soit ça ne marche pas, faut juste savoir si on veut s'arracher les cheveux en cherchant ou non n_n
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Light

avatar

Féminin
Nombre de messages : 224
Age : 20
Localisation : quelque part dans un monde sans fin
Logiciel de Création : The Gimp et un peu photoshop
Date d'inscription : 18/06/2010

MessageSujet: Re: cadre à côté du forum   Lun 13 Aoû 2012, 13:26

ouais, je vais essayer ça x) au pire, j'ai tout les bons templates en double XD je te redis Smile
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://weird-pension.jeunforum.com/
Light

avatar

Féminin
Nombre de messages : 224
Age : 20
Localisation : quelque part dans un monde sans fin
Logiciel de Création : The Gimp et un peu photoshop
Date d'inscription : 18/06/2010

MessageSujet: Re: cadre à côté du forum   Lun 13 Aoû 2012, 13:36

DP désolée, mais j'ai mis TOUS mes templates par défaut et voilà le résultat -_- :

BOUH
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://weird-pension.jeunforum.com/
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: cadre à côté du forum   Lun 13 Aoû 2012, 15:08

Huuuuummmm ... Là je ne sais pas quoi faire pour toi, c'est étrange que ça marche sur le mien et pas sur le tien, je ne vois vraiment pas à quoi ça peut être dû Sad

Sans le CSS que je t'ai fait ajouter, le bloc apparait bien à droite et non au milieu ? Je vais voir si je ne peux pas modifier mon CSS pour que ça fonctionne.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Light

avatar

Féminin
Nombre de messages : 224
Age : 20
Localisation : quelque part dans un monde sans fin
Logiciel de Création : The Gimp et un peu photoshop
Date d'inscription : 18/06/2010

MessageSujet: Re: cadre à côté du forum   Lun 13 Aoû 2012, 15:59

oui, il doit y avoir un bug avec mon forum ><

Mmmmmh attends, je t'envoie un MP ^^
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://weird-pension.jeunforum.com/
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: cadre à côté du forum   Lun 13 Aoû 2012, 18:59

J'ai bien reçu ton MP Smile

Alors pour faire ça je pense savoir comment faire ! Il faut modifier la structure en table du forum pour rajouter un <td> à droite et insérer les partenaires ;) Je vais voir quel template il faut modifier, je te tiens au courant Smile

Et de rien j'aime bien aller jusqu'au bout des demandes What a Face !
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Light

avatar

Féminin
Nombre de messages : 224
Age : 20
Localisation : quelque part dans un monde sans fin
Logiciel de Création : The Gimp et un peu photoshop
Date d'inscription : 18/06/2010

MessageSujet: Re: cadre à côté du forum   Lun 13 Aoû 2012, 19:41

MERCI MA ELLA \o/ T'es la meilleure du monde =u= si j'étais américaine je demanderai à dieu de te bénir, sauf que je suis pas américaine xD
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://weird-pension.jeunforum.com/
Contenu sponsorisé




MessageSujet: Re: cadre à côté du forum   

Revenir en haut Aller en bas
 
cadre à côté du forum
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Cadre autour de votre page (ou forum)
» S. Demande de mise en page - Site du forum
» [terminée] Demande de cadre
» tu as un site (forum, blog), tu veux mettre un flux rss ?
» This-Is-It _ Le forum qui déchaîne les passions [Accepté]

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Graphisme Cat-Life ::  :: Vieux Sujets :: Cours-
Sauter vers: