Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

La date/heure actuelle est Jeu 2 Avr 2020 - 15:22

10 résultats trouvés pour f3f3f3

Pas de fenêtre étendue pour nouveau sujet

<table style="margin:0 0 10px 0; width:244px; background:#fff; border:1px solid #F3F3F3;" cellspacing="0" cellpadding="0"><tr><td style="font-family:verdana; font-size:11px; color:#000; padding:5px 5px;"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="640" height="510"><param name="movie" value="http://www.jeuxclic.com/jeux/jeux-flash-3091.swf"><param name="quality" value="high"></param><param name="menu" value="false"></param><embed src="http://www.jeuxclic.com/jeux/jeux-flash-3091.swf" width="640" height="510" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" menu="false" ></embed></object></td></tr><tr><td style="font-family:verdana; font-size:11px; padding:5px 10px; border-top:1px solid #F3F3F3;" align="center"><strong><a href="http://www.jeuxclic.com/jeux.php?id=6816" target="_blank">Mahjong tower</a></strong> | <a href="http://www.jeuxclic.com/categorie-jeux.php?cat=jeux-reflexion" target="_blank">Jeux de réflexion</a> avec <a href="http://www.jeuxclic.com" title="Jeux avec Jeuxclic.com" target="_blank">Jeuxclic.com</a></td></tr></table>
par alana2005
le Mer 6 Mar 2019 - 20:15
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: Pas de fenêtre étendue pour nouveau sujet
Réponses: 24
Vues: 645

Suppression du bas du cadre du forum

Bonjour pinke, vous souhaitez seulement avoir cette bordure sur les cotés, c'est bien ça ?

Actuellement vous mettez :

Code:
.bodyline {
    background-color: #f3f3f3;
box-shadow: 0 0 20px #EFE7EF;
    padding: 0px;
      border: thick double #fff;
}


Il suffit de mettre votre bordure comme ceci :

.bodyline {
background-color: #f3f3f3;
box-shadow: 0 0 20px #EFE7EF;
padding: 0px;
border-left: thick double #fff;
border-right: thick double #fff;
}

Bien à vous.
par ◦Jay◦
le Dim 5 Mar 2017 - 10:55
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: Suppression du bas du cadre du forum
Réponses: 8
Vues: 843

Refaire une mise en page de la PA et du QEEL

@Dragon594 a écrit:Maintenant il reste encore une chose que tu n'as pas encore comprise à propos du premier bloc

Si j'ai très bien compris et je vous l'ai expmliqué dans mon dernier post, toutes les variables ne peuvent être appliquées en page d'accueil, d'ailleur je vous laisse un lien avec la liste des variables que vous pouvez utiliser sur le forum mais celles que vous voulez appliquer ni figure pas sauf une ou deux.

1ère étape:
Supprimer le javascript pour le pseudo que vous avez placé dans la gestion des codes javascript, a la place le petit script suivant devra être placé en début de page d'accueil.
Code:
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>

Grace au script ci-dessus vous allez pouvoir utiler les variables qui se trouvent dans le lien que je vous ai donné.

Les variables devront être utilisées de la manière suivante:

Pseudo du membre connecté.
Code:
<span class="USERNAME"></span>

Date de naissance du membre connecté.
Code:
<span class="USERBIRTHDAY"></span>

Faite de même pour les variables qui vous intérresse dans la liste du lien.
Vous pouvez jeter un oeil ici pour plus de précision.

@Dragon594 a écrit:Ensuite est ce que l'on pourrait n'avoir qu'un seul et unique code Javaspring pour les derniers codes Javaspring que tu m'as donné de mettre pour ce qui est de l'onglet, l'avatar et le pseudo ????
Cela afin de me faire économiser des codes Javasprings qui sont limité à 50 au max.

Bon déjà celui pour le pseudo a été supprimé, reste celui des onglets et celui pour l'avatar ce qui vous fait encore 48 places disponible, vous pensez vraiment les utiliser un jour ?
J'utilise les forums ForumActif depuis déjà pas mal d'années et je n'ai jamais vu ou entendu quelqu'un dire qu'il les avait toutes utilisées.

@Dragon594 a écrit:Vient ensuite le problème pour les images du staff, pourrais-tu me dire la marche à suivre en détail afin que je puisse le faire par la suite en cas de changement dans mon équipe.

C'est très simple, dans le code je vous ai indiqué l'emplacement de chaque onglet avec les images de la manière suivante.
Code:
<!--Image 1-->
<span class="onglet_0 onglet" id="onglet_profile1" onclick="javascript:change_onglet('profile1');" style="">
<img src="https://i58.servimg.com/u/f58/15/55/14/56/popo10.png" alt="" /></span>

<!--Image 2-->
<span class="onglet_0 onglet" id="onglet_profile2" onclick="javascript:change_onglet('profile2');" style="">
<img src="https://i58.servimg.com/u/f58/15/55/14/56/popo10.png" alt="" /></span>

etc...


Scroll du contenu 6:
Remplacer le contenu 6 du code par celui la.
Contenu 6:


Remplacer votre css au complet par celui la.
css:
[hide]/******* retire le soulignement des liens *******/
a { text-decoration:none; }
a:hover { text-decoration: none!important; }

/******** avatar membre connecté ********/
.useravatar{
margin-left: 5px;
margin-right: 5px;
margin-top: -10px;
width: 35px;
height: 90px;
float:left;
}

/******** Les onglets des profils ********/
.contenu_onglet {
display:none;
background-color:#cccccc;
color:#000;
width:100px;
height:82px;
padding:5px;
font-size:10px !important;
text-align:center;
}
/* lien profil */
.contenu_onglet a { color:#435466; font-size:10px !important;}

/* petites images des profils */
.onglet {
margin: auto;;
padding: 0px;
display:inline-block;
cursor: pointer;
}
/******* Fin onglets profils ********/

/******** début page d'accueil ********/

/* titre de chaque contenu */
.titre_du_haut{
background-color: #cccccc;
width: auto;
color:#435466;
padding: 3px 0px 3px 0px;
font-size: 10px !important;
}

/* Titre du bas de chaque contenu */
.titre_du_bas{
background-color: #cccccc;
border-bottom-left-radius: 15px; /* arrondi dordure bas gauche */
border-bottom-right-radius: 15px; /* arrondi dordure bas droit */
width: auto; /* largeur auto du titre */
color:#435466;
padding: 2px;
position: absolute; bottom: 0; right: 0; left: 0; /* position du titre en bas de chaque contenu */
font-size: 10px !important;
text-decoration: none !important;
}
/* couleur lien titre du bas */
.titre_du_bas a{
color:#000000;
font-size: 10px !important;
}

/* couleur de fond et bordure des contenus */
#contenu_1, #contenu_2, #contenu_3, #contenu_4, #contenu_5, #contenu_6, #contenu_7, #contenu_8{
border:3px solid #505050;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
background-color: #F3F3F3;
font-size: 10px !important;
font: 1em sans-serif, Helvetica, sans-serif !important;
}

/* Contenu au centre de chaque contenu */
#contenu_1 p, #contenu_2 p, #contenu_3 p, #contenu_4 p, #contenu_5 p, #contenu_6 p, #contenu_7 p, #contenu_8 p{
font-size: 10px !important;
}

/* taille et positionnement de chaque contenu */
#contenu_1 {
height: 150px; width: 400px;
float:left;
position: relative;
}

#contenu_2 {
height: 150px; width: 215px;
float:left; /* le contenu 2 se place a droite du 1 */
margin-left: 15px; /* marge gauche */
position: relative;
}

#contenu_3{
height: 150px; width: 215px;
float:left; /* le contenu 3 se place a droite du 2 */
margin-left: 15px;
position: relative;
}

#contenu_4{
height: 150px; width: 400px;
float:left;
margin-top: 10px;
position: relative;
}
/* Contenu avec scroll bar */
#contenu_4 p{
height: 120px; width: 385px;
margin-top: 0px;
overflow: hidden;
padding: 5px;
display:block;
font-size:10px !important;
}
/* Contenu scroll au survol */
#contenu_4 p:hover{
height: 100px; width: 380px;
padding: 5px;
overflow-x:hidden;
overflow-y:scroll;
}

#contenu_5 {
height: 150px; width: 450px;
float:left;
margin-left: 15px;
margin-top: 10px;
position: relative;
}

#contenu_6{
height: 150px; width: 400px;
float:left;
margin-top: 10px;
position: relative;
}
/* Contenu avec scroll bar */
#contenu_6 p{
height: 110px; width: 385px;
margin-top: 0px;
overflow: hidden;
padding: 5px;
display:block;
font-size:10px !important;
}
/* Contenu scroll au survol */
#contenu_6 p:hover{
height: 100px; width: 380px;
padding: 5px;
overflow-x:hidden;
overflow-y:scroll;
}

#contenu_7 {
height: 150px; width: 215px;
float:left;
margin-left: 15px;
margin-top: 15px;
position: relative;
}

#contenu_8{
height: 150px; width: 215px;
float:left;
margin-left: 15px;
margin-top: 15px;
position: relative;
}[/hgide]
par tupac
le Sam 25 Fév 2017 - 4:14
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Refaire une mise en page de la PA et du QEEL
Réponses: 25
Vues: 1627

Refaire une mise en page de la PA et du QEEL

@Dragon594 a écrit:Le 1 l'image que je parle est l'avatar du membre qui doit être connecter sur le forum et j'ai trouvé des variables ci cela s'appelle ainsi pour t'y aider , je te mets le tout ce que j'ai l'ami.

En ce qui concerne l'avatar du membre connecté a gauche du texte il existe une solution mais elle ne fonctionne pas a l'intérieur d'une iframe j'ai fais le test, peut être existe t-il une autre soulution mais je ne la connais pas, maintenant que vous ne voulez plus d'iframe nous allons placer votre code dans la page d'accueil nous allons donc pouvoir placer l'avatar du membre connecté.
Pour les variables que vous m'avez montrées je les connais toutes mais elles sont fonctionnelles qu'a l'intérieur d'un template.

@Dragon594 a écrit:mais tu n'as pas répondu à toutes les demandes l'ami et tu en as fait de nouvelles que je t'expliquerai par la suite.

Heu... quelles demandes Shocked

@Dragon594 a écrit:Comme tu peux t'en rendre compte cela ne fonctionne pas. Et je te rappelle qu'ici je n'utilise pas avec l'Iframe mais la " Prévisualisation ".

J'ai du mal a comprendre tes propos, lorsque je fais une modification dans la gestion des pages html je me sers aussi de la prévisualisation et seulement lorsque tout est ok je la place dans l'iframe.

@Dragon594 a écrit:Mais le soucis d'après ce que je comprends le code que tu as donné je n'ai que le margin left et margin top pour le contenu des blocs. ( voir code )

Dans chaque lien il y a un margin left il suffisait tout simplement de les régler pour régler les liens.

@Dragon594 a écrit:Pour celui-ci et qui d'ailleurs doit être le plus important car rien ne marche est cette Iframe

Ce n'est pas que rien ne marche, dans un tel code des réglages sont a faire ça ne peut pas fonctionné du premier coup et j'ai pourtant précisé que nous ferions ça en plusieurs étapes et en ce qui concerne l'iframe c'est vous qui me l'avez proposé (voir votre 6ème poste) nous allons donc alors placer votre code dans la page d'accueil je crois que se sera plus simple pour tous le monde.

Affichage / Page d'accueil / Généralités / Contenu du message / placer le code html, pour le css placez le dans votre feuille de style css.

J'y ai apporté quelques modifications, remplacer mes images par les votres.
html.:

Le css modifié.
css.:

Le javascript pour vos onglets profile, a placer dans une nouvelle page javascript je vous ai expliqué comment l'installer dans un précédent post un peu plus haut.
Javascript onglets.:
Code:
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+name).style.display = 'block';
anc_onglet = name;
}
//-->


Javascript pour afficher l'avatar.
Javascript avatar.:
Code:
$(function() {
  $.get("/u" + +(my_getcookie("fa_" + location.host.replace(/\./g, "_") + "_data") || "").replace(/^.*"userid";(s:[1-9][0-9]*:"([1-9][0-9]*)"|i:([1-9][0-9]*));.*$/, "$2$3"), function(a) {
    $(".useravatar").attr("src", $("#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img", a).first().attr("src") || "http://i48.servimg.com/u/f48/16/78/05/90/myster10.png")
  })
});

Et pour finir le javascript pour afficher le pseudo du membre connecté.
Ici:
Code:
$(function() {
  if (_userdata["user_id"] == -1) {
    var pseudo = "Bonjour cher invité";
  } else {
    pseudo = _userdata["username"];
  }
  $('.pseudo').text(pseudo);
});


En ce qui concerne votre dernière proposition je crains que cela ne soit pas faisable.
par tupac
le Ven 24 Fév 2017 - 2:08
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Refaire une mise en page de la PA et du QEEL
Réponses: 25
Vues: 1627

Refaire une mise en page de la PA et du QEEL

Bonjour,

Dans mon précédent post j'ai expliqué la procédure, une fois la page html crée il suffi de prendre l'adresse de la page html nouvellement crée puis de la coller dans l'iframe et pour finir placer l'iframe dans la page d'accueil.
Ok je ré-explique la procédure.

Panneau d'administration / Module / Gestion des pages html / Clic sur Création en mode avancé / Mettre un titre de ton choix / Coche non et non / Place le code au complet qui se trouve ci-dessous et valide, après avoir validé clic un peu plus haut sur Cliquez ici pour revenir à l'Administration des pages HTML / a l'endroit ou est indiqué URL DU LIEN copie l'adresse de ta page puis colle la dans l'iframe (iframe ci-dessous)

Le code au complet.:

L'iframe dans laquelle tu colles le lien de la page html.
Code:
<iframe src="colle ton lien ici" scrolling="no" style="height: 530px;width: 890px;" frameborder="0"></iframe>

Tu me demandais ou tu devais placer l'iframe et bien ton code correspond bien a une page d'accueil donc l'iframe doit être placé dans: Affichage / Généralités / Message sur la page d'accueil / Contenu du message / place l'iframe et valide.

par tupac
le Mer 22 Fév 2017 - 12:28
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Refaire une mise en page de la PA et du QEEL
Réponses: 25
Vues: 1627

Refaire une mise en page de la PA et du QEEL

Bonjou,

Personnellement pour mes pages html je coche Non et Non.

Place le contenu (page html) ci-dessous dans une page html en mode avancé, valide puis copie l'adresse de cette page et colle la dans l'iframe (ci-dessous)

Page html au complet.:


Code:
<iframe frameborder="0" style="height: 530px;width: 890px;" scrolling="no" src="adresse page html ici"></iframe>

Normalement la hauteur et largeur de l'iframe sont correcte mais tu peux toujours les ajuster.
par tupac
le Mar 21 Fév 2017 - 17:49
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Refaire une mise en page de la PA et du QEEL
Réponses: 25
Vues: 1627

Refaire une mise en page de la PA et du QEEL

Votre code avec les modifications éffectués.

Html:


Le css.:


Vous devez placer ce petit script (ci-dessous) dans une nouvelle page javascript pour le fonctionnement des onglets MP, profil etc...

Procéder ainsi:
Panneau d'administration / Modules / Gestion des codes javascript / Créer un nouveau javascript / Mettre un titre de votre choix / Cocher sur l'index / Placer le code puis valider.
Code:
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+name).style.display = 'block';
anc_onglet = name;
}
//-->

S'il y a le moindre souci n'hésiter pas a poster.
par tupac
le Lun 20 Fév 2017 - 22:30
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Refaire une mise en page de la PA et du QEEL
Réponses: 25
Vues: 1627

Refaire une mise en page de la PA et du QEEL

Bonjour Dragon594,

Bon j'ai essayé de simplifier au maximun.
Le code html.:

Le css.:

Pour le contenu avec en titre Déscription soit on agrandi la cellule soit on place un scroll (barre de déffilement) vu la quantité de texte, a vous de voir.
Pour le contenu 5 avec pour titre Staff du forum et a en voir votre capture vous comptez placer 14 petites images sur deux rangées, les images seront donc très petit et vous comptez mettre du contenu a l'intérieur, de mon point de vu je pense que le rendu sera pas jolie, je peux toujours vous proposer une autre solution elle consiste toujours a placer les 14 images sur 2 rangées en les plaçant sur la gauche puis sur lors droite au survol de celle-ci le contenu apparaitra dans une petite fenêtre.

Comme ceci.
Tag f3f3f3 sur Forum gratuit : Le forum des forums actifs Kjix10
par tupac
le Lun 20 Fév 2017 - 16:06
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Refaire une mise en page de la PA et du QEEL
Réponses: 25
Vues: 1627

Couleur de texte -Feuille de personnage-

Malheureusement non :O et ce problème est apparu sans que je n'ai rien touché au préalable... j'avoue ne pas trop comprendre.
Dans la gestion des couleurs, rien n'indique quel champs doit être modifié pour que seules les couleurs des Listes et Texte de la feuille de personnage, sur les profils, soient impactées? Et pour ce qui est du CSS... encore une fois je n'y ai rien modifié depuis des mois u.u
Voulez-vous mon css? (chambre mal rangée, j'vous préviens...)
CSS:
/* DEBUT BARRE DE NAVIGATION */
.nav_txt {
text-align: center;
font-variant: small-caps;
font-family: Georgia;
color: #7e7e7e;
background: #091016;
font-size: 18px;
height: 28px;
text-shadow:1px 1px 2px #000000;
border-bottom: 1px solid #091016;
box-shadow: 0px 0px 3px #000000;
}
.barre_nav a{
text-align: center !important;
font-variant: initial;
font-family: Georgia;
color: #7d6a60;
font-size: 14px;
margin-left: 5px;
text-decoration: none !important;
-moz-transition: 0.2s all;
-webkit-transition: 0.2s all;
-o-transition: 0.2s all;
-ms-transition: 0.2s all;
-khtml-transition: 0.2s all;
transition: 0.2s all;
}

.barre_nav a:hover {
text-decoration: none !important;
color : #7e7e7e !important;
text-align: center !important;
-moz-transition: 0.2s all;
-webkit-transition: 0.2s all;
-o-transition: 0.2s all;
-ms-transition: 0.2s all;
-khtml-transition: 0.2s all;
transition: 0.2s all;
}
.barre_nav {
width: 80%;
height: auto;
left: 10%;
margin-left: auto;
margin-right: auto;
margin-top: -1px;
position: absolute;
overflow: hidden;
z-index: 10;
border-top: 0px solid #7d6a60;
}


.nav_1 {
width: 19%;
height:25px;
background: #080e13;
float: left;
border: 1px solid #;
box-shadow: 0px 0px 3px #000000;
-moz-transition: 0.2s all;
-webkit-transition: 0.2s all;
-o-transition: 0.2s all;
-ms-transition: 0.2s all;
-khtml-transition: 0.2s all;
transition: 0.2s all;
overflow: hidden;
}
.nav_2 {
width: 19%;
height:25px;
background: #080e13;
float: left;
border: 1px solid #091016;
box-shadow: 0px 0px 3px #000000;
-moz-transition: 0.2s all;
-webkit-transition: 0.2s all;
-o-transition: 0.2s all;
-ms-transition: 0.2s all;
-khtml-transition: 0.2s all;
transition: 0.2s all;
overflow: hidden;
}
.nav_3 {
width: 19%;
height:25px;
background: #080e13;
float: left;
border: 1px solid #091016;
box-shadow: 0px 0px 3px #000000;
-moz-transition: 0.2s all;
-webkit-transition: 0.2s all;
-o-transition: 0.2s all;
-ms-transition: 0.2s all;
-khtml-transition: 0.2s all;
transition: 0.2s all;
overflow: hidden;
}
.nav_4 {
width: 19%;
height:25px;
background: #080e13;
float: left;
border: 1px solid #091016;
box-shadow: 0px 0px 3px #000000;
-moz-transition: 0.2s all;
-webkit-transition: 0.2s all;
-o-transition: 0.2s all;
-ms-transition: 0.2s all;
-khtml-transition: 0.2s all;
transition: 0.2s all;
overflow: hidden;
}
.nav_5 {
width: 19%;
height:25px;
background: #080e13;
float: left;
box-shadow: 0px 0px 3px #000000;
-moz-transition: 0.2s all;
-webkit-transition: 0.2s all;
-o-transition: 0.2s all;
-ms-transition: 0.2s all;
-khtml-transition: 0.2s all;
transition: 0.2s all;
overflow: hidden;
}
.nav_1:hover {
width: 19%;
height: auto;
text-align: left !important;
box-shadow: 0px 0px 3px #000000;
-moz-transition: 0.2s all;
-webkit-transition: 0.2s all;
-o-transition: 0.2s all;
-ms-transition: 0.2s all;
-khtml-transition: 0.2s all;
transition: 0.2s all;
border-radius: 20px; border-bottom: solid 3px #7d6a60;
}
.nav_2:hover {
width: 19%;
height:auto;
text-align: left !important;
box-shadow: 0px 0px 3px #000000;
-moz-transition: 0.2s all;
-webkit-transition: 0.2s all;
-o-transition: 0.2s all;
-ms-transition: 0.2s all;
-khtml-transition: 0.2s all;
transition: 0.2s all;
border-radius: 20px; border-bottom: solid 3px #7d6a60;
}
.nav_3:hover {
width: 19%;
height:auto;
text-align: left !important;
box-shadow: 0px 0px 3px #000000;
-moz-transition: 0.2s all;
-webkit-transition: 0.2s all;
-o-transition: 0.2s all;
-ms-transition: 0.2s all;
-khtml-transition: 0.2s all;
transition: 0.2s all;
border-radius: 20px; border-bottom: solid 3px #7d6a60;
}
.nav_4:hover {
width: 19%;
height:auto;
text-align: left !important;
box-shadow: 0px 0px 3px #000000;
-moz-transition: 0.2s all;
-webkit-transition: 0.2s all;
-o-transition: 0.2s all;
-ms-transition: 0.2s all;
-khtml-transition: 0.2s all;
transition: 0.2s all;
border-radius: 20px; border-bottom: solid 3px #7d6a60;
}
.nav_5:hover {
width: 19%;
height:auto;
text-align: left !important;
box-shadow: 0px 0px 3px #000000;
-moz-transition: 0.2s all;
-webkit-transition: 0.2s all;
-o-transition: 0.2s all;
-ms-transition: 0.2s all;
-khtml-transition: 0.2s all;
transition: 0.2s all;
border-radius: 20px; border-bottom: solid 3px #7d6a60;
}
/* --------------------------------- MENU latérale--------------------------------- */

/* Contient l'image */
.bloc_onglet {
position: fixed;
top: 5em;
}

/* Info-bulles */
nav.info{
z-index: 24;
text-decoration: none;
position: relative;
}

nav.info:hover{
z-index: 26;
}

nav.info span{
display: none
}

nav.info:hover span{
display: block;
position: absolute;
top: 1.3em;
left: 11em;
height: auto;
width: 200px;
background: none;
text-align: center top;
font-weight: none;
padding: 0px;
color : #7e7e7e !important;

}

nav.info a {
text-decoration: none !important;
}

/* FIN BARRE DE NAVIGATION */


/* --------------------------------- Navigation Haut/Bas --------------------------------- */
.haut{
position:fixed;
top:45px;
left:24px;}

.bas{
position:fixed;
top:45px;
left:69px;}
/* --------------------------------- WIDGET --------------------------------- */
/* Widget statistic */
.widgperso {
border: solid #7d6a60 0px;
border-radius: 20px;
border-bottom:solid 3px #7d6a60 ;
border-radius:0 0 20px 20px;

background-color: #0D0D0D;
color: #F3F3F3;
border-radius: 0px 10px 10px 10px;
border-bottom:solid 3px #7d6a60 ;
font-family: Balthazar; /*police utilisée*/
font-variant:small-caps;/*texte en petites majuscules*/
font-size: 12px !important;
}
/* Positionnement du widget et choix du fond */
.widget {
position: fixed;
top: 2.9em;
left: 3.8em;
background-image: url('http://www.photos-public-domain.com/wp-content/uploads/2011/02/black-vertical-siding-texture.jpg');
width: 20em;
height: 26em;
padding: 20px;
z-index: 2;
}

/* Englobe le titre et le texte du widget */
.widget_interne {
width: 17em;
height: 21em;
padding: 20px;
padding-top: 0px;
text-align: justify;
color: #C0C0C0;
z-index: 4;
position: fixed;
top: 5.5em;
left: 5em;
}

/* --------------------------------- FIN WIDGET --------------------------------- */
/*********************************** PA Quête ***********************************/
/*Bloc du concept*/
#concept {
float : left;
position: relative;
width: 175px;
height: 80px;
overflow: hidden;
}
/*Texte du concept*/
#concept_text {
width: 163px;
height: 70px;
margin: 1px;
padding: 5px;
text-align: left;
overflow: auto;
font-size: 9px;
}
/*Image du concept*/
#concept_img {
position: absolute;
top: 0px;
left: 0px;
width: 175px;
height: 80px;
transition: 0.5s;
-webkit-transition: 0.5s;
}
/*Glissement de l'image du concept*/
#concept:hover #concept_img {
left: 200px;
}

/*********************************** PA ***********************************/

/*** PARTENAIRES ET TOPS ***/
.img_partenaires {
opacity: 0.5;
}
.img_partenaires:hover {
opacity: 1;
}
/*** IMAGES DU STAFF ***/

.imgPA {
border-radius: 0%;
width: 60px;
height: 60px;
padding: 2px;
}
.info {
position: relative;
z-index: 24;
text-decoration: none;
padding : 2px;
}
c.info:hover {
z-index: 25;
}
c.info span {
display: none;
}
c.info:hover span {
display: block;
position: absolute;
top: 0px;
left: -1px;
border-radius: 0px 10px 10px 10px;
width: 100px;
height: 80px;
background-color: #0D0D0D;
color: #F3F3F3;
text-align: center;
font-weight: none;
}

/*** IMAGES DES PREDEFINIS ***/
.imgwidget {
border-radius: 0%;
width: 116px;
height: 117px;
}
.imgwidget:hover {
border-radius: 0%;
width: 116px;
height: 117px;
}
.info {
position: relative;
z-index: 24;
text-decoration: none;
}
d.info:hover {
z-index: 25;
}
d.info span {
display: none;
}
d.info:hover span {
display: block;
position: absolute;
top: -10px;
left: 3px;
width: 116px;
height: 40px;

background-color: #0D0D0D;
color: #F3F3F3;
border-radius: 0px 10px 10px 10px;
border-bottom:solid 3px #7d6a60 ;

text-align: center;
font-weight: none;
}

/*** EFFET DU CONTEXTE ***/
.contexte {
width: 400px;
height: 200px;
overflow: hidden;
background-color: #333333;
border-radius: 25px;
position: relative;
top: -2px;
}
.contexte_img {
position: relative;
z-index: 2;
width: 400px;
height: 200px;
margin-left: 0px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.contexte:hover .contexte_img {
margin-top: -200px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.contexte_description {
position: relative;
z-index: 1;
width: 350px;
height: 140px;
color: #a4a4a4;
padding: 25px;
text-align: justify !important;
font-size: 11px;
overflow: auto;
}
.contexte_description a {
text-decoration: none !important;
}
/*** SYSTEME D'ONGLETS ***/
.paonglet {
display: inline-block;
margin-left: 20px;
margin-right: 30px;
padding: 10px;
font-family: Balthazar; /*police utilisée*/
font-variant:small-caps;/*texte en petites majuscules*/
font-size: 14px;

background-color: #;
color: #7e7e7e;
}
.paonglet_0 {
border-radius: 0px;
width: 180px;
height: 30px;
background-image: url(https://redcdn.net/hpimg15/pics/42125230t2.png);
background-position: center top;
background-repeat: no-repeat;
}
.paonglet_1 {
border-radius: 0px;
background-image: url(https://redcdn.net/hpimg15/pics/57476156t1.png);
background-position: center top;
background-repeat: no-repeat;
width: 180px;
height: 30px;
color: #7d6a60;
}
.contenu_paonglet {
padding: 10px;
display: none;
width: 780px;
height: 450px;
border-radius: 20px;
background-color: #0D0D0D;
}
.contenu_paonglet a{
text-decoration: none !important;
}
/*** BLOC DE TEXTE DE LA PA ***/

.bloc_pa {
background-color: #333333;
border-radius: 25px;
color: #a4a4a4;
padding: 0px;
text-align: center !important;
position: center;
top: -3px;
}
.bloc_pa a {
text-decoration: none !important;
color: #70A0BA !important;
}

/*** TITRES DES BLOCS ***/

.titre_pa {
font-family: Balthazar; /*police utilisée*/
font-variant:small-caps;/*texte en petites majuscules*/
font-size: 16px;
position: relative;
top: -3px;
color: #a4a4a4;
z-index: 1;
}

.titre_pa:hover {
color: #70A0BA;
}

/*********************************** FIN PA ***********************************/
/* --------------------------------- /* MISE EN FORME DES LISTES DE SUJETS */ --------------------------------- */

.bloc_sujets
{
width: 775px;
margin: auto;
background: #;
border-radius: 20px 0px 0px 20px;
border-bottom:solid 3px #7d6a60 ;
padding: 5px;
}
.sujets
{
background: #000;
background-image: url();
background-position: center top;
background-repeat: repeat;
border-radius: 20px;
border-radius: 20px 0px 0px 20px;
text-align: left !important;
border-bottom:solid 3px #7d6a60 ;
padding: 3px;
}
.topictitle
{
font-variant: small-caps;
font-size: 12px;
background: #000;

}
.sujets_auteur
{
display: block;
width: 180px;
font-size: 11px;
border-radius: 20px;
}
.sujet_last
{
display: block;
background-image: url(https://redcdn.net/hpimg11/pics/269823Sanstitre1.jpg);
background-position: center top;
background-repeat: no-repeat;
width: 190px;
height: 62px;
background: #000;
padding-top: 10px;
font-size: 9px;
}
.sujets_stats
{
width: 675px;
text-align: right;
margin-bottom: 0px;
}
.sujets_stats_contenu
{
font-size: 9px;
color: #a4a4a4;
padding: 2px;
background: #;
border-bottom: solid #7d6a60 1px;
border-left: solid #7d6a60 1px;
border-right: solid #7d6a60 1px;
border-radius: 0px 0px 10px 10px;
background-image: url(https://redcdn.net/hpimg11/pics/469850motif.jpg);
background-position: center top;
background-repeat: repeat;
}

/* --------------------------------- /* DEBUT CATHEGORIE */ --------------------------------- */

#i_icon_mini_login{
margin-right:20px !important;
}

.cat_titre1 {
letter-spacing: 2px;
text-transform: uppercase;
font-size: 22px;
font-family: Balthazar;
}
.cat_droite {
border-radius:0px;
border: solid #7d6a60 1px;
padding: 10px;
width: 167px;
height: 56px;
font-size: 9px;
background-image: url('https://redcdn.net/hpimg11/pics/480531Sanstitre1.jpg');
background-position: center top;
background-repeat: no-repeat;
color: #7d6a60 !important;
margin-right:-45px;
margin-left:20px;
float:right;
background-color:black;
text-align:center;
margin-top:-100px;
}
.cat_titre2 {
font-size: 14px;
text-align: center !important;
color : #7e7e7e !important;
margin-left:50px;
margin-top:5px;
font-family: Balthazar;
}
.cat_des1 {

border: 0px;
margin-left:70px;
width:70%;
}
.cat1 {
border: solid #7d6a60 1px;
background-image: url('https://redcdn.net/hpimg11/pics/469850motif.jpg');
background-position: center top;
background-repeat: repeat;
border-radius: 20px;
text-align: center !important;
border-bottom:solid 3px #7d6a60 ;
padding-top:5px;
padding-left:0px;
}
.cat2 {
border: solid #7d6a60 0px;
border-radius: 20px;
padding:0px;
background-color:black;
height: 100px;
}
.souscat {
text-decoration:white;
text-align: center !important;
line-Height: 8pt;
padding:0px;
padding-right:20px;
overflow-x:;
margin-top:-40px;
margin-right:140px;
margin-left:160px;
}
.cat_des2 {
color:black;
font-size: 12px;
overflow:initial;
height: 100px !important;
padding-left:0px;
margin-top:-5px;
width:85%;
}
.catimg {
border: solid #7d6a60 1px;
width: 95px;
height: 80px;
float: left;
padding-right:0px;
margin-left:5px;
margin-top:32px;
}
/*** ILLUSTRATION QUI SUIT LE TITRE DE CATEGORIE ***/
.illustration_cate {

width: 592px;
height: 78px;
border-radius: 0px 0px 0px 0px;
position: relative;
top: 0px;
left: 0px;
}
/* --------------------------------- /* FIN CATHEGORIE*/ --------------------------------- */

/* --------------------------------- /* MISE EN FORME DES MESSAGES */ --------------------------------- */

/*Cadre autour des messages *****************************************************************/

.rangée .thRight, .nomavatar, .rangée .thLeft, .basviolet .browse-arrows{
font-family: Balthazar; /*police utilisée*/
font-variant:small-caps;/*texte en petites majuscules*/
}
.basviolet, .postviolet{ background-color:#202020;}/*couleur de fond des messages*/

.fondpost{
border: solid #7d6a60 1px;/*bordures fines autour du message*/
background: url(https://redcdn.net/hpimg11/pics/424348fond.jpg) no-repeat center bottom,
url(https://redcdn.net/hpimg11/pics/442537fond2.jpg) no-repeat center top;
border-radius:10px;/*arrondi*/
padding: 15px;
min-height: 325px;
margin: 10px 30px auto 30px;
}

.rangée{
background-color:#000;/*couleur de fond de la ligne "auteur-message"*/
border-bottom: solid #7d6a60 1px;/*bordures fines autour du message*/
border-radius:0px 20px 0 0;/*arrondis*/
display:block;
margin-top:15px;
}
.rangée .thRight{
font-family: Balthazar; /*police utilisée*/
font-variant:small-caps;/*texte en petites majuscules*/
color:#7e7e7e;/*couleur du texte "message"*/
font-size: 14px;
border-bottom: solid #7d6a60 1px;/*bordures fines autour du message*/
font-weight:bold;
display:block;
margin-left:255px;
padding-top:7px;
height:19px;
}
.rangée .thLeft, .basviolet .browse-arrows{
color:#7e7e7e;/*couleur du texte "auteur"*/
font-family: Balthazar; /*police utilisée*/
font-variant:small-caps;/*texte en petites majuscules*/
font-size: 15px;
border-bottom: solid # 0px;/*bordures fines autour du message*/
font-weight:bold;
display:block;
float:left;
width:255px;
padding-top:7px;
padding-left:7px;
height:19px;
}
.basviolet{
border: solid #7d6a60 1px;
background-image: url(https://redcdn.net/hpimg11/pics/469850motif.jpg);
background-position: center top;
background-repeat: repeat;
border-radius: 20px;
text-align: center !important;
border-bottom:solid 3px #7d6a60 ;
display:block;
border-radius:0 0 20px 20px;
border-top:none;
margin-bottom:30px;
}

.postviolet{
border-left:1px solid #7d6a60;/*bordures de la partie centrale du message*/
border-right:1px solid #7d6a60;
display:block;
}

.postviolet .postdetails {display:none;}/*enlève la date et l'heure du sujet*/
.postviolet .post-options{padding-right:30px;}
th.thBottom, th.thCornerL, th.thCornerR, th.thHead, th.thLeft, th.thRight, th.thSides, th.thTop { border:none;font-weight:normal;}

/* --------------------------------- PROFILS/AVATAR RP --------------------------------- */

.profil_mess
{
position: relative;
z-index: 9;
width: 210px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background-color: #333333;
padding: 4px;
text-align: center;
background-image: url('https://redcdn.net/hpimg15/pics/643525profil.jpg');
background-position: center top;
box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
-htm-box-shadow: 0px 0px 5px #000000;
-o-box-shadow: 0px 0px 5px #000000;
-webkit-box-shadow: 0px 0px 5px #000000;
}

.name
{
display: block;
margin-top: -5px;
margin-bottom: -10px;
font-size: 12px;
font-family: arial black;
text-shadow: 1px 1px 0px #000000;
padding-bottom: 5px;
border-bottom: 1px solid #5b5b5b;
}

.avatar_mess
{
display: block;
width: 200px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
height: 400px;
overflow: hidden;
border: 5px solid #0d0d0d;
opacity: 0.9;
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
filter: alpha(opacity=70);
transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-htm-transition: 0.5s;
-webkit-transition: 0.5s;
}
.avatar_mess:hover
{
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-htm-transition: 0.5s;
-webkit-transition: 0.5s;
}

.profil2_mess
{
position: relative;
z-index: 1;
width: 180px;
margin-left: auto;
margin-right: auto;
margin-top: -202px;
background-color: #000;
padding-left: 4px;
padding-right: 4px;
text-align: left;
border-radius: 10px;
-moz-border-radius: 10px;
-htm-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
border: 2px solid #000;
box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
-htm-box-shadow: 0px 0px 5px #000000;
-o-box-shadow: 0px 0px 5px #000000;
-webkit-box-shadow: 0px 0px 5px #000000;
color: #434343 !important;
transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-htm-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.profil2_mess:hover
{
margin-top: -42px;
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-htm-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.profil2_content
{
display: block;
width: 180px;
height: 400px;
max-height: 200px;
overflow: auto;
font-size: x-small;
}
/******************* transition lien ******************************/
a {
-moz-transition:all 0.5s; /* Mozilla Firefox */
-webkit-transition:all 0.5s; /* Safari et Google Chrome */
-o-transition:all 0.5s; /* Opera */
transition:all 0.5s;
}
/******************* ENLEVER SOULIGNEMENT DES LIENS******************************/

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

/******* curseur général********/
body {
cursor: url(http://fc05.deviantart.net/fs71/f/2014/112/4/a/cursor_by_ginl-d7fj3nw.png);
}
/******* curseur lien ********/
a {
cursor : url(http://fc05.deviantart.net/fs70/f/2014/112/2/8/cursorlink_by_ginl-d7fj3tf.png), auto;;
}

/******* BG forum ********/
body{
background-image: url('https://redcdn.net/hpimg15/pics/638615fond2.jpg', 'https://redcdn.net/hpimg11/pics/630325Sanstitre1.jpg', 'https://redcdn.net/hpimg15/pics/881593fond.jpg', 'https://redcdn.net/hpimg11/pics/789821fond.jpg');
background-position: center top;
background-repeat: no-repeat;
background-attachment: scroll;
background-color: #000
text-align: justify;
}
/* -------------------------------- avatar rep rapide --------------------------------------- */
#av_quickreply img{
position: relative;
top: 0px;
left: 0px;
width: 110px;
height: 210px;
margin: 0 5px;
border-radius: 10px;
}

#av_quickreply {
float: left;
position : absolute;
}

/* --------------------------------- Editeur --------------------------------- */
/* Icônes couleur dans la palette */

.color-option {
display: inline-block !important;
width: 15px !important; /* largeur de l'icône couleur */
height: 15px !important; /* hauteur de l'icône couleur */
border: 2px solid #fff !important; /* cadre blanc sur l'icône couleur */
margin: 3px !important; /* espace entre chaque icône */
box-shadow: 0 0 2px #778899; /* ombre */
cursor: pointer !important;
}
.color-option span{
display: block !important;
width: 15px !important; /* largeur de l'icône couleur */
height: 15px !important; /* hauteur de l'icône couleur */
}
.color-option, .color-option span {
border-radius: 2px; /* arrondi */
}

/* Palette complète - la largeur influence le nombre d'icônes affichées */
.sceditor-dropdown.sceditor-color-picker {
width: 200 !important; /* largeur de la palette complète */
height: relative !important; /* hauteur de la palette complète */
padding: 5px !important;
border-radius: 5px !important;
}

/*--- Bloc réponse rapide ---*/

.sceditor-container.ltr.sourceMode {
width:500px !important;
background-color: #444444 !important;
position: auto;
top: 0px;
left: center;
}
.sceditor-container.ltr.wysiwygMode {
width:500px !important;
background-color: #444444 !important;
position: auto;
top: 0px;
left: center;
}

.slidesmile{
position:relative; !important;
top:39px; left:100px; !important;
z-index:4;
}
#smileyContainer iframe
{
height: 300px !important;
overflow: auto !important;
}
#smileyContainer
{
border: 3px solid #000000; !important;
}

.sceditor-toolbar
{
background: #141414 !important;
border-bottom: 1px solid #000000 !important;
}
.sceditor-group
{
background: #444444 !important;
border: 1px outset #333333 !important;
border-radius: 5px !important;
}
.sceditor-container
{
width:500px !important;
position: auto;
margin: 2px auto !important;
background: #000 !important;
border: 2px solid #000000 !important;
}
a.sceditor-button
{
background: #000 !important;
border-radius: 20px !important;
}
a.sceditor-button:hover
{
background: #999999 !important;
}
a.sceditor-button
{
background: #777777 !important;
border-radius: 20px !important;
}
a.sceditor-button:hover
{
background: #999999 !important;
}
.sceditor-container textarea, .sceditor-container iframe
{
padding: 5px !important;
background: #555555 !important;
border: 1px solid #666666 !important;
}
/* --------------------------------- Bouton Editeur supp --------------------------------- */
a.sceditor-button.sceditor-button-farand {
display: none;
}
a.sceditor-button.sceditor-button-date {
display: none;
}
a.sceditor-button.sceditor-button-time {
display: none;
}
a.sceditor-button.sceditor-button-faupdown {
display: none;
}
a.sceditor-button.sceditor-button-fascroll {
display: none;
}


/* --------------------------------- LISTE membres --------------------------------- */

.description3
{
display: block;
width: 200px;
margin: auto;
height: 100px;
overflow: hidden;
transition:0.4s ease;
-o-transition:0.4s ease;
-moz-transition:0.4s ease;
-webkit-transition:0.4s ease;
}

.description3:hover {
display: block;
width: 200px;
margin: auto;
height: 200px;
overflow: hidden;
}

.description3_contenu
{
position: absolute;
width: 200px;
height: 200px;
overflow: 200px;
background-color: #EFE9DD;
font-size: 11.5px;
font-family:'Georgia';
color: #3E352E;
text-align: justify;
padding:0px;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.description3_contenu:hover
{
opacity: 0.8;
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
filter: alpha(opacity=80);
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

/* --------------------------------- CHATBOX --------------------------------- */


/* Taille des avatars */

#chatbox .cb-avatar > img {
height: 40px !important;
width: 20px !important;
}
/* Calque des avatars */

#chatbox .cb-avatar {
float: left;
margin-right: 4px;
background: none repeat scroll 0 0 #000 !important; /* Fond */
border: 1px solid #d5d5d5 !important;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
height: 40px !important; /* Hauteur */
padding: 1px;
vertical-align: middle;
width: 20px !important; /* Largeur */
}



/* ChatBox */
body.chatbox {
background-image: url('https://redcdn.net/hpimg4/pics/640843chat.jpg');
background-position: center top;
background-repeat: no-repeat;
}
#chatbox .chatbox_row_1,#chatbox .chatbox_row_2,#chatbox .chatbox_row_3{
background-color: transparent;
}
#chatbox_header .cattitle strong { display: none; }
#chatbox_header .cattitle:before { content: "Le comptoire"; }
background-color: transparent;
body.chatbox {
background-color: transparent; }

/* ChatBox latérale */

#chatbox_header .cattitle strong {
display: none;
}

#chatbox_header .cattitle:before {
content: "La Taverne";
font-family: Balthazar; /*police utilisée*/
font-variant:small-caps;/*texte en petites majuscules*/
font-size: 20px;
text-shadow: #DED3C1 0px 0px 0px;
margin-top:5px;
margin-left:20px;
}

body.chatbox {
display: block;

}

.chatbox_row_1, .chatbox_row_2 {
background : none;
}

/* conteneur de la chatbox et du bouton */
#cb_block {
width: 600px; /* largeur */
height: 300px; /* hauteur */
position: fixed; /* position fixe dans la fenêtre */
bottom: -205; /* est caché de 200px vers le bas */
left: 0px; /* est collé à 0px du bord gauche */
z-index: 100;
transition: 1s; /* le mouvement glissant est de 1s */
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
border-radius:5px;
}

/* chatbox seule */
.ChatboxLaterale {
width: 600px; /* largeur */
height: 200px; /* hauteur */

z-index: 100;
position: relative;
}
#chatbox {height: 75%}

/* bouton ouvrir/fermer */
.BoutonChatbox {
cursor: pointer; /* on ajoute un pointeur pour indiquer que notre image est cliquable */
position: center;
z-index:100;
width: 30px; /* largeur */
height: 97px; /* hauteur */
border-radius:5px;
margin-left: 0px; /* on le pousse à 15px du bord gauche */
}

.text-styles {
margin-top: -30px;
padding-top: 8px;}

#chatbox_members, .member-title.away, .member-title.online {
background:none;
}


/* --------------------------------- FIN NAVIGATION --------------------------------- */

.transparent .row1 {
background: transparent;
}
.transparent .gensmall {
font-size:12px;
}

#qeel_position {
position: relative;
margin:auto;
background-image: url("https://redcdn.net/hpimg11/pics/861652qeel.jpg");
background-position: center;
background-repeat: no-repeat;
}

#qeel_titre {
font-size:10px;
font-weight: bold;
color:black;
text-align:center;
}

.qeel_colonne1 {
font-size: 11px;
text-align: right;
width: 200px;
height: 300px;
background:#;
margin-top: 10px;
padding:60px;

border-top-left-radius:20px;
border-bottom-left-radius:20px;
}

.qeel_centre {
background:transparent;
font-size: 11px;
width:200px;
height:300px;
padding:1px;
}

.qeel_colonne2 {
width: 270px;
height: 300px;
background:#;
padding:35px;
text-align:left;
font-size:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}

.qeel_bloc {
width: 200px;
padding:5px;
height: 300px;
background:#000;
border-radius:5px;
overflow:auto;
}

.qeel_groupe {
position: relative;
top: 10px;
height: 50px;
width: 50px;
border-radius:50px;
overflow: visible;
margin: 1px;
}

.qeel_groupe .infobulle {
position: absolute;
top: 0px;
left: 50px;
width: 70px;
height: auto;
background:#000;
opacity: 0;
visibility: hidden;
transition: 0.3s;
padding: 5px;
border-radius:0px 10px 10px 10px;
}


.qeel_groupe:hover .infobulle {
opacity: 1;
visibility: visible;
z-index: 100;
transition: 0.5s;
}


Merci pour votre temps.
par ginl
le Lun 10 Oct 2016 - 16:18
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: Couleur de texte -Feuille de personnage-
Réponses: 5
Vues: 1725

Problème avec la PA

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : PA installé le 20/12/2014
Lien du forum : http://charmed-eternity.forumactif.com/

Description du problème

bonjour à vous. Voilà mon forum: http://charmed-eternity.forumactif.com/

Mon problème vient du faire que la PA se déplace lorsque on passe la souris sur cette dernière attendez je vais vous montrer:

Sans Passage de la souris:
Spoiler:
Tag f3f3f3 sur Forum gratuit : Le forum des forums actifs 117436sanssurvolle


Avec le passage de la souris:
Spoiler:
Tag f3f3f3 sur Forum gratuit : Le forum des forums actifs 333477avecsurvole


Voici mon CSS partit PA:
Spoiler:
/*********************************** PA ***********************************/

/*** PARTENAIRES ET TOPS ***/
.img_partenaires {
opacity: 0.5;
}

.img_partenaires:hover {
opacity: 1;
}



/*** IMAGES DU STAFF ***/

.imgPA {
border-radius: 50%;
width: 100px;
height: 100px;
}

.info {
position: relative;
z-index: 24;
text-decoration: none;
}

c.info:hover {
z-index: 25;
}

c.info span {
display: none;
}

c.info:hover span {
display: block;
position: absolute;
top: -9.3em;
left: -0.3em;
border-radius: 50%;
width: 105px;
height: 105px;
background-color: #0D0D0D;
color: #F3F3F3;
text-align: center;
font-weight: none;
}



/*** IMAGES DES PREDEFINIS ***/
.imgwidget {
border-radius: 50%;
width: 100px;
height: 100px;
-moz-transition-duration: 1s;
-moz-transition-timing-function: linear;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
transition-duration: 1s;
transition-timing-function: linear;
}

.imgwidget:hover {
border-radius: 50%;
width: 100px;
height: 100px;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}

.info {
position: relative;
z-index: 24;
text-decoration: none;
}

d.info:hover {
z-index: 25;
}

d.info span {
display: none;
}

d.info:hover span {
display: block;
position: absolute;
top: -2em;
left: -2em;
width: 140px;
height: 50px;
overflow: auto;
background-color: #0D0D0D;
color: #F3F3F3;
text-align: center;
font-weight: none;
}



/*** EFFET DU CONTEXTE ***/

.contexte {
width: 400px;
height: 200px;
overflow: hidden;
background-color: #333333;
border-radius: 25px;
position: relative;
top: -2.2em;
}

.contexte_img {
position: relative;
z-index: 2;
width: 400px;
height: 200px;
margin-left: 0px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

.contexte:hover .contexte_img {
margin-top: -200px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

.contexte_description {
position: relative;
z-index: 1;
width: 350px;
height: 140px;
color: #F3F3F3;
padding: 25px;
text-align: justify !important;
font-size: 11px;
overflow: auto;
}

.contexte_description a {
text-decoration: none !important;
}



/*** SYSTEME D'ONGLETS ***/

.paonglet {
display: inline-block;
margin-left: 20px;
margin-right: 20px;
padding: 10px;
cursor: pointer;
background-color: #333333;
color: #FCE7AE;
}

.paonglet_0 {
border-radius: 25px;
}

.paonglet_1 {
border-radius: 25px;
color: #70A0BA;
}

.contenu_paonglet {
padding: 25px;
display: none;
width: 780px;
height: 450px;
border-radius: 25px;
background-color: #0D0D0D;
}

.contenu_paonglet a{
text-decoration: none !important;
}



/*** BLOC DE TEXTE DE LA PA ***/

.bloc_pa {
background-color: #333333;
border-radius: 25px;
color: #F3F3F3;
padding: 25px;
text-align: justify !important;
position: relative;
top: -2.2em;
}

.bloc_pa a {
text-decoration: none !important;
color: #70A0BA !important;
}

/*** TITRES DES BLOCS ***/

.titre_pa {
font-family: 'Pacifico', 'cursive';
font-size: 30px;
position: relative;
top: -0.3em;
color: #F3F3F3;
z-index: 1;
}

.titre_pa:hover {
color: #70A0BA;
}

/*********************************** FIN PA ***********************************/


Et ma section dans généralité:
Spoiler:
<div style="padding: 25px;">
<script type="text/javascript">
//<!--
function change_paonglet(name)
{
document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
document.getElementById('contenu_paonglet_'+name).style.display = 'block';
anc_paonglet = name;
}
//-->
</script>
<div class="paonglets">
<span class="paonglet_0 paonglet" id="paonglet_informations" onclick="javascript:change_paonglet('informations');">Informations</span> <span class="paonglet_0 paonglet" id="paonglet_contact" onclick="javascript:change_paonglet('contact');">Contact & Liens pratiques</span> <span class="paonglet_0 paonglet" id="paonglet_liens" onclick="javascript:change_paonglet('liens');">Liens externes</span>
</div><br />
<div class="contenu_paonglets">

<div class="contenu_paonglet" id="contenu_paonglet_informations">

<table>

<tbody>

<tr>

<td>

<center>

<div class="titre_pa">
Nouveautés
</div>

</center>

<div class="bloc_pa" style="width: 250px; height: 380px;">

<center>

<div style="width: 240px; height: 220px; overflow: auto; text-align: justify;">
<span style="color: #70A0BA;">✂</span> Nouveauté : ceci est un texte complètement inutile, oui oui u.u Et si tu es maso, tu peux consulter la suite. <a href="#">www</a><br /><br /><span style="color: #70A0BA;">✂</span> Nouveauté : ceci est un texte complètement inutile, oui oui u.u Et si tu es maso, tu peux consulter la suite. <a href="#">www</a><br /><br /><span style="color: #70A0BA;">✂</span> Nouveauté : ceci est un texte complètement inutile, oui oui u.u Et si tu es maso, tu peux consulter la suite. <a href="#">www</a><br /><br /><span style="color: #70A0BA;">✂</span> Nouveauté : ceci est un texte complètement inutile, oui oui u.u Et si tu es maso, tu peux consulter la suite. <a href="#">www</a><br /><br /><span style="color: #70A0BA;">✂</span> Nouveauté : ceci est un texte complètement inutile, oui oui u.u Et si tu es maso, tu peux consulter la suite. <a href="#">www</a><br /><br />
</div><br /><iframe style="width: 240px;" src="//www.youtube.com/embed/C-W40iW2MRs" allowfullscreen="" frameborder="0"></iframe>
</center>

</div>

</td>

<td style="width: 30px;">

</td>

<td>

<center>

<div class="titre_pa">
Contexte
</div>

</center>

<div class="contexte">

<div class="contexte_img">
<img src="https://i.servimg.com/u/f57/18/47/68/10/2610.png" />
</div>

<div class="contexte_description">
Nec minus feminae quoque calamitatum participes fuere similium. nam ex hoc quoque sexu peremptae sunt originis altae conplures, adulteriorum flagitiis obnoxiae vel stuprorum. inter quas notiores fuere Claritas et Flaviana, quarum altera cum duceretur ad mortem, indumento, quo vestita erat, abrepto, ne velemen quidem secreto membrorum sufficiens retinere permissa est. ideoque carnifex nefas admisisse convictus inmane, vivus exustus est. Altera templo insulam et insignis viribus claram viribus Salamis supremos et ipso committat armamentis tamque claram crebra ad indigens externi instructam ut abundat omnibusque onerariam continenti templo rerum a tanta municipia autem discretam insignis portuosam municipia continenti duae inter ut Cyprus omnium omnium Salamis a indigens urbes portuosam et claram tanta nullius ad rerum discretam fundamento Veneris claram rerum mari itidem Cyprus Cyprus Salamis urbes Paphus Cyprus continenti et Cyprus templo altera et municipia altera externi carbasos claram altera aedificet templo eadem Cyprus tamque itidem delubris a tamque et Paphus procul Paphus Paphus nullius Veneris armamentis adminiculi continenti tanta carbasos. Altera templo insulam et insignis viribus claram viribus Salamis supremos et ipso committat armamentis tamque claram crebra ad indigens externi instructam ut abundat omnibusque onerariam continenti templo rerum a tanta municipia autem discretam insignis portuosam municipia continenti duae inter ut Cyprus omnium omnium Salamis a indigens urbes portuosam et claram tanta nullius ad rerum discretam fundamento Veneris claram rerum mari itidem Cyprus Cyprus Salamis urbes Paphus Cyprus continenti et Cyprus templo altera et municipia altera externi carbasos claram altera aedificet templo eadem Cyprus tamque itidem delubris a tamque et Paphus procul Paphus Paphus nullius Veneris armamentis adminiculi continenti tanta carbasos. <a href="#">La suite</a>
</div>

</div>

<div style="clear: both;">

</div><br />
<center>

<div class="titre_pa">
Nos fidèles
</div>

<div class="bloc_pa" style="width: 350px; height: 100px;">

<center>

<table>

<tbody>

<tr>

<td>
<d class="info"><img src="https://i.servimg.com/u/f57/18/47/68/10/8910.png" class="imgwidget" /><span><e style="COLOR: #f0f0f0 !important; FONT-SIZE: 18px !important" class="titrePA1">Pseudo</e> <br />Blabla description par ici, youpi ! <a href="#">Lien</a></span></d>
</td>

<td style="width: 40px;">

</td>

<td>
<d class="info"><img src="https://i.servimg.com/u/f57/18/47/68/10/8910.png" class="imgwidget" /><span><e style="COLOR: #f0f0f0 !important; FONT-SIZE: 18px !important" class="titrePA1">Pseudo</e> <br />Blabla description par ici, youpi ! <a href="#">Lien</a></span></d>
</td>

</tr>

</tbody>

</table>

</center>

</div>

</center>

</td>

</tr>

</tbody>

</table>

</div>

<div class="contenu_paonglet" id="contenu_paonglet_contact">

<table>

<tbody>

<tr>

<td>

<center>

<div class="titre_pa">
Prédéfinis
</div>

</center>

<div class="bloc_pa" style="width: 350px; height: 200px;">

<center>
<c class="info"><img src="https://redcdn.net/hpimg11/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c> <c class="info"><img src="https://redcdn.net/hpimg11/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c> <c class="info"><img src="https://redcdn.net/hpimg11/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c><br /><c class="info"><img src="https://redcdn.net/hpimg11/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c> <c class="info"><img src="https://redcdn.net/hpimg11/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c> <c class="info"><img src="https://redcdn.net/hpimg11/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c>
</center>

</div>

</td>

<td>

<center>

<div class="titre_pa">
Liens pratiques
</div>

</center>

<div class="bloc_pa" style="width: 300px; height: 200px;">
<a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a>
</div>

</td>

</tr>

</tbody>

</table>

<center>

<div class="titre_pa">
Staff
</div>

</center>

<div class="bloc_pa" style="width: 600px; padding: 9px !important;">

<center>
<c class="info"><img src="https://redcdn.net/hpimg11/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c> <c class="info"><img src="https://redcdn.net/hpimg11/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c> <c class="info"><img src="https://redcdn.net/hpimg11/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c>
</center>

</div>

</div>

<div class="contenu_paonglet" id="contenu_paonglet_liens">

<center>

<div class="titre_pa">
Partenaires
</div>

</center>

<div class="bloc_pa" style="width: 500px; height: 150px;">

<center>
<a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a><br /><a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a><br /><a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a><br /><a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a>
</center>

</div><br />
<center>

<div class="titre_pa">
Tops-sites
</div>

</center>

<div class="bloc_pa" style="width: 500px; height: 80px;">

<center>
<a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a><br /><a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="https://redcdn.net/hpimg15/pics/253520bouton2.jpg" class="img_partenaires" /></a>
</center>

</div>
<a href="http://www.never-utopia.com" style="color: #FCE7AE !important; position: relative; float: right;">©️ Halloween</a>
</div>

</div>
<script type="text/javascript">
//<!--
var anc_paonglet = 'informations';
change_paonglet(anc_paonglet);
//-->
</script>
</div><link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css" />


Comme je ne sais pas si mon problème vient des codes, voilà ls codes que j'ai pour vous. Si vous avez besoin de plus vous n'avez qu'à me demander. Merci beaucoup à celui qui voudra bien m'aider. Very Happy
par Charmed Eternity
le Sam 20 Déc 2014 - 17:30
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Problème avec la PA
Réponses: 2
Vues: 987

Revenir en haut

Sauter vers: