Problème avec les spoilers

Page 2 sur 2 Précédent  1, 2

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

Résolu Problème avec les spoilers

Message par Ventus le Sam 17 Déc 2011 - 16:53

Rappel du premier message :

Bonjour,

depuis hier, alors que j'ai ajouter en ligne une nouvelle un systeme de menu déroulant pour afficher des messages avec un titre. C'est ressemblant au spoiler mais ce n'en ai pas un.

Le problème réside dans le fait que depuis que j'ai ajouté et modifier le templates, les spoiler ne s'ouvrent plus. Je sais, une fois de plus, j'ai fait une boulette...

La modification a été effectuée dans orerall_header

Un extrait des codes :

Code:

<!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}
   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><script src="http://illiweb.com/rs3/14/frm/lang/fr.js" type="text/javascript"></script><script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" type="text/javascript"></script><script type="text/javascript">//<![CDATA[
$(document).ready(function(){});//]]></script><script type="text/javascript">//<![CDATA[
var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-18266394-1']);_gaq.push(['_trackPageview']);(function() {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();//]]></script>

<script type="text/javascript">$(document).ready(function() {$('#faqs h3').each(function() {var tis = $(this), state = false, answer = tis.next('div').hide().css('height','auto').slideUp();tis.click(function() {state = !state;answer.slideToggle(state);tis.toggleClass('active',state);});});});            $(function() {$('#sdt_menu > li').bind('mouseenter',function(){var $elem = $(this);$elem.find('img').stop(true).animate({'width':'420px','height':'170px','left':'0px'},400,'easeOutBack').andSelf().find('.sdt_wrap').stop(true).animate({'top':'140px'},500,'easeOutBack').andSelf().find('.sdt_active').stop(true).animate({'height':'170px'},300,function(){var $sub_menu = $elem.find('.sdt_box');if($sub_menu.length){var left = '170px';if($elem.parent().children().length == $elem.index()+1)left = '-170px';$sub_menu.show().animate({'left':left},200);}});}).bind('mouseleave',function(){var $elem = $(this);var $sub_menu = $elem.find('.sdt_box');if($sub_menu.length)$sub_menu.hide().css('left','0px');$elem.find('.sdt_active').stop(true).animate({'height':'0px'},300).andSelf().find('img').stop(true).animate({'width':'0px','height':'0px','left':'85px'},400).andSelf().find('.sdt_wrap').stop(true).animate({'top':'25px'},500);});});</script>



            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <td align="center" width="100%" valign="middle">
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  <!-- END switch_logo_left -->


Comme je n'ai rien modifier d'autre, c'est sans nul doute ici qu'il manque quelque chose sauf si je me trompe.

Lien pour un spoiler sur le forum (regarder dans la signature du Capitaine Jack Sparrow) : http://piratedescaraibes.forum-actif.net/t3302-9760giselle-c-est-qui-celle-la#59984

Pour le menu déroulant, message de 13:38

D'avance, merci beaucoup de me venir en aide Very Happy


Avec mes plus plates salutations, Ventus



Dernière édition par Ventus le Sam 7 Jan 2012 - 12:32, édité 1 fois

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Ven 30 Déc 2011 - 20:27

Alors ne touche plus à rien pour les réglages, c’est juste parfait. Les admins sur le forum et certains membres trouvent superbe. Ta de l’or dans les mains et en te lisant, cela semble tellement facile de coder du CSS lol Mes remerciement c’est tout parfait.

Ensuite, pour l’optimisation du CSS qui me fait buguer ll fond, plus rien ne m’étonne… Avec le temps j’ai uniquement ajouté des éléments et sans doute sans le vouloir, ajouter des doublons… Bref, je ne vais pas te demander d’effectuer une recherche car il y a tellement de CSS sur le forum que tu y passeras une journée dessus ! Et franchement ta certainement mieux à faire Wink


Bons surf sur la dernière vague 2011, amicalement Ventus qui remercie fortement ton engagement Very Happy

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Final-Blonde le Ven 30 Déc 2011 - 20:37

Je t'en prie.

Pour ce qui est des doublons, je vais voir ça, j'ai une technique ! Mr. Green
Je ne te le promets pas pour demain, la neige est trop belle, mais dès que j'ai un moment je m'y mettrai.

Bonne fin d'année à toi et un beau réveillon si on ne se recroise pas.


NB : Nenni point du tout, je n'ai pas d'or dans les doigts, juste que j'aime bien ça et les jolis effets du CSS3 et si par mes explications je peux y donner goût à d'autres, alors ça c'est ce que j'appelle de la "smart-entraide".

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Ven 30 Déc 2011 - 21:51

Ha ha !

Non sérieusement, tu acceptes de vérifier tout le css ? Comme cadeau pour la nouvelle année, il n’y a pas mieux et ta méthode m’intrigue fortement. Mais bref, à chacun son domaine de jeu et de compétence lol et visiblement, ce n’est pas mon point le plus fort ^^

Euh, bon courage après avoir surfé comme une follleuh.
Code:
/* CSS du Portail */
.leport
{
background-image: URL(http://i60.servimg.com/u/f60/12/30/44/12/fond_d10.jpg);
background-image: repeat;
}

a.lien_portail
{
display:block;
width:280px;
border-left:4px solid #FFFFFF;
border-right:4px solid #FFFFFF;
background-color:#a89375;
margin-left:27px;
}

a.lien_portail:hover
{
background-color:#887963;
}

.case_portail
{
-moz-border-radius: 5px;
text-align:center;
padding-bottom:8px;
border-bottom: 1px solid #887963;
background-color:#C7B499;
width:50%; color:#000000;
font-family:Century Gothic;
font-size:13px;
}

.titre_case
{
display:block;
background-color:#a89375;
text-align:right;
border-bottom:1px dotted #887963;
color:white; font-weight:bold;
font-size:13px; padding-right:10px;
margin-bottom:8px;
}

/*Tableau accueil*/
#owerf
{
text-align:left!important;
height:100px!important;
}
.titleutile
{
width:150px;
text-align:center;
}
.titleautre
{
width:150px;
text-align:center;
}

.tstaff{
font-size:1em;
}

.thumbnail{
position: relative;
z-index: 0;
margin: 0px;
padding: 0px;
}

.thumbnail:hover{
background-color: #ad8c70;
z-index: 50;
margin: 0px;
padding: 0px;
}

.thumbnail span{
position: absolute;
background-color: #ad8c70;
padding: 5px;
left: -1000px;
border: 1px groove #866a53;
visibility: hidden;
color: #000;
text-decoration: none;
}

.thumbnail span img{
border: 1px groove;
padding: 2px;
}

.thumbnail:hover span{
visibility: visible;
top: 50px;
left: 25px; /*position where enlarged image should offset horizontally */
width: 160px
}

/* Fin CSS du Portail */

/* Curseur */
body
{
cursor:crosshair;
}

/* Retrait soulignement */
a
{
text-decoration: none;
}

a:hover
{
text-decoration: none;
}

a:active
{
text-decoration: none;
}

a.forumlink
{
text-decoration: none;
}

a.forumlink:hover
{
text-decoration: none;
}

/* Cellule d'image Dernier message et titre */
th
{
color: #000000;
border-bottom: 1px solid #887963;
font-style: italic;
font-size: 11px;
font-family: century gothic;
background-color: transparent;
height: 20px;
background-image: URL();
padding: 2px 3px;
}

td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom
{
background-color: transparent;
}

.forumline
{
-moz-border-radius: 5px;
border-bottom: 1px solid #887963;
}

/* En tête de la généralité */
.admintexthead
{
width: 795px;
height: 120px;
background: url('http://i60.servimg.com/u/f60/12/30/44/12/top10.png') transparent top center no-repeat;display:block;
}

.admintextbody
{
width: 795px;
background: url('http://i60.servimg.com/u/f60/12/30/44/12/center11.png') transparent top center repeat-y;
}

.admintextfooter
{
width: 795px;
height: 15px;
background: url('http://i60.servimg.com/u/f60/12/30/44/12/footer10.png') transparent bottom center no-repeat;
}

.jack
{
padding: 10px;
margin-top: 20px;
font-family: Georgia;
font-size: 13px;
}

.jack1
{
padding: 10px;
margin-top: 10px;
font-family: century gothic;
font-size: 11px;
}

/* Position de la navigation par rapport au header */
.menutop
{
margin-top: -80px;
}

.main
{background-color: #000000;
border-right: 5px solid #eae324;
border-left: 5px solid #eae324;
width: 100px;
text-align: center;
text-color: #ffffff;
text-transform : uppercase;
padding-top: 5px;
padding-bottom: 5px;}

.main:hover
{border-right: 5px solid #eae324;
border-left: 5px solid #eae324;
}

/* Modification des cellules */
td.row1
{
border-bottom: 1px solid #887963;
}

td.row2
{
border-bottom: 1px solid #887963;
}

td.row3
{

border-bottom: 1px solid #887963;
}

td.row3Right
{
border-bottom: 1px solid #887963;
}

/* Chat box à gauche */
#lnrbox
{
position: fixed;
bottom: 50px;
left: 0px;
background-color: #b49873;
background-position: center;
border: 1px solid #887963;
border-bottom: 4px solid #8c775b;
z-index: 999;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
}

/* Barre de titre 1 */
.over .cate1
{
font-family: Century gothic;
font-size: 11px;
text-decoration: none;
letter-spacing: 1px;
background-color: #A6957C;
background-image: url(http://d10.e-loader.net/YXvEbd3kwy.png);
background-repeat: no-repeat;
color: #000000;
text-align : right;
padding: 1px;
margin: 3px;
margin-top: -2px;
margin-left: 20px;
margin-right: -3px;
padding-right: 14px;
-moz-border-radius-bottomleft: 12px;
border-bottom: 1px solid #bcaf9c;
border-left: 1px solid #bcaf9c;
height: 20px;
}

/* Test de code */
.forabg {
      -moz-border-radius: 5px;
}
.forumbg {
      -moz-border-radius: 5px;
}
.navbar {
      -moz-border-radius: 5px;
}
.introduction {
      -moz-border-radius: 5px;
}
.post {
      -moz-border-radius: 5px;
}
blockquote {
      -moz-border-radius: 5px;
}


/* Bannière PDC */
#banpdc
{
margin-top: -8px;
widht: 1200px;
background-attachment: fixed;
background-position: center;
}

/* Background position */
body
{
background-position:top;
background-position:center;
background-image: URL('http://d1.e-loader.net/4bJhs1T8LF.png')
background-repeat: repeat;
}

/* Qui est en ligne */
.textewho
{
text-align: center;
font-style: italic;
font-family: Caribbean;
font-size: 15px;
letter-spacing: 1px;
border-bottom: 1px solid #887963;
display: block;
}

/* Footer */
.pdc1
{
margin-bottom: -100px;
}

.forumactif
{
font-size: 10px;
text-align: center;
margin-bottom: -400px;
}

/* Navigation */
#i_icon_mini_index
{
background-image: url(http://i60.servimg.com/u/f60/12/30/44/12/opa_fo10.png);
width: 90px;
height: 75px;
}

#i_icon_mini_index:hover
{
background-image: url(http://i60.servimg.com/u/f60/12/30/44/12/forum10.png);
background-repeat: no-repeat;
width: 90px;
height: 75px;
}

#i_icon_mini_portal
{
background-image: url(http://i68.servimg.com/u/f68/15/58/41/48/5-1b2f10.png);
width: 100px;
height: 75px;
}

#i_icon_mini_portal:hover
{
background-image: url(http://i68.servimg.com/u/f68/15/58/41/48/portai10.png);
width: 100px;
height: 75px;
}

#i_icon_mini_faq
{
background-image: url(http://i60.servimg.com/u/f60/12/30/44/12/opa_fa10.png);
width: 80px;
height: 75px;
}

#i_icon_mini_faq:hover
{
background-image: url(http://i60.servimg.com/u/f60/12/30/44/12/faq10.png);
width: 80px;
height: 75px;
}


#i_icon_mini_search
{
background-image: url(http://img66.xooimage.com/files/a/b/0/opa-rechercher-2a6a952.png);
width: 110px;
height: 75px;
}

#i_icon_mini_search:hover
{
background-image: url(http://img73.xooimage.com/files/8/4/5/boussole-2a6a923.png);
width: 110px;
height: 75px;
}

#i_icon_mini_login
{
background-image: url(http://i60.servimg.com/u/f60/12/30/44/12/opa_on10.png);
width: 80px;
height: 75px;
}

#i_icon_mini_login:hover
{
background-image: url(http://i60.servimg.com/u/f60/12/30/44/12/on10.png);
width: 80px;
height: 75px;
}

#i_icon_mini_members
{
background-image: url(http://i60.servimg.com/u/f60/12/30/44/12/opa_me10.png);
width: 100px;
height: 75px;
}

#i_icon_mini_members:hover
{
background-image: url(http://i60.servimg.com/u/f60/12/30/44/12/membre10.png);
width: 100px;
height: 75px;
}

#i_icon_mini_groups
{
background-image: url(http://img70.xooimage.com/files/c/e/a/opa-groupe-2a6a994.png);
width: 110px;
height: 75px;
}

#i_icon_mini_groups:hover
{
background-image: url(http://img68.xooimage.com/files/9/3/f/groupe-2a6a97e.png);
width: 110px;
height: 75px;
}

#i_icon_mini_message
{
background-image: url(http://i60.servimg.com/u/f60/12/30/44/12/opa_mp10.png);
width: 67px;
height: 75px;
}

#i_icon_mini_message:hover
{
background-image: url(http://i60.servimg.com/u/f60/12/30/44/12/mp10.png);
width: 67px;
height: 75px;
}

#i_icon_mini_logout
{
background-image: url(http://i60.servimg.com/u/f60/12/30/44/12/opa_de10.png);
width: 80px;
height: 75px;
}

#i_icon_mini_logout:hover
{
background-image: url(http://i60.servimg.com/u/f60/12/30/44/12/deco10.png);
width: 80px;
height: 75px;
}

#i_icon_mini_profile
{
background-image: url(http://i60.servimg.com/u/f60/12/30/44/12/opa_pr10.png);
width: 90px;
height: 75px;
}

#i_icon_mini_profile:hover
{
background-image: url(http://i60.servimg.com/u/f60/12/30/44/12/profil10.png);
width: 90px;
height: 75px;
}

#i_icon_mini_register
{
background-image: url(http://i60.servimg.com/u/f60/12/30/44/12/rejoin10.gif);
width: 160px;
height: 75px;
}

#i_icon_mini_register:hover
{
background-image: url(http://i60.servimg.com/u/f60/12/30/44/12/rejoin11.gif);
width: 160px;
height: 75px;
}

#i_icon_mini_new_message
{
background-image: url(http://i60.servimg.com/u/f60/12/30/44/12/new-mp10.gif);
width: 67px;
height: 75px;
}

#i_icon_mini_new_message:hover
{
background-image: url(http://i60.servimg.com/u/f60/12/30/44/12/new-mp11.gif);
width: 67px;
height: 75px;
}


/* truck machin chouet */

.spaceblou
{
border: 1px #887963 dotted;
background-color: #a89375;
background-image: URL(http://i60.servimg.com/u/f60/12/30/44/12/fond_d10.png);
height: 150px;
background-position: bottom;
background-repeat: no-repeat;
-moz-border-radius : 5px 5px 5px 5px;
padding-right:10px;
padding-left:10px;
font-size:9px;
text-align : justify;
font-family: verdana;
text-decoration: none !important;
}

/* Encadrer de la mini bannière */
.spaceblou img
{
opacity:0.5;
filter:alpha(opacity=100);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}

.spaceblou img:hover
{
opacity:1;
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity:1;
}


.spaceblou2
{
padding-right:18%;
padding-left:18%;
}

.spaceblou3
{
padding-right:8%;
padding-left:8%;
}

.spaceblou4
{
padding-right:14%;
padding-left:58%;
}

.spaceblou5
{
padding-left:8%;
}

.spaceblou6
{
padding-left:8%;
}

.hierarchy
{
display: inline;
margin: 0;
padding: 0;
text-transform: none;
border: none;
font-size: 11px;
}

a.forumlink
{
text-decoration: none;
}

a.forumlink:hover
{
text-decoration: none;
}

a.forumlink:hover
 {
text-decoration: none;
 }

#faitchier
{
font-size: 9px;
}

#colour2
{
border-bottom: 1px solid;
display: block: #000000;
}

#colour2
{
  background-color: #a89375;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
padding-left: 2px;
padding-right: 2px;
border-left: #887963 1px dotted;
border-bottom: #887963 1px dotted;
border-right: #887963 1px dotted;
}

#colour3
{
  background-color: #a89375;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
padding-left: 2px;
padding-right: 2px;
border-left: #887963 1px dotted;
border-top: #887963 1px dotted;
border-right: #887963 1px dotted;
font-size: 9px;
}

/* Nom des usagers */
.name
{
border-bottom: 1px solid #887963;
border-top: 1px solid #887963;
display: block;
}

/* Profil masqué démasqué avec hover */
.profil1
{
border-bottom: 1px dotted #887963;
background-color: #aa9a7b;
color: #000000;
background-image: url(http://i60.servimg.com/u/f60/12/30/44/12/profil15.jpg);
background-repeat: no-repeat;
width: 150px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}

/*Texte profil survolé */
.profil1:hover
{
background-image: url(http://i60.servimg.com/u/f60/12/30/44/12/profil16.jpg);
background-repeat: no-repeat;
color: #173639;
border: 1px dotted #ae9775;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}

/* Test du footer */

.testfooterpdc
{
margin: 0px;
}

/* Vote placer dans les sujets */
.topvoting
{
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
border: 1px solid #000000;
}

.textevote
{
text-align: center;
letter-spacing: 1px;
font-family: century gothic;
font-size: 10px;
}

/* Personnalisation code citer spoiler */
.quote
{
background-image: URL(http://i60.servimg.com/u/f60/12/30/44/12/citer10.png);
background-repeat: repeat;
color: #534f3c;
border-bottom: 1px solid #887963;
border-top: 1px solid #887963;
border-left: 6px solid #887963;
border-right: 6px solid #887963;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
padding-left: 24px;
}

/* Code CSS pour code */
.code
{
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
 padding-left: 6px;
 background-image: url();
 background-repeat: fixed;
border-bottom: 1px solid #887963;
border-top: 1px solid #887963;
border-left: 6px solid #887963;
border-right: 6px solid #887963;
 background-color: #7e7761;
font-size: 12px;
font-family: perpetua;
 width: 500px!important;
color: #4e341a;
}

.code div
{
max-height: 300px;
 width: 500px!important;
}

/* Image de chatbox */
body.chatbox {
background-image: url(http://img69.xooimage.com/files/a/d/b/fond-cb1-2d21bda.png);
background-repeat: no-repeat;
background-position: center;
background-color: #c8b499;
display: block;
}

.chatbox_row_2 {
padding: 4px;
background-color: transparent;
}
.chatbox_row_1 {
padding: 4px;
background-color: transparent;
}

#chatbox_header .cattitle strong
{
display: none;
border: 0px;
}

#chatbox_header .cattitle:before
{
content: "Pour parler !";
font-style: italic;
font-weigth: bold;
text-align: center;
padding: 7px;
color: #000000;
background-color: #c8b499;
}


/* Image de présentation */

.preze
{
text-align: justify;
padding-left: 5px;
padding-right: 5px;
border-bottom: 1px solid #887963;
border-top: 1px solid #887963;
border-left: 6px solid #887963;
border-right: 6px solid #887963;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}

.preze1
{
max-height: 75px;
overflow: auto;
font-style: italic;
color: #493826;
margin-top: -50px;
text-align: justify;
padding-left: 5px;
padding-right: 5px;
border-bottom: 1px solid #887963;
border-top: 1px solid #887963;
border-left: 6px solid #887963;
border-right: 6px solid #887963;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}


.imagepresentation1
{
padding: 40px;
margin-top: -60px;
text-align: justify;
}

.imagepresentation2
{
padding: 40px;
margin-top: -80px;
text-align: justify;
}

.imagepresentation4
{
padding: 40px;
margin-top: -90px;
text-align: justify;
}

.imagepresentation3
{
padding: 40px;
margin-top: -90px;
text-align: justify;
}

.imagepresentation5
{
padding: 40px;
margin-top: -90px;
text-align: justify;
}

.imagepresentation6
{
padding: 40px;
margin-top: -90px;
text-align: justify;
}

#prez
{
display: block;
border-bottom: 1px solid #887963;
border-top: 1px solid #887963;
border-left: 6px solid #887963;
border-right: 6px solid #887963;
text-align: center;
letter-spacing: 1px;
font-weight: bold;
font-size: 15px;
}

#prez1
{
display: block;
border-bottom: 1px solid #887963;
border-top: 1px solid #887963;
border-left: 6px solid #887963;
padding-left: 15px;
}

/* Présentation du Staff */
.prezstaff
{
text-align: justify;
padding-left: 30px;
}

.prezimagine
{
margin-left: -40px;
}

#prezstaff1
{
margin-top: -30px;
}

#prezstaff2
{
font-family: Caribbean;
font-size: 15px;
letter-spacing: 1px;
width: 500px;
padding-left: 50px;
padding-right: 30px;
display: block;
text-align: center;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
border-bottom: 1px solid #887963;
border-top: 1px solid #887963;
border-left: 6px solid #887963;
border-right: 6px solid #887963;
}

/* Publicité */
#pubentete
{
text-align: justify;
padding-left: 40px;
border-bottom: 1px solid #887963;
display: block;
width: 500px;
margin-top: -30px;
}

.pubpdc
{
width: 620px;
padding-left: 30px;
}

.borderpub
{
border-left: 6px solid #887963;
display: block;
margin-left: -10px;
padding-left: 6px;
}

.borderpub1
{
border-right: 6px solid #887963;
display: block;
margin-right: 50px;
padding-left: 6px;
}

#pubpdc
{
margin-top: -30px;
padding-left: 40px;
}

#pubpdc2
{
margin-top: -20px;
padding-left: 5px;
padding-right: 10px;
border-right: 6px solid #887963;
border-left: 6px solid #887963;
margin-right: 50px;
margin-left: 60px;
text-align: justify;
font-style: italic;
}

/* Intrigue */
.intrigue1
{
border-right: 6px solid #887963;
border-left: 6px solid #887963;
display: block;
margin-left: -10px;
margin-right: 50px;
padding-left: 6px;
padding-right: 10px;
background-image: URL(http://i60.servimg.com/u/f60/12/30/44/12/intrig10.jpg);
background-repeat: no-repeat;
height: 400px;
}

/* Présentation du Staff */
.borderfauve
{
border-top: 6px solid #887963;
margin-left: -2px;
margin-right: 40px;
}

.fauve
{
background-color: #715e45;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
border-bottom: 6px solid #887963;
border-top: 6px solid #887963;
border-left: 6px solid #887963;
border-right: 6px solid #887963;
opacity: 0.5;
filter: alpha(opacality=100);
-khtml-opacity: 0.5;
}

.fauve:hover
{
opacity: 1;
filter: alpha(opacality=100);
-khtml-opacity: 1;
}

.fauve1
{
text-align: center;
border-bottom: 1px solid #6d583c;
margin-top: 40px;
}

.fauvenoir
{
padding-left: -10px;
margin-right: -10px;
}

#textfauve
{
text-align: justify;
margin-left: -10px;
margin-right: 40px;
padding-left: 6px;
border-bottom: 1px solid #6d583c;
font-style: italic;
margin-top: -30px;
}

#prezfauve
{
border-bottom: 1px solid #6d583c;
display: block;
margin-right: 40px;
padding: left: 15px;
margin-top: -18px;
}


/* Mise en page des annonces */
#re
{
border-bottom: 6px solid #887963;
border-top: 6px solid #887963;
border-left: 6px solid #887963;
border-right: 6px solid #887963;
-moz-border-radius: 5px;
padding: 2px;
background-color: #6f614d;
}

#re1
{
text-align: center;
background-color: #3c2f30;
border-left: 9px solid #534041;
border-right: 9px solid #534041;
font-variant:small-caps;
font-size:18px;
letter-spacing: 1px;
font-family: Perpetua;
color:#b75a4d;
display: block;
}

#p1
{
margin: 0px;
padding-left: 6px;
padding-right: 22px;
text-align: justify;
font-size:11px;
font-family: century gothic;
color: #c8b499;
}

#p2
{
margin: 0px;
padding: 3px;
font-size; 18px;
font-family: Caribbean;
font-size: 16px;
letter-spacing: 1px;
color: #c8b499;
margin-top: -20px;
border-bottom: 3px solid #887963;
}

.p3
{
margin: 0px;
text-indent: 20px;
padding: 3px;
text-align: justify;
font-size:11px;
font-family: century gothic;
margin-top:-30px;
display:block;
}

#re2
{
margin: 0px;
text-indent: 20px;
padding: 3px;
text-align: justify;
font-size:11px;
font-family: century gothic;
width: 86%;
color: #ffffff;
}

/* Info bulle de personnage prétiré */
.infobulle {
  position: relative;
}

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

}
.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: 70px; /* on positionne notre infobulle */
  left: 15px;
  background: #070a12; /* arrière-plan de l'infobulle */
  color: white; /* texte dans l'infobulle */
  padding: 3px;
  border: 1px solid black;
  border-left: 1px solid black;
}

#wrap {
-webkit-border-radius:20px;
border-radius:20px;
padding: 10px;
}

div, table {
-webkit-border-radius:5px;
border-radius:5px;
border: none;
}

      /*togglevisibility spoiler*/

/*outside spoiler*/
.outsidespoiler a {
text-align: left;
font: italic small-caps bold 16px arial; /* ordre a respecter pour les normes W3C avec le raccourci font > style > variant > weight > size/height > familly (on peut omettre toutes les propriétés sauf le size ez le family dans l ordre */
}
.outsidespoiler a:hover {
color: #fff;
}
/*inside spoiler*/
.insidespoiler {
width: 540px;
height: 340px;
overflow-y: auto;
text-align: justify;
color: #910; /* ainsi raccourci la valeur hexadécimale est en réalité 991100 > on supprime la deuxième même valeur */
font: bold 13px arial;
border: 4px inset #fff; /* ceci suffit pour les 4 côtés et sion veut un bord en moins > voir la ligne du bas */
border-width: 0 2px 2px; /* top right bottom left> si on ne le spécifie pas cela veut dire que ce sera la même largeur que le right déjà mis, pareil pour le top et le bottom */
padding: 10px;
margin: 7px auto;
-moz-box-shadow: 2px 2px 5px #dad;
-webkit-box-shadow: 2px 2px 5px #dad;
-o-box-shadow: 2px 2px 5px #dad;
box-shadow: 2px 2px 5px #dad;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#dad', Direction=135, Strength=7);
cursor: pointer;
}
.insidetext {
opacity : 0.07;
-moz-opacity : 0.07;
-khtml-opacity: 0.07;
-ms-filter: "alpha(opacity=7)"; /* IE 8 */
filter : alpha(opacity=7); /* IE < 8 */
transition: opacity 7s linear 5s;
-moz-transition: opacity 7s linear 5s;
-o-transition: opacity 7s linear 5s;
-webkit-transition: opacity 7s linear 5s;
-htm-transition: opacity 7s linear 5s;
}
.insidetext:hover {
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
-ms-filter: "alpha(opacity=100)";
filter: alpha(opacity=100);
transition: opacity 1.7s ease-in;
-moz-transition: opacity 1.7s ease-in;
-o-transition: opacity 1.7s ease-in;
-webkit-transition: opacity 1.7s ease-in;
-htm-transition: opacity 1.7s ease-in;
}
/*- end togglevisibility spoiler -*/

/*- no touch codes -*/
/*mort au soulignement*/
a, a:link, a:hover {
text-decoration: none!important;
-webkit-transition: color 0.7s ease;
-moz-transition: color 0.7s ease;
-o-transition: color 0.7s ease;
-htm-transition: color 0.7s ease;
transition: color 0.7s ease;
}
/*- end no touch codes -*/

Bien entendu, il n'y a aucune urgence Wink

NB : De la smart-entraide ? J’aime bien le nom et je pense te copier (une fois de plus).

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Lun 2 Jan 2012 - 6:51

Up (juste pour éviter que le sujet ne soit verrouillé)

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Final-Blonde le Mar 3 Jan 2012 - 11:52

Bonjour et bonne année Ventus.
Une de celle avec que de belles expériences, de réalisations de soi et de bonne santé.

Alors avant de te balancer le CSS revu et corrigé, quelques préscisions et directives afin d'avoir un CSS propre et net (ce qui se ressentira aussi sur l'apparence de ton forum).
Il faut aussi dire que sans HTML, je ne peux pas savoir ce qui correspond à quoi...

Préambule
- Avant tout sauvegarde ton CSS comme tu me l'as fourni dans un éditeur quelconque afin de pouvoir te reporter aux codes en cas de "déstabilisation"
- Pas de garantie sur une erreur humaine (que je suis !) =
Si quelque chose débloque après avoir installé le CSS, reporte-toi au HTML et vérifie l'identifiant avec le CSS
- Bien lire les commentaires-CSS afin de comprendre plus bas sans commentaire

Principalement
- Vérifier qu'il n'y ait pas d'identifiants morts =
identifiants n'existant plus dans le HTML
- La structure de la feuille de style devrait suivre celle du HTML, de la page et du forum =
Pour une meilleure lisibilité, placer les codes généraux en premier, ensuite descentre selon la structure (squelette) comme le header, le menu, les cellules, etc.
Idem pour les codes en eux-même,plus ou moins logique =
Le Display de l'élément, le positionnement, ses dimensions, l'intérieur (fond, texte), l'espacement intérieur avec les bords (padding), les bordures, les effets sur eux ou sur le contenant, les marges extérieures (margin), les effets spéciaux (ex:transition), la priorité du tout sur le reste (z-index)
- Si les class existent c'est pour pouvoir en utiliser les identifiants plusieurs fois n'importe où, dès le moment que dans le CSS les propriétés en sont identiques=
Vérifier dans le CSS les propriétés identiques pour un même endroit (et il y en a beaucoup dans ton CSS) si dans le HTML il ne vaudrait pas mieux leur attribuer le même identifiant "class"
- En retouchant à un endroit dont il y a déjà du CSS, se reporter à l'identifiant déjà existant pour en modifier les propriétés=
Ne pas ajouter de nouveaux identifiants et ainsi laisser les précédents dans la feuille de style en tant que identifiants morts
- Toujours chercher à alléger sa feuille de style =
Utiliser les raccourcis de codes, éviter les espaces (sauts de lignes) inutiles, regrouper les codes d'un même "bloc" ou endroit ensemble
Un aperçu des raccourcis communément utilisables (sur lequel je me suis aussi référée)
- Toujours chercher à comprendre les codes que l'on applique =
Via Google search ou autre

Précisions
- Pas de majuscule dans les codes =
même dans les codes hexadécimaux des couleurs, encore moins les URLurl(lien_image)
- Dès l'instant qu'il y a -moz- ou -webkit- succédé par une propriétés du CSS3 (comme radius, box-shadow, transition, etc), automatiquement appliquer les 4 lignes (sauf pour le radius qui se limite à 3) afin que tous les navigateurs standards (sauf IE le mauvais élève) puissent lire les effets appliqués=
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

-moz-box-shadow: 2px 2px 5px #dad;
-webkit-box-shadow: 2px 2px 5px #dad;
-o-box-shadow: 2px 2px 5px #dad;
box-shadow: 2px 2px 5px #dad;
- Si les 4 côtés ont la même valeur, ne spécifier qu'une seule fois avec la propriétés sans précision =
border: 1px solid #000;
Le radius dans l'exemple précédent signifie qu'il est ainsi appliquer aux 4 côtés
10°- Pour les hover =
A ne mettre que les propriétés qui doivent changer lors de ce hover. Si rien n'est précisé ce sont les propriétés de l'identifiant simple qui sont appliquées
11°- La propriétés z-index indique la priorité de l'élément sur ce qu'il y a dessous =
la différence de 1 suffit pour qu'il soit prioritaire, donc inutile de mettre des valeurs aussi excessivement hautes comme 999 qui peuvent amener à un beau chambardement si il faut aller au-dessus.
Si l'élément du dessous n'est pas autrement spécifié ne pas spécifié de z-index sauf si celui-ci se place au-dessus, alors commencer par une valeur de 1 en montant 1 à 1.

Enfin
- Les 11 (re)commandements précédents tu suivras =
Histoire que je n'aie pas fait tout ça pour rien Mr. Green

Le CSS :
Spoiler:
/* Background position */
body {
background: url('http://d1.e-loader.net/4bJhs1T8LF.png') top center; /*raccourci fond dans l ordre W3C > color image repeat attachment position > valeurs par défaut dans le même ordre (donc peuvent être omises) > transparent none repeat scroll 0 0*/
cursor: crosshair;
}

/*- no touch codes -*/
/*mort au soulignement*/
a, a:link, a:hover {
text-decoration: none!important;
-webkit-transition: color 0.7s ease;
-moz-transition: color 0.7s ease;
-o-transition: color 0.7s ease;
-htm-transition: color 0.7s ease;
transition: color 0.7s ease;
}
/*- end no touch codes -*/

/* Position de la navigation par rapport au header */
.menutop {
margin-top: -80px;
}
.main {
width: 100px;
background-color: #000;
text-align: center;
text-color: #ffffff;
text-transform: uppercase;
border: 5px solid #eae324;
border-width: 0 5px; /*raccourci bordures top right bottom, left qui ici dit que top et bottom ont la même valeur, idem pour right et left*/
padding: 5px 0; /*idem que pour les bordures et margin*/
}
.main:hover {
border-right: 5px solid #eae324;
border-left: 5px solid #eae324;
}
/*--------- le hover ne sert que pour les propriétés ou des valeurs qui doivent changer par le hover ----------*/

/* Navigation */
#i_icon_mini_index {
background: url(https://i60.servimg.com/u/f60/12/30/44/12/opa_fo10.png);
width: 90px;
height: 75px;
}
#i_icon_mini_index:hover {
background: url(https://i60.servimg.com/u/f60/12/30/44/12/forum10.png) no-repeat;
width: 90px; /*utile seulement si l image est de dimensions différentes que sans le hover*/
height: 75px; /*--------------------------------- idem et valable pour tous les autres suivants ------------------------*/
}
#i_icon_mini_portal {
background: url(https://i68.servimg.com/u/f68/15/58/41/48/5-1b2f10.png);
width: 100px;
height: 75px;
}
#i_icon_mini_portal:hover {
background: url(https://i68.servimg.com/u/f68/15/58/41/48/portai10.png);
width: 100px;
height: 75px;
}
#i_icon_mini_faq {
background: url(https://i60.servimg.com/u/f60/12/30/44/12/opa_fa10.png);
width: 80px;
height: 75px;
}
#i_icon_mini_faq:hover {
background: url(https://i60.servimg.com/u/f60/12/30/44/12/faq10.png);
width: 80px;
height: 75px;
}
#i_icon_mini_search {
background: url(http://img66.xooimage.com/files/a/b/0/opa-rechercher-2a6a952.png);
width: 110px;
height: 75px;
}
#i_icon_mini_search:hover {
background: url(http://img73.xooimage.com/files/8/4/5/boussole-2a6a923.png);
width: 110px;
height: 75px;
}
#i_icon_mini_login {
background: url(https://i60.servimg.com/u/f60/12/30/44/12/opa_on10.png);
width: 80px;
height: 75px;
}
#i_icon_mini_login:hover {
background: url(https://i60.servimg.com/u/f60/12/30/44/12/on10.png);
width: 80px;
height: 75px;
}
#i_icon_mini_members {
background: url(https://i60.servimg.com/u/f60/12/30/44/12/opa_me10.png);
width: 100px;
height: 75px;
}
#i_icon_mini_members:hover {
background: url(https://i60.servimg.com/u/f60/12/30/44/12/membre10.png);
width: 100px;
height: 75px;
}
#i_icon_mini_groups {
background: url(http://img70.xooimage.com/files/c/e/a/opa-groupe-2a6a994.png);
width: 110px;
height: 75px;
}
#i_icon_mini_groups:hover {
background: url(http://img68.xooimage.com/files/9/3/f/groupe-2a6a97e.png);
width: 110px;
height: 75px;
}
#i_icon_mini_message {
background: url(https://i60.servimg.com/u/f60/12/30/44/12/opa_mp10.png);
width: 67px;
height: 75px;
}
#i_icon_mini_message:hover {
background: url(https://i60.servimg.com/u/f60/12/30/44/12/mp10.png);
width: 67px;
height: 75px;
}
#i_icon_mini_logout {
background: url(https://i60.servimg.com/u/f60/12/30/44/12/opa_de10.png);
width: 80px;
height: 75px;
}
#i_icon_mini_logout:hover {
background: url(https://i60.servimg.com/u/f60/12/30/44/12/deco10.png);
width: 80px;
height: 75px;
}
#i_icon_mini_profile {
background: url(https://i60.servimg.com/u/f60/12/30/44/12/opa_pr10.png);
width: 90px;
height: 75px;
}
#i_icon_mini_profile:hover {
background: url(https://i60.servimg.com/u/f60/12/30/44/12/profil10.png);
width: 90px;
height: 75px;
}
#i_icon_mini_register {
background: url(https://i60.servimg.com/u/f60/12/30/44/12/rejoin10.gif);
width: 160px;
height: 75px;
}
#i_icon_mini_register:hover {
background: url(https://i60.servimg.com/u/f60/12/30/44/12/rejoin11.gif);
width: 160px;
height: 75px;
}
#i_icon_mini_new_message {
background: url(https://i60.servimg.com/u/f60/12/30/44/12/new-mp10.gif);
width: 67px;
height: 75px;
}
#i_icon_mini_new_message:hover {
background: url(https://i60.servimg.com/u/f60/12/30/44/12/new-mp11.gif);
width: 67px;
height: 75px;
}

/* CSS du portail*/
.leport {
background: url(https://i60.servimg.com/u/f60/12/30/44/12/fond_d10.jpg);
}
a.lien_portail {
display: block;
width: 280px;
border-left: 4px solid #fff;
border-right: 4px solid #fff;
background-color: #a89375;
margin-left: 27px;
}
a.lien_portail:hover {
background-color: #887963;
}
.case_portail {
background-color: #C7B499;
width:50%; color: #000000;
text-align: center;
font-size: 13px;
font-family: Century Gothic;
border-bottom: 1px solid #887963;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding-bottom: 8px;
}
.titre_case {
display: block;
background-color: #a89375;
text-align: right;
color: white;
font-weight: bold;
font-size: 13px;
border-bottom: 1px dotted #887963;
padding-right: 10px;
margin-bottom: 8px;
}

/*Tableau accueil*/
#owerf {
height: 100px!important;
text-align: left!important;
}
.titleutile {
width: 150px;
text-align: center;
}
.titleautre {
width: 150px;
text-align: center;
}
.tstaff {
font-size: 1em;
}
.thumbnail {
position: relative;
padding: 0px;
margin: 0px;
}
.thumbnail:hover {
background-color: #ad8c70;
z-index: 50;
padding: 0px;
margin: 0px;
}
.thumbnail span {
position: absolute;
background-color: #ad8c70;
left: -1000px;
visibility: hidden;
border: 1px groove #866a53;
color: #000;
padding: 5px;
}
.thumbnail span img {
border: 1px groove;
padding: 2px;
}
.thumbnail:hover span {
visibility: visible;
top: 50px;
left: 25px; /*position where enlarged image should offset horizontally */
width: 160px
}
/* Fin CSS du Portail */

/* Cellule d'image Dernier message et titre */
th {
background-color: transparent;
height: 20px;
color: #000;
font: italic 11px century gothic;
border-bottom: 1px solid #887963;
padding: 2px 3px;
}
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-color: transparent;
}
.forumline {
border-bottom: 1px solid #887963;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

/* Modification des cellules */
td.row1 {
border-bottom: 1px solid #887963;
}
td.row2 {
border-bottom: 1px solid #887963;
}
td.row3 {
border-bottom: 1px solid #887963;
}
td.row3Right {
border-bottom: 1px solid #887963;
}

/* En tête de la généralité */
.admintexthead {
display: block;
width: 795px;
height: 120px;
background: url('https://i60.servimg.com/u/f60/12/30/44/12/top10.png') no-repeat top center;
}
.admintextbody {
width: 795px;
background: url('https://i60.servimg.com/u/f60/12/30/44/12/center11.png') repeat-y top center repeat-y;
}
.admintextfooter {
width: 795px;
height: 15px;
background: url('https://i60.servimg.com/u/f60/12/30/44/12/footer10.png') no-repeat bottom center;
}
.jack {
font: 13px Georgia;
padding: 10px;
margin-top: 20px;
}
.jack1 {
font: 11px century gothic;
padding: 10px;
margin-top: 10px;
}

/* Image de chatbox */
body.chatbox {
background-image: url(http://img69.xooimage.com/files/a/d/b/fond-cb1-2d21bda.png);
background-repeat: no-repeat;
background-position: center;
background-color: #c8b499;
display: block;
}
.chatbox_row_2 {
padding: 4px;
background-color: transparent;
}
.chatbox_row_1 {
padding: 4px;
background-color: transparent;
}
#chatbox_header .cattitle strong {
display: none;
border: 0px;
}
#chatbox_header .cattitle:before {
content: "Pour parler !";
font-style: italic;
font-weigth: bold;
text-align: center;
padding: 7px;
color: #000000;
background-color: #c8b499;
}
/* Chat box à gauche */
#lnrbox {
position: fixed;
bottom: 50px;
left: 0px;
background-color: #b49873;
background-position: center;
border: 1px solid #887963;
border-bottom: 4px solid #8c775b;
z-index: 9;
-moz-border-radius: 0 5px 5px 0; /*raccourci pour firefox topleft topright bottomright bottomleft*/
-webkit-border-radius: 0 5px 5px 0; /*ligne pour navigateurs chrome et safari*/
border-radius: 0 5px 5px 0; /*ligne pour opera et autres*/
}

/* Barre de titre 1 */
.over .cate1 {
background-color: #A6957C url(http://d10.e-loader.net/YXvEbd3kwy.png) no-repeat;
height: 20px;
color: #000000;
text-align : right;
font: 11px Century gothic;
letter-spacing: 1px;
border: 1px solid #bcaf9c;
border-width: 0 0 1px 1px;
-moz-border-radius-bottomleft: 12px;
-webkit-border-radius-bottomleft: 12px;
border-radius-bottomleft: 12px;
padding: 1px 14px 1px 1px;
margin: -2px -3px 3px 20px; /* raaccourci top right bottom left*/
}

/* Test de code */
.forabg {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.forumbg {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.navbar {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.introduction {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.post {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
blockquote {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

/* Bannière PDC */
#banpdc {
widht: 1200px;
background-attachment: fixed; /*ne fonctionnera que si le class est dans la balise image sinon ajouter img*/
background-position: center; /*------------------ idem -----------------*/
margin-top: -8px;
}
/* Qui est en ligne */
.textewho {
display: block;
text-align: center;
font: italic 15px caribbean;
letter-spacing: 1px;
border-bottom: 1px solid #887963;
}
/* Footer */
.pdc1 {
margin-bottom: -100px;
}
/* Test du footer */
.testfooterpdc {
margin: 0px;
}
.forumactif {
text-align: center;
font-size: 10px;
margin-bottom: -400px;
}
/* truck machin chouet */
.spaceblou {
background: #a89375 URL(https://i60.servimg.com/u/f60/12/30/44/12/fond_d10.png) no-repeat bottom;
height: 150px;
text-align: justify;
font: 9px verdana;
border: 1px dotted #887963;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 0 10px;
}
/* Encadrer de la mini bannière */
.spaceblou img {
opacity: .5;
-moz-opacity: .5;
-khtml-opacity: .5;
-ms-filter: "alpha(opacity=50)";
filter: alpha(opacity=50);
}
.spaceblou img:hover {
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
-ms-filter: "alpha(opacity=100)";
filter: alpha(opacity=100);
}
.spaceblou2 {
padding-right: 18%;
padding-left: 18%;
}
.spaceblou3 {
padding-right:8%;
padding-left:8%;
}
.spaceblou4 {
padding-right:14%;
padding-left:58%;
}
.spaceblou5 {
padding-left:8%;
}
.spaceblou6 {
padding-left:8%;
}
.hierarchy {
display: inline;
margin: 0;
padding: 0;
text-transform: none;
border: none;
font-size: 11px;
}
#faitchier {
font-size: 9px;
}
#colour2 {
background-color: #a89375;
border: 1px dotted #887963;
border-top: none;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
padding: 0 2px;
}
#colour3 {
background-color: #a89375;
font-size: 9px;
border: 1px dotted #887963;
border-bottom: none;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
padding: 0 2px;
}

/* Nom des usagers */
.name {
display: block;
border-bottom: 1px solid #887963;
border-top: 1px solid #887963;
}
/* Profil masqué démasqué par le hover */
.profil1 {
background: #aa9a7b url(https://i60.servimg.com/u/f60/12/30/44/12/profil15.jpg) no-repeat;
width: 150px;
color: #000;
border-bottom: 1px dotted #887963;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/*Texte profil survolé*/
.profil1:hover {
background-image: url(https://i60.servimg.com/u/f60/12/30/44/12/profil16.jpg) no-repeat;
color: #173639;
border: 1px dotted #ae9775;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

/* Personnalisation code citer spoiler */
.quote {
background: url(https://i60.servimg.com/u/f60/12/30/44/12/citer10.png);
color: #534f3c;
border: 1px solid #887963;
border-width: 1px 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding-left: 24px;
}
/* Code CSS pour code */
.code {
background-color: #7e7761;
width: 500px!important;
color: #4e341a;
font: 12px perpetua;
border: 1px solid #887963;
border-width: 1px 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding-left: 6px;
}
.code div {
width: 500px!important;
max-height: 300px;
}

/* Vote placer dans les sujets */
.topvoting {
border: 1px solid #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.textevote {
text-align: center;
letter-spacing: 1px;
font: 10px century gothic;
}

/* Image de présentation */
.preze {
text-align: justify;
border:1px solid #887963;
border-width: 1px 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 0 5px;
}
.preze1 {
max-height: 75px;
overflow-y: auto;
color: #493826;
text-align: justify;
font-style: italic;
border:1px solid #887963;
border-width: 1px 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 0 5px;
margin-top: -50px;
}
.imagepresentation1 {
text-align: justify;
padding: 40px;
margin-top: -60px;
}
.imagepresentation2 {
text-align: justify;
padding: 40px;
margin-top: -80px;
}
.imagepresentation4 {
text-align: justify;
padding: 40px;
margin-top: -90px;
}
.imagepresentation3 {
text-align: justify;
padding: 40px;
margin-top: -90px;
}
.imagepresentation5 {
text-align: justify;
padding: 40px;
margin-top: -90px;
}
.imagepresentation6 {
text-align: justify;
padding: 40px;
margin-top: -90px;
}
#prez {
display: block;
text-align: center;
font-weight: bold;
font-size: 15px;
letter-spacing: 1px;
border:1px solid #887963;
border-width: 1px 6px;
}
#prez1 {
display: block;
border:1px solid #887963;
border-width: 1px 0 1px 6px;
padding-left: 15px;
}
/* Présentation du Staff */
.prezstaff {
text-align: justify;
padding-left: 30px;
}
.prezimagine {
margin-left: -40px;
}
#prezstaff1 {
margin-top: -30px;
}
#prezstaff2 {
display: block;
width: 500px;
text-align: center;
font: 15px Caribbean;
letter-spacing: 1px;
border:1px solid #887963;
border-width: 1px 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 0 30px 0 50px;
}
/* Présentation du Staff 2 */
.borderfauve {
border-top: 6px solid #887963;
margin-left: 0 40px 0 -2px;
}
.fauve {
background-color: #715e45;
opacity: .5;
-moz-opacity: .5;
-khtml-opacity: .5;
-ms-filter: "alpha(opacity=50)";
filter: alpha(opacity=50);
border: 6px solid #887963; /*ainsi écrit veut dire pour les 4 côtés, idem pour les radius*/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.fauve:hover {
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
-ms-filter: "alpha(opacity=100)";
filter: alpha(opacity=100);
}
.fauve1 {
text-align: center;
border-bottom: 1px solid #6d583c;
margin-top: 40px;
}
.fauvenoir {
padding: 0 -10px;
}
#textfauve {
text-align: justify;
font-style: italic;
border-bottom: 1px solid #6d583c;
padding-left: 6px;
margin: -30px 40px 0 -10px;
}
#prezfauve {
display: block;
border-bottom: 1px solid #6d583c;
padding: left: 15px;
margin: -18px 40px 0 0;
}

/* Publicité */
#pubentete {
display: block;
width: 500px;
text-align: justify;
border-bottom: 1px solid #887963;
padding-left: 40px;
margin-top: -30px;
}
.pubpdc {
width: 620px;
padding-left: 30px;
}
.borderpub {
display: block;
border-left: 6px solid #887963;
padding-left: 6px;
margin-left: -10px;
}
.borderpub1 {
display: block;
border-left: 6px solid #887963;
padding-left: 6px;
margin-right: 50px;
}
#pubpdc {
margin-top: -30px;
padding-left: 40px;
}
#pubpdc2 {
text-align: justify;
font-style: italic;
border-right: 6px solid #887963;
border-left: 6px solid #887963;
padding: 0 10px 0 5px;
margin: -20px 50px 0 60px;
}

/* Intrigue */
.intrigue1 {
display: block;
background: URL(https://i60.servimg.com/u/f60/12/30/44/12/intrig10.jpg) no-repeat;
height: 400px;
border-right: 6px solid #887963;
border-left: 6px solid #887963;
padding: 0 10px 0 6px;
margin: 0 50px 0 -10px;
}

/* Mise en page des annonces */
#re {
background-color: #6f614d;
border: 6px solid #887963;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 2px;
}
#re1 {
display: block;
background-color: #3c2f30;
color: #b75a4d;
text-align: center;
font: small-caps 18px perpetua;
letter-spacing: 1px;
border-left: 9px solid #534041;
border-right: 9px solid #534041;
}
#p1 {
color: #c8b499;
text-align: justify;
font: 11px century gothic;
padding: 0 22px 0 6px;
margin: 0px;
}
#p2 {
color: #c8b499;
font: 16px Caribbean;
letter-spacing: 1px;
border-bottom: 3px solid #887963;
padding: 3px;
margin-top: -20px;
}
.p3 {
display:block;
text-indent: 20px;
text-align: justify;
font: 11px century gothic;
padding: 3px;
margin-top:-30px;
}
#re2 {
width: 86%;
color: #fff;
text-indent: 20px;
text-align: justify;
font: 11px century gothic;
padding: 3px;
margin: 0px;
}


/* Info bulle de personnage prétiré */
.infobulle {
position: relative;
}
.infobulle span {
display: none; /* ceci masque l'infobulle */
}
.infobulle:hover {
background: #5a564f; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
}
.infobulle:hover span {
display: inline; /* ceci affiche l'infobulle */
position: absolute;
top: 70px; /* on positionne notre infobulle */
left: 15px;
background: #070a12; /* arrière-plan de l'infobulle */
color: white; /* texte dans l'infobulle */
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é */
padding: 3px;
border: 1px solid black;
border-left: 1px solid black;
}

#wrap {
-webkit-border-radius: 20px; /*ici tu as mis que pour les navs webkit et opera*/
-moz-border-radius: 20px;
border-radius: 20px;
padding: 10px;
}

div, table {
border: none; /*valeur par défaut donc inutile de le spécifier mais pourquoi le radius alors*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

/*togglevisibility spoiler*/
/*outside spoiler*/
.outsidespoiler a {
text-align: left;
font: italic small-caps bold 16px arial; /* ordre a respecter pour les normes W3C avec le raccourci font > style > variant > weight > size/height > familly (on peut omettre toutes les propriétés sauf le size et le family dans l ordre */
}
.outsidespoiler a:hover {
color: #fff;
}
/*inside spoiler*/
.insidespoiler {
width: 540px;
height: 340px;
overflow-y: auto;
text-align: justify;
color: #910; /* ainsi raccourci la valeur hexadécimale est en réalité 991100 > on supprime la deuxième même valeur */
font: bold 13px arial;
border: 4px inset #fff; /* ceci suffit pour les 4 côtés et si on veut un bord en moins > voir la ligne du bas */
border-width: 0 2px 2px; /* top right bottom left> si on ne le spécifie pas cela veut dire que ce sera la même largeur que le right déjà mis, pareil pour le top et le bottom */
padding: 10px;
margin: 7px auto;
-moz-box-shadow: 2px 2px 5px #dad;
-webkit-box-shadow: 2px 2px 5px #dad;
-o-box-shadow: 2px 2px 5px #dad;
box-shadow: 2px 2px 5px #dad;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#dad', Direction=135, Strength=7);
cursor: pointer;
}
.insidetext {
opacity : 0.07;
-moz-opacity : 0.07;
-khtml-opacity: 0.07;
-ms-filter: "alpha(opacity=7)"; /* IE 8 */
filter : alpha(opacity=7); /* IE < 8 */
transition: opacity 7s linear 5s;
-moz-transition: opacity 7s linear 5s;
-o-transition: opacity 7s linear 5s;
-webkit-transition: opacity 7s linear 5s;
-htm-transition: opacity 7s linear 5s;
}
.insidetext:hover {
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
-ms-filter: "alpha(opacity=100)";
filter: alpha(opacity=100);
transition: opacity 1.7s ease-in;
-moz-transition: opacity 1.7s ease-in;
-o-transition: opacity 1.7s ease-in;
-webkit-transition: opacity 1.7s ease-in;
-htm-transition: opacity 1.7s ease-in;
}
/*- end togglevisibility spoiler -*/
Je n'ai pas tout corrigé, à toi de voir pour l'ordre des blocs (n'ayant pas tout su à quoi ça correspondait) et dans les codes.
Les raccourcis eux sont effectifs.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Mar 3 Jan 2012 - 16:59

Ah les résolutions sont faites et nous avons une fois de plus fouler le pas d’une nouvelle année. Pour ma part, je me suis dit que pourquoi ne pas refaire une résolution… Que voici : <<Perdre trois kilos et acquérir suffisamment de sagesse pour savoir s'il est réellement important de les perdre l'année prochaine.>> Mais bon, bref, passons les formalités basiques.

D’avance, je te remercie fortement pour la correction du CSS qui a certainement occupée une bonne partie de la soirée, journée et plus encore.

Oui chef, bien entendu qu’avec une explication des plus explicites, je vais enfin prendre le temps de pencher mon petit cerveau de piaf sur les corrections en vigueur afin de rendre le forum plus fluide. Faut pas m’en vouloir, mais comme beaucoup, une fois que tout fonctionne bien, pourquoi changer ? Pas taper lol

Mise à part cela, je viens de mettre en ligne. (J’ai toujours les codes d’origines sur mon pc, mais merci tout de même pour l’avoir mentionné. Oui oui, je suis un grand conservateur et pour preuve, j’ai des fichiers de forums que j’avais il y a plus de 8 ans avec toutes les images et points important des forums.)

Par contre, une fois en place avec les corrections apportées, je constate un énorme changement d’apparence et pour te fournir une petite idée, voici quelques images :
Pour la page d’accueil version originale, avant modification du CSS
Spoiler:
Après avoir posté le CSS retouché

Spoiler:
Le cadre extérieur du forum a disparu, le fond également sans oublier le message de la page d’accueil qui en prend cher…

Ensuite, il y a également les catégories du forum qui perdent l’image d’entête :
Spoiler:

Et avec la retouche du CSS :
Spoiler:

Sans commentaire ! Je fais quoi docteur ? Razz

Plus sérieusement, je ne sais quoi faire… et bien entendu, je n’ai rien contre toi, bien au contraire, je te remercie d’avance pour tout l’aide que tu a été en mesure de m’apporter. Mais pour cette opération, je me retrouve dans une impasse.
De plus, je ne te parle même pas des problèmes dans le port(ail), dans les sujets et sous forum en passant également par la partie qui se trouve sous l’avatar. Et également l’image du fond de la Cb qui est décalé sur le haut.

HELP xD


Si ta une idée, elle est la bienvenue, sans quoi, je laisse comme c'est actuellement avec l'ancienne version du CSS. Bref, j'attends ton verdict. Amicalement, Ventus


Dernière édition par Ventus le Jeu 5 Jan 2012 - 21:10, édité 1 fois

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Final-Blonde le Mar 3 Jan 2012 - 20:42

@Ventus a écrit:Ah les résolutions sont faites et nous avons une fois de plus fouler le pas d’une nouvelle année.
hi hi, je parlais de réalisation de soi, ce qui, pour moi, est en contradiction avec le terme "résolution" (sauf d'écran).
@Ventus a écrit:Pour ma part, je me suis dit que pourquoi ne pas refaire une résolution… Que voici : <<Perdre trois kilos et acquérir suffisamment de sagesse pour savoir s'il est réellement important de les perdre l'année prochaine.>>
Mr. Green
C'est pourquoi, je ne prends que de mauvaises résolutions en début d'année, afin d'être certaine que je m'épaterai de ne pas les avoir tenues !
Eh, pas folle la guêpe !

Ventus, comme je te l'ai dit, il fallait s'attendre à des "déstabilisations" parce que je n'ai aucune espèce de connaissance du HTML qui se rapporte à ce CSS.
Par contre, si je t'ai fait une correction exhaustive c'est juste pour que dans (plus ou moins) le détail tu saches comment ça marche, et comment avoir un CSS "propre".
Maintenant, à toi de corriger ma correction pour rétablir l'équilibre, avec la connaissance que tu as de ton HTML, du CSS d'origine, ceci dans une feuille de style CSS saine.

Par exemple, prenons le "body" et son fond manquant :
Vérifie bien le lien image (et aussi ôte toutes les apostrophes qui sont entre les parenthèses des liens images).
Vérifie le HTML, l'image de fond dans le PA >> Images
Etc.

Prends ton temps vu tu as toujours l'autre CSS.
Ce que j'ai fait n'est qu'une suggestion d'améliorer ta feuille de style, de rendre le tout plus lisible.
A toi de l'appliquer selon ton squelette HTML et selon les préceptes des 11 (re)commandements. ::fleur::

Bien sûr, si tu as des endroits où ça coince, n'hésite pas à poser des questions, c'est ainsi que l'on apprend le plus intelligemment.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Mar 3 Jan 2012 - 21:38

Pour la perte de trois kilos c’est surtout une ironie ^^ Fallait que je trouve quelque chose pour avoir une bonne conscience Very Happy

Ensuite, n’est-il pas vrai que dans un sens il faut savoir être sage ? Car dans un sens propre et figuré, la sagesse est d'être fou lorsque les circonstances en valent la peine. La vraie sagesse est de ne pas sembler sage et savoir se contenter de ce que l'on a : c'est être riche. C’est pourquoi je vais de ce pas mettre le toute sur mon forum test et travailler tes hrum… grum… (dsl, un chat dans la gorge) 11 hum (re)commandements xD
De plus, demain j’ai une journée à vide, soit pas de boulot pour cause de météo. Pour une fois que c’est dans un sens avantageux.

En cas de problème, je ne vais pas me gêner de revenir à la charge et te bombarder de questions Mouhahaha (je laisse provisoirement le sujet ouvert, le temps de mettre en place tes conseils.

Très affectueusement (non non, je ne flirte pas) Bon ok, Très amicalement, Ventus

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Final-Blonde le Mer 4 Jan 2012 - 14:45

Hé hé, en voilà de la sagesse !

J'ai aussi un peu de temps aujourd'hui (et aussi pour des raisons de météo = pas de ski), donc j'ai regardé de plus près l'exemple "body" dans le code source de ton forum.

Dans le HTML c'est la première balise d'une page vierge (directement après "head" qui contient les scripts).
C'est pourquoi dans le CSS elle devrait aussi être en premier. Dans cet esprit, on descend codes par codes dans la page et à l'intérieur des pages ensuite, pour terminer dans les détails, les plus, etc...


Bref, dans le "body"-source donc, je vois cette image :
https://i60.servimg.com/u/f60/12/30/44/12/fond_d11.jpg
Dans le "body"-CSS que tu as fourni, il y a ce lien :
/* Background position */
body
{
background-position:top;
background-position:center;
background-image: URL('http://d1.e-loader.net/4bJhs1T8LF.png') /*ne mène nulle part*/
background-repeat: repeat;
}
Que fait ce lien dans le CSS, hum ?
Dans l'esprit de correction dans lequel nous sommes toi et moi, essayons ce code :
body {
background: #c8b499 url(https://i60.servimg.com/u/f60/12/30/44/12/fond_d11.jpg) fixed 50% 50%;
cursor: crosshair;
}
On n'ajoute pas le "repeat" parce que c'est une valeur par défaut (/*se référer aux commentaires CSS*/)
Par contre, si les propriétés du body sont placées dans le CSS, il faut les supprimer du HTML et du champ image dans le PA >> Images afin de laisser tout son sens à l'allégement par le CSS.

Toujours en ayant "ausculté" le source, je me suis rendue compte de quelques erreurs dans le template overall_header, comme par exemple cette faute rédhibitoire de la fermeture "head":
Code:
<head/>
En lieu et place de
</head>
...
Je veux bien y jeter un coup d'oeil, mais si comme tu l'as dit dans ton premier message il n'a été modifié que pour le "spoiler", pourquoi ne pas remettre celui d'origine en supprimant le personnalisé par:
suppr dans la liste des templates >> menu "Général"
Cependant, s tu as d'autres éléments modifiés directement dans ce template, alors vamos (à la playa di templata !)...

En attendant, l'effet "radius" est vraiment à complété sur ton CSS d'origine à l'instar du CSS corrigé :
C'est dommage de ne pas permettre à un maximum de navigateurs de lire ce que les codeurs font pour les "harmoniser" entre eux.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Mer 4 Jan 2012 - 18:43

J’avance doucement mais surement, car entre temps, il m’a fallu faire des courses.
Ensuite, pour répondre au lien étrange qui ne mène nulle part, c’était mon ancien hébergeur d’image qui a été fermé. Les prix ont fortement augmentés et j’ai résilié une reconduite du contrat. Donc, effectivement, c’est à supprimer.

Le lien : https://i60.servimg.com/u/f60/12/30/44/12/fond_d11.jpg c’est tout simplement le fond du forum avec le cadre.
Donc j’ai supprimé l’image https://i60.servimg.com/u/f60/12/30/44/12/fond_d11.jpg qui été affichée dans la gestion d’image. Et effectivement, je commence a comprendre certaines erreurs sur le forum.
En plaçant ton CSS body tout revient propre et tout fonctionne parfaitement bien. Comme quoi, faut savoir. cheers

Je viens de faire un essais pour l’optimisation du CSS et ça passe sans aucun bug Very Happy

Par contre, quand je regarde dans les templates sous overall_header je ne trouve pas la balise de <head/> mais uniquement le </head> …

Ensuite, effectivement, il n’y a pas que la modification pour les spoilers dans ce template, il y a bien d’autres choses. Souhaites-tu que je te le présente ?
Le plus simple, je te le poste directement.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" xmlns="http://www.w3.org/1999/xhtml">
<head>
<table id="lnrbox"><tr><td>
<iframe src="/chatbox/chatbox.forum?page=front&amp;" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px;
display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;">
<img src="http://i60.servimg.com/u/f60/12/30/44/12/open_c10.png" onClick="document.getElementById('chatboxpop')
.style.display=(this.src=='http://i60.servimg.com/u/f60/12/30/44/12/open_c10.png')?'block':'none';
this.src=(this.src=='http://i60.servimg.com/u/f60/12/30/44/12/open_c10.png')?'http://i60.servimg.com/u/f60/12/30/44/12/close_10.png'
:'http://i60.servimg.com/u/f60/12/30/44/12/open_c10.png';"/></td></tr></table>
    <!-- BEGIN meta_emulate_ie7 -->
   <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
   <!-- END meta_emulate_ie7 -->
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_canonical_url -->
  <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
  <!-- END switch_canonical_url -->{META_FAVICO}
   {META}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

<!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->
 
        <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {
         var w_cont = $('#fa_ticker_container').width();

         if (w_cont > 0)
         {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des ?l?ments */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du contenur en fonction des ?l?ments et de la hauteur personnalis?e dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des ?l?ments et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">//<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         pm.focus();
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         report.focus();
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
      <!-- END switch_ticker -->
   });

   

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>
<center><img id="banpdc" src="http://img24.xooimage.com/files/2/7/3/pirateheader-1c3f131.png" /></center>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}

   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>

            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr><div class="menutop">
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </div></tr>
            </table>

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</body>
</html>
<!-- END html_validation -->

Pour finir, je ne saisis pas l’histoire du radius. Bien que ce soit pour harmoniser entre chaque navigateur, je ne sais comment faire pour la correction et rendre les effets fonctionnels.

Dans les liens d'images, les ' ont été toutes supprimées.

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Final-Blonde le Mer 4 Jan 2012 - 21:11

OK, ravie de voir que tu avances.

Pour les "radius" (coins arrondis), reprends le point qui en parle avec tableau à l'appui.
En outre, j'ai corrigé tous les codes "radius" de ton CSS, donc là tu les as pour tous les navigateurs qui lisent l'une de ses lignes.
Mais aussi, tu saisiras encore mieux en lisant les /*commentaires CSS*/

Pour le template, je regarde ça dès que je peux (et vite parce que les vacances touchent à leur fin).


Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Mer 4 Jan 2012 - 23:49

Juste une question, pour le point n° 8
Dans le CSS j'ai par exemple :
Code:
#colour2
{
  background-color: #a89375;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
padding-left: 2px;
padding-right: 2px;
border-left: #887963 1px dotted;
border-bottom: #887963 1px dotted;
border-right: #887963 1px dotted;
}

#colour3
{
  background-color: #a89375;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
padding-left: 2px;
padding-right: 2px;
border-left: #887963 1px dotted;
border-top: #887963 1px dotted;
border-right: #887963 1px dotted;
font-size: 9px;
}

Je remplace par exemple comme suite :
Code:
#colour2
{
  background-color: #a89375;
-moz-box- bottomleft: 10px #dad;
-webkit-box- bottomleft: 10px #dad;
-o-box- bottomleft: 10px #dad;
box- bottomleft: 10px #dad;
-moz-box- bottomright: 10px #dad;
-webkit-box- bottomright: 10px #dad;
-o-box- bottomright: 10px #dad;
box- bottomright: 10px #dad;
padding-left: 2px;
padding-right: 2px;
border-left: #887963 1px dotted;
border-bottom: #887963 1px dotted;
border-right: #887963 1px dotted;
}

#colour3
{
  background-color: #a89375;
-moz-box- topleft: 10px #dad;
-webkit-box- topleft: 10px #dad;
-o-box- topleft: 10px #dad;
box- topleft: 10px #dad;
-moz-box- topright: 10px #dad;
-webkit-box- topright: 10px #dad;
-o-box- topright: 10px #dad;
box- topright: 10px #dad;
padding-left: 2px;
padding-right: 2px;
border-left: #887963 1px dotted;
border-top: #887963 1px dotted;
border-right: #887963 1px dotted;
font-size: 9px;
}

Merci de confirmer si c'est juste ou non.

D'avance, une fois de plus n'est pas coutume, merci Very Happy

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Final-Blonde le Jeu 5 Jan 2012 - 10:23

Bonjour Ventus,

Comme dit plusieurs fois précédemment, réfère-toi à la correction que je t'ai faite, elle est exhaustive (et explique presque tout avec les /*commentaires CSS*/ qui n'explique pas à chaque même code à nouveau, ce qui veut dire qu'il faut lire).
Les identifiants y sont respectés, les propriétés aussi. S'il y a des déséquilibres avec la correction c'est que je ne connais pas le HTML (et peut-être que j'ai fait une erreur aussi), en outre, c'est à toi de corriger cela.

Ce ne serait pas t'aider à bien intégrer le codage CSS si je ne te laissais pas cette (plus petite) partie à faire.

Pour ta question, regarde sur mon CSS, c'est corrigé et expliqué plus haut que cet identifiant (que je reprends du CSS corrigé) :
#colour2 {
background-color: #a89375;
border: 1px dotted #887963;
border-top: none;
-moz-border-radius: 0 0 10px 10px; /*topL 0 > topR 0 > bottomR 10px > bottomL 10px > va dans le sens du cadran-montre > comme pour le border, le margin, le padding*/
-webkit-border-radius: 0 0 10px 10px; /*on reporte les mêmes valeurs pour les navs Safari et Chrome*/
border-radius: 0 0 10px 10px; /*on reporte les mêmes valeurs pour les navs Opera et autres*/
padding: 0 2px;
}

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Jeu 5 Jan 2012 - 10:35

Bien le bonjour Final-Blonde et une fois de plus n'est pas coutume, la météo ne semble pas vouloir nous laisser le temps pour travailler.

Merci bien pour la correction et confirmer que j'étais dans le faux. Cette fois, c'est tout bon et m'en vais poursuivre les dernières corrections en cours.


Amicalement, Ventus



EDITE 14:20

Je viens de mettre le CSS en place sur le forum et tout passe a merveille sauf une chose que je ne trouve pas pourquoi...
Entre le haut du forum et la bannière, normalement il n'y a pas de marge et là, il y a une marge d'environ 5px Si ta une idée de mon erreur, merci de le faire savoir.

D'avance, merci infiniment pour ton aide super précieuse qui a effectivement mener à une grande fluidité sur le forum. Certains membres l'ont remarqué.
Mes félicitation pour ton savoir et surtout ta patience Very Happy

Très amicalement, Ventus

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Final-Blonde le Jeu 5 Jan 2012 - 20:37

Peux-tu me donner le CSS que tu as ?


PS : Pourrais-tu dans le message plus haut mettre toute la partie des images entre les balises "spoiler" afin que nous ayons moins à scroller... Je sais je suis une vraie paresseuse du scroll. :ange:

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Jeu 5 Jan 2012 - 21:11

Voilà le CSS actuel après correction de certains bugs.

Code:
/*- no touch codes -*/
/*mort au soulignement*/
a, a:link, a:hover {
text-decoration: none!important;
-webkit-transition: color 0.7s ease;
-moz-transition: color 0.7s ease;
-o-transition: color 0.7s ease;
-htm-transition: color 0.7s ease;
transition: color 0.7s ease;
}
/*- end no touch codes -*/

/* Position de la navigation par rapport au header */
.menutop {
margin-top: -80px;
}
.main {
width: 100px;
background-color: #000;
text-align: center;
text-color: #ffffff;
text-transform: uppercase;
border: 5px solid #eae324;
border-width: 0 5px;
padding: 5px 0;
}
.main:hover {
border-right: 5px solid #eae324;
border-left: 5px solid #eae324;
}

/* Navigation */
#i_icon_mini_index {
background: url(http://i60.servimg.com/u/f60/12/30/44/12/opa_fo10.png);
width: 90px;
height: 75px;
}
#i_icon_mini_index:hover {
background: url(http://i60.servimg.com/u/f60/12/30/44/12/forum10.png) no-repeat;
width: 90px;
height: 75px;
}
#i_icon_mini_portal {
background: url(http://i68.servimg.com/u/f68/15/58/41/48/5-1b2f10.png);
width: 100px;
height: 75px;
}
#i_icon_mini_portal:hover {
background: url(http://i68.servimg.com/u/f68/15/58/41/48/portai10.png);
width: 100px;
height: 75px;
}
#i_icon_mini_faq {
background: url(http://i60.servimg.com/u/f60/12/30/44/12/opa_fa10.png);
width: 80px;
height: 75px;
}
#i_icon_mini_faq:hover {
background: url(http://i60.servimg.com/u/f60/12/30/44/12/faq10.png);
width: 80px;
height: 75px;
}
#i_icon_mini_search {
background: url(http://img66.xooimage.com/files/a/b/0/opa-rechercher-2a6a952.png);
width: 110px;
height: 75px;
}
#i_icon_mini_search:hover {
background: url(http://img73.xooimage.com/files/8/4/5/boussole-2a6a923.png);
width: 110px;
height: 75px;
}
#i_icon_mini_login {
background: url(http://i60.servimg.com/u/f60/12/30/44/12/opa_on10.png);
width: 80px;
height: 75px;
}
#i_icon_mini_login:hover {
background: url(http://i60.servimg.com/u/f60/12/30/44/12/on10.png);
width: 80px;
height: 75px;
}
#i_icon_mini_members {
background: url(http://i60.servimg.com/u/f60/12/30/44/12/opa_me10.png);
width: 100px;
height: 75px;
}
#i_icon_mini_members:hover {
background: url(http://i60.servimg.com/u/f60/12/30/44/12/membre10.png);
width: 100px;
height: 75px;
}
#i_icon_mini_groups {
background: url(http://img70.xooimage.com/files/c/e/a/opa-groupe-2a6a994.png);
width: 110px;
height: 75px;
}
#i_icon_mini_groups:hover {
background: url(http://img68.xooimage.com/files/9/3/f/groupe-2a6a97e.png);
width: 110px;
height: 75px;
}
#i_icon_mini_message {
background: url(http://i60.servimg.com/u/f60/12/30/44/12/opa_mp10.png);
width: 67px;
height: 75px;
}
#i_icon_mini_message:hover {
background: url(http://i60.servimg.com/u/f60/12/30/44/12/mp10.png);
width: 67px;
height: 75px;
}
#i_icon_mini_logout {
background: url(http://i60.servimg.com/u/f60/12/30/44/12/opa_de10.png);
width: 80px;
height: 75px;
}
#i_icon_mini_logout:hover {
background: url(http://i60.servimg.com/u/f60/12/30/44/12/deco10.png);
width: 80px;
height: 75px;
}
#i_icon_mini_profile {
background: url(http://i60.servimg.com/u/f60/12/30/44/12/opa_pr10.png);
width: 90px;
height: 75px;
}
#i_icon_mini_profile:hover {
background: url(http://i60.servimg.com/u/f60/12/30/44/12/profil10.png);
width: 90px;
height: 75px;
}
#i_icon_mini_register {
background: url(http://i60.servimg.com/u/f60/12/30/44/12/rejoin10.gif);
width: 160px;
height: 75px;
}
#i_icon_mini_register:hover {
background: url(http://i60.servimg.com/u/f60/12/30/44/12/rejoin11.gif);
width: 160px;
height: 75px;
}
#i_icon_mini_new_message {
background: url(http://i60.servimg.com/u/f60/12/30/44/12/new-mp10.gif);
width: 67px;
height: 75px;
}
#i_icon_mini_new_message:hover {
background: url(http://i60.servimg.com/u/f60/12/30/44/12/new-mp11.gif);
width: 67px;
height: 75px;
}

/* CSS du portail*/
.leport {
background: url(http://i60.servimg.com/u/f60/12/30/44/12/fond_d10.jpg);
}
a.lien_portail {
display: block;
width: 280px;
border-left: 4px solid #fff;
border-right: 4px solid #fff;
background-color: #a89375;
margin-left: 27px;
}
a.lien_portail:hover {
background-color: #887963;
}
.case_portail {
background-color: #C7B499;
width:50%; color: #000000;
text-align: center;
font-size: 13px;
font-family: Century Gothic;
border-bottom: 1px solid #887963;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding-bottom: 8px;
}
.titre_case {
display: block;
background-color: #a89375;
text-align: right;
color: white;
font-weight: bold;
font-size: 13px;
border-bottom: 1px dotted #887963;
padding-right: 10px;
margin-bottom: 8px;
}

/*Tableau accueil*/
#owerf {
height: 100px!important;
text-align: left!important;
}
.titleutile {
width: 150px;
text-align: center;
}
.titleautre {
width: 150px;
text-align: center;
}
.tstaff {
font-size: 1em;
}
.thumbnail {
position: relative;
padding: 0px;
margin: 0px;
}
.thumbnail:hover {
background-color: #ad8c70;
z-index: 50;
padding: 0px;
margin: 0px;
}
.thumbnail span {
position: absolute;
background-color: #ad8c70;
left: -1000px;
visibility: hidden;
border: 1px groove #866a53;
color: #000;
padding: 5px;
}
.thumbnail span img {
border: 1px groove;
padding: 2px;
}
.thumbnail:hover span {
visibility: visible;
top: 50px;
left: 25px; /*position where enlarged image should offset horizontally */
width: 160px
}
/* Fin CSS du Portail */

/* Image de fond */
body {
background: #c8b499 url(http://i60.servimg.com/u/f60/12/30/44/12/fond_d11.jpg) fixed 50% 50%;
cursor: crosshair;
}

/* Cellule d'image Dernier message et titre */
th {
background-color: transparent;
height: 20px;
color: #000000;
font: italic 11px century gothic;
border-bottom: 1px solid #887963;
padding: 2px 3px;
}
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-color: transparent;
}
.forumline {
border-bottom: 1px solid #887963;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

/* Modification des cellules */
td.row1 {
border-bottom: 1px solid #887963;
}
td.row2 {
border-bottom: 1px solid #887963;
}
td.row3 {
border-bottom: 1px solid #887963;
}
td.row3Right {
border-bottom: 1px solid #887963;
}

/* En tête de la généralité */
.admintexthead {
display: block;
width: 795px;
height: 120px;
background: url(http://i60.servimg.com/u/f60/12/30/44/12/top10.png) no-repeat top center;
}
.admintextbody {
width: 795px;
background: url(http://i60.servimg.com/u/f60/12/30/44/12/center11.png) transparent top center repeat-y;
}
.admintextfooter {
width: 795px;
height: 15px;
background: url(http://i60.servimg.com/u/f60/12/30/44/12/footer10.png) no-repeat bottom center;
}
.jack {
font: 13px Georgia;
padding: 10px;
margin-top: 20px;
}
.jack1 {
font: 11px century gothic;
padding: 10px;
margin-top: 10px;
}

/* Image de chatbox */
body.chatbox {
background-image: url(http://img69.xooimage.com/files/a/d/b/fond-cb1-2d21bda.png);
background-repeat: no-repeat;
background-position: center;
background-color: #c8b499;
display: block;
}
.chatbox_row_2 {
padding: 4px;
background-color: transparent;
}
.chatbox_row_1 {
padding: 4px;
background-color: transparent;
}
#chatbox_header .cattitle strong {
display: none;
border: 0px;
}
#chatbox_header .cattitle:before {
content: "Pour parler !";
font-style: italic;
font-weigth: bold;
text-align: center;
padding: 7px;
color: #000000;
background-color: #c8b499;
}
/* Chat box à gauche */
#lnrbox {
position: fixed;
bottom: 50px;
left: 0px;
background-color: #b49873;
background-position: center;
border: 1px solid #887963;
border-bottom: 4px solid #8c775b;
z-index: 9;
-moz-border-radius: 0 5px 5px 0; /*raccourci pour firefox topleft topright bottomright bottomleft*/
-webkit-border-radius: 0 5px 5px 0; /*ligne pour navigateurs chrome et safari*/
border-radius: 0 5px 5px 0; /*ligne pour opera et autres*/
}

/* Barre de titre 1 */
.over .cate1{
font-family: Century gothic;
font-size: 11px;
text-decoration: none;
letter-spacing: 1px;
background-color: #A6957C;
background-image: url(http://d10.e-loader.net/YXvEbd3kwy.png);
background-repeat: no-repeat;
color: #000000;
text-align : right;
padding: 1px;
margin: 3px;
margin-top: -2px;
margin-left: 20px;
margin-right: -3px;
padding-right: 14px;
-moz-border-radius-bottomleft: 12px;
-webkit-border-radius-bottomleft: 12px;
border-radius-bottomleft: 12px;
border-bottom: 1px solid #bcaf9c;
border-left: 1px solid #bcaf9c;
height: 20px;
}

/* Test de code */
.forabg {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.forumbg {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.navbar {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.introduction {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.post {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
blockquote {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/* Qui est en ligne */
.textewho {
display: block;
text-align: center;
font: italic 15px caribbean;
letter-spacing: 1px;
border-bottom: 1px solid #887963;
}
/* Footer */
.pdc1 {
margin-bottom: -100px;
}
/* Test du footer */
.testfooterpdc {
margin: 0px;
}
.forumactif {
text-align: center;
font-size: 10px;
margin-bottom: -400px;
}
/* truck machin chouet */
.spaceblou {
background: #a89375 URL(http://i60.servimg.com/u/f60/12/30/44/12/fond_d10.png) no-repeat bottom;
height: 150px;
text-align: justify;
font: 9px verdana;
border: 1px dotted #887963;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 0 10px;
}
/* Encadrer de la mini bannière */
.spaceblou img {
opacity: .5;
-moz-opacity: .5;
-khtml-opacity: .5;
-ms-filter: "alpha(opacity=50)";
filter: alpha(opacity=50);
}
.spaceblou img:hover {
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
-ms-filter: "alpha(opacity=100)";
filter: alpha(opacity=100);
}
.spaceblou2 {
padding-right: 18%;
padding-left: 18%;
}
.spaceblou3 {
padding-right:8%;
padding-left:8%;
}
.spaceblou4 {
padding-right:14%;
padding-left:58%;
}
.spaceblou5 {
padding-left:8%;
}
.spaceblou6 {
padding-left:8%;
}
.hierarchy {
display: inline;
margin: 0;
padding: 0;
text-transform: none;
border: none;
font-size: 11px;
}
#faitchier {
font-size: 9px;
}
#colour2 {
background-color: #a89375;
border: 1px dotted #887963;
border-top: none;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
padding: 0 2px;
}
#colour3 {
background-color: #a89375;
font-size: 9px;
border: 1px dotted #887963;
border-bottom: none;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
padding: 0 2px;
}

/* Nom des usagers */
.name {
display: block;
border-bottom: 1px solid #887963;
border-top: 1px solid #887963;
}
/* Profil masqué démasqué par le hover */
.profil1 {
background: #aa9a7b url(http://i60.servimg.com/u/f60/12/30/44/12/profil15.jpg) no-repeat;
width: 150px;
color: #000;
border-bottom: 1px dotted #887963;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/*Texte profil survolé*/
.profil1:hover {
background-image: url(http://i60.servimg.com/u/f60/12/30/44/12/profil16.jpg) no-repeat;
color: #173639;
border: 1px dotted #ae9775;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

/* Personnalisation code citer spoiler */
.quote {
background: url(http://i60.servimg.com/u/f60/12/30/44/12/citer10.png);
color: #534f3c;
border: 1px solid #887963;
border-width: 1px 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding-left: 24px;
}
/* Code CSS pour code */
.code {
background-color: #7e7761;
width: 500px!important;
color: #4e341a;
font: 12px perpetua;
border: 1px solid #887963;
border-width: 1px 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding-left: 6px;
}
.code div {
width: 500px!important;
max-height: 300px;
}

/* Vote placer dans les sujets */
.topvoting {
border: 1px solid #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.textevote {
text-align: center;
letter-spacing: 1px;
font: 10px century gothic;
}

/* Image de présentation */
.preze {
text-align: justify;
border:1px solid #887963;
border-width: 1px 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 0 5px;
}
.preze1 {
max-height: 75px;
overflow-y: auto;
color: #493826;
text-align: justify;
font-style: italic;
border:1px solid #887963;
border-width: 1px 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 0 5px;
margin-top: -50px;
}
.imagepresentation1 {
text-align: justify;
padding: 40px;
margin-top: -60px;
}
.imagepresentation2 {
text-align: justify;
padding: 40px;
margin-top: -80px;
}
.imagepresentation4 {
text-align: justify;
padding: 40px;
margin-top: -90px;
}
.imagepresentation3 {
text-align: justify;
padding: 40px;
margin-top: -90px;
}
.imagepresentation5 {
text-align: justify;
padding: 40px;
margin-top: -90px;
}
.imagepresentation6 {
text-align: justify;
padding: 40px;
margin-top: -90px;
}
#prez {
display: block;
text-align: center;
font-weight: bold;
font-size: 15px;
letter-spacing: 1px;
border:1px solid #887963;
border-width: 1px 6px;
}
#prez1 {
display: block;
border:1px solid #887963;
border-width: 1px 0 1px 6px;
padding-left: 15px;
}
/* Présentation du Staff */
.prezstaff {
text-align: justify;
padding-left: 30px;
}
.prezimagine {
margin-left: -40px;
}
#prezstaff1 {
margin-top: -30px;
}
#prezstaff2 {
display: block;
width: 500px;
text-align: center;
font: 15px Caribbean;
letter-spacing: 1px;
border:1px solid #887963;
border-width: 1px 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 0 30px 0 50px;
}
/* Présentation du Staff 2 */
.borderfauve {
border-top: 6px solid #887963;
margin-left: 0 40px 0 -2px;
}
.fauve {
background-color: #715e45;
opacity: .5;
-moz-opacity: .5;
-khtml-opacity: .5;
-ms-filter: "alpha(opacity=50)";
filter: alpha(opacity=50);
border: 6px solid #887963; /*ainsi écrit veut dire pour les 4 côtés, idem pour les radius*/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.fauve:hover {
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
-ms-filter: "alpha(opacity=100)";
filter: alpha(opacity=100);
}
.fauve1 {
text-align: center;
border-bottom: 1px solid #6d583c;
margin-top: 40px;
}
.fauvenoir {
padding: 0 -10px;
}
#textfauve {
text-align: justify;
font-style: italic;
border-bottom: 1px solid #6d583c;
padding-left: 6px;
margin: -30px 40px 0 -10px;
}
#prezfauve {
display: block;
border-bottom: 1px solid #6d583c;
padding: left: 15px;
margin: -18px 40px 0 0;
}

/* Publicité */
#pubentete {
display: block;
width: 500px;
text-align: justify;
border-bottom: 1px solid #887963;
padding-left: 40px;
margin-top: -30px;
}
.pubpdc {
width: 620px;
padding-left: 30px;
}
.borderpub {
display: block;
border-left: 6px solid #887963;
padding-left: 6px;
margin-left: -10px;
}
.borderpub1 {
display: block;
border-left: 6px solid #887963;
padding-left: 6px;
margin-right: 50px;
}
#pubpdc {
margin-top: -30px;
padding-left: 40px;
}
#pubpdc2 {
text-align: justify;
font-style: italic;
border-right: 6px solid #887963;
border-left: 6px solid #887963;
padding: 0 10px 0 5px;
margin: -20px 50px 0 60px;
}

/* Intrigue */
.intrigue1 {
display: block;
background: URL(http://i60.servimg.com/u/f60/12/30/44/12/intrig10.jpg) no-repeat;
height: 400px;
border-right: 6px solid #887963;
border-left: 6px solid #887963;
padding: 0 10px 0 6px;
margin: 0 50px 0 -10px;
}

/* Mise en page des annonces */
#re {
background-color: #6f614d;
border: 6px solid #887963;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 2px;
}
#re1 {
display: block;
background-color: #3c2f30;
color: #b75a4d;
text-align: center;
font: small-caps 18px perpetua;
letter-spacing: 1px;
border-left: 9px solid #534041;
border-right: 9px solid #534041;
}
#p1 {
color: #c8b499;
text-align: justify;
font: 11px century gothic;
padding: 0 22px 0 6px;
margin: 0px;
}
#p2 {
color: #c8b499;
font: 16px Caribbean;
letter-spacing: 1px;
border-bottom: 3px solid #887963;
padding: 3px;
margin-top: -20px;
}
.p3 {
display:block;
text-indent: 20px;
text-align: justify;
font: 11px century gothic;
padding: 3px;
margin-top:-30px;
}
#re2 {
width: 86%;
color: #fff;
text-indent: 20px;
text-align: justify;
font: 11px century gothic;
padding: 3px;
margin: 0px;
}

/* Info bulle de personnage prétiré */
.infobulle {
position: relative;
}
.infobulle span {
display: none; /* ceci masque l'infobulle */
}
.infobulle:hover {
background: #5a564f; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
}
.infobulle:hover span {
display: inline; /* ceci affiche l'infobulle */
position: absolute;
top: 70px; /* on positionne notre infobulle */
left: 15px;
background: #070a12; /* arrière-plan de l'infobulle */
color: white; /* texte dans l'infobulle */
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é */
padding: 3px;
border: 1px solid black;
border-left: 1px solid black;
}

#wrap {
-webkit-border-radius: 20px; /*ici tu as mis que pour les navs webkit et opera*/
-moz-border-radius: 20px;
border-radius: 20px;
padding: 10px;
}

div, table {
border: none; /*valeur par défaut donc inutile de le spécifier mais pourquoi le radius alors*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

/*togglevisibility spoiler*/
/*outside spoiler*/
.outsidespoiler a {
text-align: left;
font: italic small-caps bold 16px arial; /* ordre a respecter pour les normes W3C avec le raccourci font > style > variant > weight > size/height > familly (on peut omettre toutes les propriétés sauf le size et le family dans l ordre */
}
.outsidespoiler a:hover {
color: #fff;
}
/*inside spoiler*/
.insidespoiler {
width: 540px;
height: 340px;
overflow-y: auto;
text-align: justify;
color: #910; /* ainsi raccourci la valeur hexadécimale est en réalité 991100 > on supprime la deuxième même valeur */
font: bold 13px arial;
border: 4px inset #fff; /* ceci suffit pour les 4 côtés et si on veut un bord en moins > voir la ligne du bas */
border-width: 0 2px 2px; /* top right bottom left> si on ne le spécifie pas cela veut dire que ce sera la même largeur que le right déjà mis, pareil pour le top et le bottom */
padding: 10px;
margin: 7px auto;
-moz-box-shadow: 2px 2px 5px #dad;
-webkit-box-shadow: 2px 2px 5px #dad;
-o-box-shadow: 2px 2px 5px #dad;
box-shadow: 2px 2px 5px #dad;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#dad', Direction=135, Strength=7);
cursor: pointer;
}
.insidetext {
opacity : 0.07;
-moz-opacity : 0.07;
-khtml-opacity: 0.07;
-ms-filter: "alpha(opacity=7)"; /* IE 8 */
filter : alpha(opacity=7); /* IE < 8 */
transition: opacity 7s linear 5s;
-moz-transition: opacity 7s linear 5s;
-o-transition: opacity 7s linear 5s;
-webkit-transition: opacity 7s linear 5s;
-htm-transition: opacity 7s linear 5s;
}
.insidetext:hover {
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
-ms-filter: "alpha(opacity=100)";
filter: alpha(opacity=100);
transition: opacity 1.7s ease-in;
-moz-transition: opacity 1.7s ease-in;
-o-transition: opacity 1.7s ease-in;
-webkit-transition: opacity 1.7s ease-in;
-htm-transition: opacity 1.7s ease-in;
}
/*- end togglevisibility spoiler -*/

Ensuite, pour les images, elles sont toutes dans un spoiler.

Et merci d'avance pour la recherche du problème.

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Ven 6 Jan 2012 - 17:43

Ce n'est peut être pas le meilleur des codes, mais j'ai trouvé quelque chose qui passe très bien pour résoudre l'espace entre le haut du forum et la bannière.

Code:
#banpdc
{
margin-top: -8px;
}


J'imagine qu'il y a mieux, mais cela fonctionne a merveille.

Bien a toi, Ventus

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Sam 7 Jan 2012 - 12:32

C'est tout bon, je viens de finaliser les derniers bug et tout fonctionne a merveille.

Merci vraiment infiniment pour tout ton aide.

Très amicalement, Ventus ok

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Page 2 sur 2 Précédent  1, 2

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum