CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| OceanSoul
{ Membre }
Messages : 137
| Bonzour bonzour J'ai un petit soucis, j'aimerais arriver à faire un effet semblable à celui-ci (The Rules, The Daily News...) sur les liens de mon forum, mais je ne sais pas trop comment m'y prendre Oo Je me suis déjà servie du code qui permet d'appliquer l'effet de fondu sur les images, mais j'avoue ne pas trop savoir comment faire pour arriver à le mettre sur des liens. Merci d'avance pour votre aide | | |
| | | Imari
{ Membre hyper-actif }
Messages : 1538
| | | | Episkey
{ Membre }
Messages : 32
| Coucou, Il ne s'agit pas d'une image Imari. Sinon, OceanSoul, il s'agit en fait de javascript, et bon, à mon avis, les admins ne doivent pas vouloir qu'on utilise leur script. T'y connais-tu un peu en javascript ? =/
Edit : Rectification, il s'agit d'un script libre de droit - http://www.dynamicdrive.com/dynamicindex11/gradualfader.htm La démarche est expliquée pour un site dans ce tuto par contre, donc il faut l'adapter pour un forum, en passant par les templates. => Irrelevant |
Dernière édition par Episkey le Mar 06 Avr 2010, 12:29, édité 3 fois | |
| | | Imari
{ Membre hyper-actif }
Messages : 1538
| Si tu regardes vers la fin du topic, la solution y est donnée page 7 il me semble ^^ | | |
| | | Episkey
{ Membre }
Messages : 32
| Ah oui, désolée Imari, je n'ai pas eu le réflexe de regarder dans toutes les pages. Ca pourrait peut-être être bien de l'ajouter dans le titre ou quelque part dans le premier message, histoire de faciliter en cas de recherche ? =$ | | |
| | | OceanSoul
{ Membre }
Messages : 137
| NIah quel morue Oo je suis vraiment désolée d'avoir fait cette demande alors que la solution était déjà donné J'ai vu le topic en plus, mais que je pensais qu'il ne s'agissait que d'une explication concernant les images Vraiment désolée | | |
| | | Boow
{ Membre actif }
Messages : 866
| La demande est-elle terminée ? | | |
| | | OceanSoul
{ Membre }
Messages : 137
| Ben en fait non Oo Parce que j'ai regardé le topic, et je n'ai pas vraiment trouvé la réponse à ma question. J'ai essayé de bidouiller en me servant du tuto pour faire de jolis titres et les codes donnés, mais ça ne fait rien Oo Si quelqu'un sait comment faire, parce que là franchement je vois vraiment pas comment m'y prendre | | |
| | | Episkey
{ Membre }
Messages : 32
| Re, Après relecture attentive, effectivement, il ne s'agit quand même que d'images xD Mais bon, c'est facilement applicable à d'autres choses. En fait, il faut se servir du tuto page 7 : - Howard Wolowitz a écrit:
Salut ! On peut aussi embellir cet effet avec du jQuery. Il faut commencer par mettre sur chaque images où on veut qu'apparaisse cet effet une classe particulière; je vais l'appeler ici opacity. Ensuite il faut entrer ce code dans overall_header_new : - Code:
-
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.opacity').each(function() { jQuery(this).fadeTo(0,0.5); jQuery(this).mouseenter(function(){jQuery(this).stop();jQuery(this).fadeTo('normal',1);}); jQuery(this).mouseleave(function(){jQuery(this).stop();jQuery(this).fadeTo('normal',0.5);}); }); }); </script>
Ici, comme vous pouvez le voir, j'ai choisis de faire passer l'opacité de 0.5 à 1 mais vous pouvez évidemment changer ce paramètre en remplaçant “jQuery(this).fadeTo(0,0.5);” par “jQuery(this).fadeTo(0,X);” où X est l'opacité avant de passer le curseur et “{jQuery(this).stop();jQuery(this).fadeTo('normal',0.5);});” par “{jQuery(this).stop();jQuery(this).fadeTo('normal',X);});” où X est l'opacité lorsqu'on enlève le curseur de l'élément (il est conseillé de mettre la même opacité qu'avant de passer le curseur dessus. Pour finir, si vous ne souhaitez pas appeler votre classe “opacity”, il vous suffit de remplacer “jQuery('.opacity').each(function() {” par “jQuery('.X').each(function() {” où X est le nom de votre classe. Attention, pensez à ne pas enlever le point juste avant le nom de la classe ! Voilà, si vous avez un problème n'hésitez pas ! ▌H. Wolowitz▐ Il suffit d'appliquer la classe opacity à d'autres éléments que des images (dans ton cas les divs contenant les titres des catégories) | | |
| | | OceanSoul
{ Membre }
Messages : 137
| Bon ben j'ai tenté de suivre les indications de ce que tu m'as donné, et de mettre la classe là où se trouvait mes titres, le soucis c'est que rien ne se passe. Les effets que j'avais mis sur mes titres, n'apparaissent pas, de même pour le fondu Oo Je me sens un peu bête sur ce coup là | | |
| | | Imari
{ Membre hyper-actif }
Messages : 1538
| Bonjour ^^
Peux-tu me montrer tes templates Overall-Header-New et Overall-Footer, ainsi que ton CSS s'il te plaît ? | | |
| | | iowan
{ Membre actif }
Messages : 304
| hmm ce script en haut est mal ecrit en plus il ya le boucle foreach =X pour économiser quelques millisecondes voici une version clean de ce script tu peut le mettre n'importe ou dans le PA par exemple mais il est recommandé de le mettre avant - Code:
-
</head> dans le template overall_header_new - Code:
-
<script type="text/javascript"> (function($) { $obj = $('.opacity');
$obj.css({opacity: .5}).hover(function() { $(this).stop().animate({ "opacity" : 1 }); }, function() { $(this).stop().animate({ "opacity" : .5 }); });
})(jQuery); </script>
la structure du lien est la suivant - Code:
-
<a class="opacity" href="#">mon lien</a> pour un text - Code:
-
<div class="opacity">mon text</div> | | |
| | | OceanSoul
{ Membre }
Messages : 137
| Merci pour ton aide Iowan, mais même avec ce que tu m'as donné, ça ne fonctionne pas Oo Voici mes templates: Overall-Footer: - Spoiler:
- Code:
-
<!-- BEGIN html_validation --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <table> <tr> <td> <div> <div> <table> <tbody> <tr> <td> <!-- END html_validation --> <td valign="top" width="{C3SIZE}"> <div id="{ID_RIGHT}"> <!-- BEGIN giefmod_index2 --> {giefmod_index2.MODVAR} <!-- BEGIN saut --> <div style="height: {SPACE_ROW}px"></div> <!-- END saut --> <!-- END giefmod_index2 --> </div> </td> </tr> </tbody> </table> </div> </div> <!-- close div id="page-body" --> <div id="page-footer"> <div align="center"> <div class="gen"> <strong>{ADMIN_LINK}</strong>{U_VERSION_RTL}{U_CREATE_A_FORUM}{U_VERSION} {U_SUPPORT} <!-- BEGIN switch_view_stats --> | <a name="bottom" href="/{switch_view_stats.S_STATS}" class="copyright" rel="nofollow">{switch_view_stats.L_STATS}</a> <!-- END switch_view_stats --> <!-- BEGIN switch_view_donation --> | <a name="bottom" href="/{switch_view_donation.U_DONATION}" class="copyright" rel="nofollow">{switch_view_donation.L_MAKE_DONATION}</a> <!-- END switch_view_donation --> <!-- BEGIN switch_view_contact --> | <a name="bottom" href="/{switch_view_contact.U_CONTACT}" class="copyright" rel="nofollow">{switch_view_contact.L_CONTACT}</a> <!-- END switch_view_contact --> {U_ABUSE} {U_BLOG} </div> </div> </div> {PROTECT_FOOTER} </td> </tr> </table> <script type="text/javascript"> //<![CDATA[ fa_endpage(); //]]> </script> <!-- BEGIN google_analytics_code --> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try{ var pageTracker = _gat._getTracker("{G_ANALYTICS_ID}"); pageTracker._trackPageview(); } catch(err) { } </script> <!-- END google_analytics_code --> <script type="text/javascript"> gradualFader.init() //activate gradual fader </script> </body> </html>
Overall-Header-New: - Spoiler:
- 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> <!-- 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" /> {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="{JS_DIR}{L_LANG}.js" type="text/javascript"></script> <!-- BEGIN switch_ticker --> <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script> <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" /> <!-- END switch_ticker --> <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 --> var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = false, logInBackgroundClass = false; <!-- END switch_login_popup --> //]]> </script> {GREETING_POPUP} <!-- BEGIN hitskin_preview --> <style type="text/css"> #hitskin_preview { margin: 0; padding: 0; position: fixed; top: 0; left: 0; width: 100%; height: 65px; background: url('http://2img.net/i/fa/hitskin/hitskin_bar.png') repeat-x left -15px; color: #fff; } * html #hitskin_preview { /* Fix for IE6 since it doesn't implement fixed positionning */ position: absolute; top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop); z-index: 2; background: transparent url('http://2img.net/i/fa/hitskin/hitskin_bar-ie6.gif') repeat-x left -15px; } * html { /* Gunlaug's Speed fix for the above positionning fix. Sorry for the fix for the fix */ background: #fff url(foo) fixed; } #hitskin_preview h1 { float: left; margin: 3px 0 0 0; padding: 0 0 0 10px; font: italic normal 25px Arial,sans serif; color: #fff; } #hitskin_preview h1 img { vertical-align: middle; } #hitskin_preview em { color: #7CBA2C; font-weight: bold; } #hitskin_preview a { color: #fff; } #hitskin_preview a:hover { text-decoration: underline; }
#hitskin_preview .content { text-align: right; } #hitskin_preview .content p { margin: 4px 1em 0px 1em; font-size: 13px; line-height: 1.8em; color: #fff; font-weight: bold; } #hitskin_preview .content p span { font-weight: normal; font-size: 0.8em; } body { margin-top: 40px !important; } {hitskin_preview.HITSKIN_RTL_CSS} </style> <!-- END hitskin_preview --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://sd-2.archive-host.com/membres/up/157799094412634124/haccordion.js"></script> <script type="text/javascript"> (function($) { $obj = $('.opacity');
$obj.css({opacity: .5}).hover(function() { $(this).stop().animate({ "opacity" : 1 }); }, function() { $(this).stop().animate({ "opacity" : .5 }); });
})(jQuery); </script> </head> <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://2img.net/i/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> <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 -->
<!-- BEGIN switch_logo_center --> <td align="center" width="100%" valign="middle"> <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a><br /> <div class="maintitle">{MAIN_SITENAME}</div> <br /> <span class="gen">{SITE_DEscriptION}</span> </td> <!-- END switch_logo_center -->
<!-- BEGIN switch_logo_right --> <td align="center" width="100%" valign="middle"> <div class="maintitle">{MAIN_SITENAME}</div> <br /> <span class="gen">{SITE_DEscriptION}<br /> </span> </td> <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> <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td> </tr> </table>
<div style="clear: both;"></div>
<!-- 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 -->
Et mon CSS: - Spoiler:
- Code:
-
a.forumlink{ background-color: #161D23; border-bottom: 2px solid; padding-bottom:2px; padding-left: 50px; padding-right: 50px; border-bottom-color: #404853; text-shadow: #000000 3px 3px 3px; font-size: 11px; font-family: Times New Roman; font-variant: small-caps; text-align: center; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; }
a.forumlink{display:block;}
a.forumlink:hover{ text-shadow: #000000 3px 3px 3px; font-size: 11px; font-variant: small-caps; font-family: Times New Roman; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; }
.statistiques{ padding-left:5px; font-size: 10px; background-color: #000000; text-shadow: #31373E 2px 2px 2px; -moz-border-radius: 20px 20px 20px 20px ; border-bottom: 7px #202B37 solid; border-top: 5px #202B37 dotted; border-right: 2px #202B37 solid; border-left: 2px #202B37 solid; text-align: justify; font-weight: lighter; height:300px;}
.groupes{ font-size: 10px; text-shadow: #31373E 2px 2px 2px; }
.code{-moz-border-radius:5px;}
.quote{-moz-border-radius:5px;}
{ border-bottom: 3px solid;border-color:#000000;text-decoration: none; -moz-border-radius:6px;}
.forumlink{ font-size: 10px; text-shadow: #000000 2px 2px 2px; }
a.forumlink:hover{ font-size: 10px; text-shadow: #000000 2px 2px 2px; }
a.cattitle:hover{ text-decoration: none; }
a.forumlink { font-size: 10px; text-decoration: none; text-shadow: #000000 2px 2px 2px; }
a.forumlink:hover{ font-size: 10px; text-shadow: #000000 2px 2px 2px; text-decoration: none; }
u{border-bottom: 3px solid;border-color:#B0ADA0;text-decoration: none; -moz-border-radius:6px;}
input,textarea, select { -moz-border-radius: 14px 14px 14px 14px ; border-bottom: 3px #000000 solid; border-top: 1px #000000 solid; border-right: 1px #000000 solid; border-left: 1px #000000 solid;}
tr.post span.gensmall { display: none; }
/* pas de soulignement de liens */ a:link {text-decoration: none;} a:visited {text-decoration: none;} a:hover {text-decoration: none !important;}
#page-body { padding-top: 10px; /* Espace entre la barre et les pubs */} #profile-advanced-details { padding-top: 20px;}
.forumline{ background-color: #171D22; -moz-border-radius: 4px 4px 20px 20px ; border-bottom: 6px #443428 solid; border-top: 2px #443428 solid; border-right: 2px #443428 solid; border-left: 2px #443428 solid;}
/*personalisation des cadres forum*/ td.row1 { -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; } td.row2 { -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; } td.row3 { -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:15px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; } td.row3Right { -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; }
.barre_navigation { background-color: #202B37; font-size: 9px; text-align: center; color: #1f2f3c !important; text-shadow: #000000 2px 2px 2px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; height:5px; padding-bottom:3px; padding-top:-3px; }
/* opacité des images */ img {opacity:0.5; filter:alpha(opacity=55); -moz-opacity:0.5; -khtml-opacity:0.5;}
img:hover {opacity:1; filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1;}
.profilentour { padding:5px; background-color:#171D22; -moz-border-radius:8px; }
.postdetails.poster-profile a img { -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border: 4px solid #424b4f ; }
/* Profil Masqué */ .profilmasque /*c'est juste le css du bouton*/ { background-color:#15222b; border: 1px dashed grey; /* en pointillée et en gris*/ font-size: 11px; /*taille de la police*/ text-shadow: #000000 3px 3px 3px; }
.profil1/*c'est le css de l'ensemble bouton+profil*/ { width: 100px; background-color: #15222b; text-align: center; font-weight: lighter; font-size: 11px; text-shadow: #000000 2px 2px 2px; }
.name { text-align: center; font-variant: small-caps; text-shadow: #31373E 5px 3px 3px; font-size: 12px; font-weight: lighter; font-family: Times New Roman; text-transform: lowercase ; letter-spacing: 1px; }
.haccordion{ padding-left: 37px; padding-bottom: 47px; width: 666px; }
.haccordion ul{ margin:10; padding-left: 37px; padding-bottom: 47px; list-style: none; overflow: hidden; /*leave as is*/ }
.haccordion li{ margin: 10; padding: 0; padding-bottom: 47px; display: block; /*leave as is*/ width:90%; /*For users with JS disabled: Width of each content*/ height: 50px; /*For users with JS disabled: Height of each content*/ overflow: hidden; /*leave as is*/ float: left; /*leave as is*/ }
/*CSS for example Accordion #hc1*/
#hc1 li{ margin:0 0px 0 0; /*Spacing between each LI container*/ padding-bottom: 47px; width: 666px; }
#hc1 li .hpanel{ padding: 00px; /*Padding inside each content*/ padding-bottom: 47px; background: transparent; }
.haccordion li .hpanel{ width: 90%; /*For users with JS disabled: Width of each content*/ height: 50px; /*For users with JS disabled: Height of each content*/ }
/*titre d'en tête*/
.secondarytitle,.secondarytitle h2 { text-align: center; text-shadow:2px 2px 2px #31373E; text-transform: lowercase; }
a.imginfo { position: relative; color: #3A4147; text-decoration: none; text-shadow: #000000 2px 2px 2px; border-bottom: VALEURpx #COUELUR solid; /* on souligne le texte */ }
a.imginfo span { display: none; /* on masque l'infobulle */ }
a.imginfo:hover { background: none; /* correction d'un bug IE */ z-index: 999; /* on définit une valeur pour l'ordre d'affichage */ cursor: help; /* on change le curseur par défaut en curseur d'aide */ }
a.imginfo:hover span { display: inline; /* on 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: 8px; /* on positionne notre infobulle */ left: 0px; background: #171D22; color: #3A4147; padding: VALEURpx; border-bottom: 2px #202B37 solid; border-top: 1px #202B37 solid; border-right: 1px #202B37 solid; border-left: 1px #202B37 solid; -moz-border-radius: 1px 10px 10px 10px ; }
.tstaff{ font-size:1em; }
.thumbnail{ position: relative; z-index: 0; background-color: 4C4C4D; border:1px groove; border-color: #202B37;; text-shadow: #000000 2px 2px 2px; padding: 2px; -moz-border-radius: 4px 4px 4px 4px ; }
.thumbnail:hover{ background-color: #9e9e9e; z-index: 50; }
.thumbnail span{ position: absolute; background-image:url("http://img7.hostingpics.net/pics/619665Sans_titre_4.jpg"); border: 3px groove #000000; padding: 3px; left: 0px; -moz-border-radius: 4px 4px 4px 4px ; visibility: hidden; color: #332F2f; text-decoration: none; text-shadow: #000000 2px 2px 2px; }
.thumbnail span img{ border: 2px double; border-color:#202B37; -moz-border-radius: 4px 4px 4px 4px ; padding: 2px; }
.thumbnail:hover span{ visibility: visible; top: 65px; left: 35px; /*position where enlarged image should offset horizontally */ width: 130px }
a.mainmenu{ text-decoration: none; color : #333333; font-size: 14px; font-weight: lighter; font-family: Times New Roman; font-variant: small-caps; background-color: #121212; margin-left: -10px; padding-right: 10px; padding-bottom: 2px; text-transform: lowercase; text-shadow: #000000 5px 2px 3px; script: gradualfader; } a.mainmenu:hover{ text-decoration: none; font-size: 14px; font-weight: lighter; font-family: Times New Roman; font-variant: small-caps; color : #CCCCCC; background-color: #121212; margin-left: -10px; padding-right: 10px; padding-bottom: 2px; text-transform: lowercase; text-shadow: #000000 5px 3px 3px; }
Voilà Merci pour votre aide, vraiment <3 | | |
| | | OceanSoul
{ Membre }
Messages : 137
| Personne ne sait comment faire? | | |
| | | Episkey
{ Membre }
Messages : 32
| Bonjour, Je viens de retester sur un forum, et les codes donnés marchent. Es-tu sûr que tu as bien attribué la classe opacity aux titres de tes différents sous-forums ? | | |
| | | OceanSoul
{ Membre }
Messages : 137
| J'ai réussit à trouver finalement. J'avais mis une classe 'gradualfader' et non 'opacity' à mes sous forums... Vive la gourde --_--' | | |
| | | Boow
{ Membre actif }
Messages : 866
| | | | Imari
{ Membre hyper-actif }
Messages : 1538
| | | | Contenu sponsorisé
| | | | |
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|