Problème hover avec un sprite de 2 images

2 participants

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

Résolu Problème hover avec un sprite de 2 images

Message par Ancients Jeu 17 Mar 2016 - 18:34

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://nsp-d3.forumofficiel.com/

Description du problème

Bonjour,

Ce problème concerne les images du centre.

Un problème m'est apparu alors qu'à l'origine il n'y était pas.

Le hover de l'image du milieu se décale de 1 ou 2 pixel vers la gauche au passage de la souris.

J'ai ce problème la sur Chrome et Safari

Voici le sprite :

Problème hover avec un sprite de 2 images Sehy

Voici les deux images d'origines :

Sans Hover
Problème hover avec un sprite de 2 images H210

Hover
Problème hover avec un sprite de 2 images H2_on10

Voici ma CSS :

Code:
.postbody .content {
    margin-left: 10%!important;
    margin-right: 10%!important;
}

#cp-main .panel {
    background-color: transparent;
}

.content {
    line-height: 1.7em;
}

.postprofile .label,
.postprofile .label img[alt="Battle Tag"]{
  display: inline-block;
  vertical-align: middle;
}

ul.navlinks{border:none;}

#page-header{margin-top:300px;}

#search-box {
    margin-top: 0px!important;
}

.inputbox {
    color:#00B4FF;
}

.inputbox:hover {
    border: 1px solid #00B4FF;
}

input.search {
    background: #ffffff!important;
    padding: 5px 6px;
    border: none;
    font: 12px Arial, sans-serif;
    border-radius: 5px;
    box-shadow: 0 0 5px #000;
}

form[action="/privmsg"] dl:nth-last-of-type(2) label:nth-last-of-type(1):not(:first-child) {
  display: none !important;
}

.signature_div img{
    max-width: 500px !important;
    max-height: 200px !important;
}

/*Couleur pour les Admins*/
#M14_Color_Admin.inner .postbody .content
{
color:#00B4FF !important;
}

/*Couleur pour les Modos*/
#M14_Color_Modo.inner .postbody .content
{
color:red !important;
}

.headerbar, #logo {
    padding: 0;
}

    /*Le bouton twitch*/
#M14_btn_slide:before
{
  content:"";
  position:absolute;
  background:url(http://i84.servimg.com/u/f84/19/42/85/35/14573010.png)no-repeat;
  width:64px;
  height:64px;
  margin-left:200px;
}
 
 
 
#frametwitch {width: 100%; height: 100%; border: 1px solid black; position:relative; }
 
    /*Le bloc du slide*/
 
    #M14_btn_slide
    {
    position:fixed;/*on fixe le slide*/
    top:60px;/* on le positionne a 60px du haut du fofo*/
    width:200px;/*on lui donne une largeur en relation avec l image*/
    height:64px;/*on donne une hauteur toujours en relation avec la hauteur de l image*/
    left:-205px;/*on cache le bloc*/
    background:#;/*couleur de fond*/
    text-align:center;/*on centre le lien*/
      /*La transition*/
    -webkit-transition: left 0.5s ease-in-out;
    -moz-transition: left 0.5s ease-in-out;
    -o-transition: left 0.5s ease-in-out;
    transition: left 0.5s ease-in-out;
    }
    /*Le slide effectue par le script*/
    #M14_btn_slide.margin{left:0px;}
 
 
 .lien-sous-forum{
    display: inline-block;
    width: 252px;
    word-wrap: break-word;
}
 
 .table-index1 > div{
    display: inline-block;
    width: 252px;
    word-wrap: break-word;
    color: #000000
}

/*---  Index HOME Image 1 ---*/
.table-index1 {
    background: url(http://i65.tinypic.com/1zluhlj.png) no-repeat center -7px;
    height: 185px;
    width: 307px;
}
 
.table-index1:hover {
    background-position: center -201px;
}
 

/*---  Index HOME Image 2 ---*/
.table-index2 {
    background: url(http://i67.tinypic.com/sehy.jpg) no-repeat center -7px;
    height: 185px;
    width: 307px;
}
 
.table-index2:hover {
    background-position: center -201px;
}

/*---  Index HOME Image 3 ---*/
.table-index3 {
    background: url(http://i67.tinypic.com/257odxy.png) no-repeat center -7px;
    height: 185px;
    width: 307px;
}
 
.table-index3:hover {
    background-position: center -199px;
}


.qeel {
    background-image:url("http://i84.servimg.com/u/f84/19/42/85/35/fond_a14.png");
}


h2.topic-title img {
    display: none;
}

div#main-content{
    background-image:url(http://oi63.tinypic.com/1zldtgl.jpg);
    background-repeat:repeat;
    padding:5px;
    border:2px solid #000;
    border-radius: 10px
}

#video-background {
    position: fixed;
    top: 50%;
    left: 50%;

    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background: url('http://eu.battle.net/d3/static/images/reaper-of-souls/bg/malthael.jpg') repeat-x;
    background-size: cover;
    transition: 1s opacity;
}


.img-whois {
    display: none;
}

.avatar-mini strong {
}

.footer-home {
    position: absolute;
    left: -500px;
    top: -500px;
    max-width: 1px;
    max-height: 1px;
}

#page-footer ul.linklist li.rightside {
    float: none;
}

#page-footer .inner {
    text-align: center;
}

.online {
    background-position: ;
}

.postprofile {
    background: url('');
    background-repeat: no-repeat;
    border-color: #322e2e;
    padding-top: 5px;
    padding-left: 8px;
    font-family: "Arial", sans serif!important;
    font-size: 11px!important;
    text-align: center;
}

/* On redonne leur taille de base aux images */
form[action="/privmsg?folder=inbox"] .postprofile img {
    width: inherit;
    height: inherit;
}
 
/* Mais on fait en sorte que l'avatar fasse 64px*64px */
 
form[action="/privmsg?folder=inbox"] .postprofile > dt > img:first-child,
.postprofile dt img {
    background-color: #000;
    background-position: 1px 1px;
    background-repeat: no-repeat;
    border: 1px solid #483A30;
    border-bottom-color: #3D2F26;
    border-radius: 3px;
    border-top-color: #887465;
    height: 64px;
    overflow: hidden;
    padding: 1px;
    width: 64px;
}

#wrap, td.avatar-mini img, .headerbar {
    background-color: transparent;
}

.post {
    background-color: #12110f;
    opacity: 0.9!important;
    border:2px solid #000;
    background: url('http://eu.battle.net/d3/static/images/layout/cms/post_bg.jpg');
    background-size: cover;
}

.portal {
    opacity: 0.9;

}

a.forumtitle {
    font-size: 12;
}

@font-face {
    font-family: NSPFONT;
    src: url(http://us.battle.net/d3/static/fonts/exocet/exocet-blizzard-light.woff);
}

@font-face {
    font-family: NSPFONT_med;
    src: url(http://us.battle.net/d3/static/fonts/exocet/exocet-blizzard-medium.woff);
}

.inner h2 {
    color: #f3e6d0;
    font: normal 18px/100% "NSPFONT","Palatino Linotype", "Arial", serif;
    letter-spacing: -1.5px;
    text-shadow: 0 0 5px #241209;
}
 
h1.page-title {
    font-size: 12;
}

/*suppression boutons code, date, heure et mode*/
a.sceditor-button-code, a.sceditor-button-date, a.sceditor-button-time, a.sceditor-button-source {
    display: none;
}

#textarea_content {
    min-width: 702px;
}

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

select {
    color: #999999;
}


/*--- Bloc réponse rapide ---*/
 
.sceditor-container.ltr.sourceMode {
    width:100% !important;
    max-height: 450px!important;
    background-color: #12110f !important;
    border-color: #131210!important;
}
.sceditor-container.ltr.wysiwygMode {
    width:100% !important;
    max-height: 450px!important;
    background-color: #12110f !important;
    border-color: #131210!important;
}

/*---  Citation ---*/

blockquote {
    background-color: #1b1915!important;
    border-color: #999999!important;
    border-width: 1px!important;
    border-style: double;
}

/*---  Partie texte area : fond ---*/
 
.sceditor-container iframe, .sceditor-container textarea {
    line-height: 16px;
    width: 100% !important;
    color: #00B4FF !important;
    font-size:12px !important;
}



/*---  Groupe de boutons ---*/
 
div.sceditor-group {
    background-color: # !important;
}

/*---  Boutons ---*/
 
a.sceditor-button {
    background: url('');
    border-color: #!important;
}


/*---  Boutons sélectionnés ---*/
 
a.sceditor-button.hover {
    background-color: # !important;
}

Changer la largeur de l'éditeur
/* largeur de l'éditeur */
.sceditor-container {
    width: 710px!important;
}

/* fond de groupe de bouton */
body div.sceditor-group {
    background: #white;
}

/* fond d'un bouton survolé ou activé */
 
.sceditor-button.hover, a.sceditor-button:hover {
    background: #00B4FF;
}

/*---  Partie supérieur contenant les outils ---*/
 
div.sceditor-toolbar {
    background-color: #131210 !important;
    border-color: #00B4FF!important;
    border-width: 2px!important;
}

.sceditor-group
{
    background: #333333 !important;
    border: 1px outset #000000 !important;
    border-radius: 5px !important;
}

a.sceditor-button
{
    background: #777777 !important;
    border-radius: 30px !important;
}
a.sceditor-button:hover
{
    background: #AD835A !important;
}

a.sceditor-button.active
{
    background: #c2c2c2 !important;
}

fieldset dl:hover dt label {
    color: #FAF8F7;
}

a.button1, a.button2, button.button2, input.button1, input.button2 {
background-image: url('http://image.noelshack.com/fichiers/2016/09/1456834048-envoyer.png');
height:31px;
width:auto!important;
color:#000!important;
border:none;
font-size:10px;
}

ul.profile-icons {
    list-style: none;
    margin-top: 10px;
    margin-right: 0px!important;
}

/*---  Couleur barre profil signature ---*/
#cp-main .panel.sig {
    background-color: #12110f;
}

#tabs .activetab a span {
    color: #00B4FF;
}

a.mentiontag.tooltipstered {
    color: #00B4FF;
}

.signature_div {
    color: #00B4FF!important;
    font-family: "Arial", sans serif!important;
    font-size: 12px!important;
    text-align: center!important;
}

dd.dterm {
    background-position: 85%!important;
}

.pagination span a:active, .pagination span a:link, .pagination span a:visited {
    background-color: #12110e;
    border: 1px solid #000000;
    color: #AD835A!important;
    display: inline-block;
    font-size: 9px;

    text-decoration: none;
}

.pagination span strong {
    background-color: #12110e;
    border: 1px solid #000000;
    color: #999999;
    font-size: .9em;
 
    text-decoration: none;
}


/*Suppression de la couleur de fond des Notifications*/
#fa_notifications
{

background-color:#000000 !important;
color:#fff !important;
}

/*La partie notification*/
#notif_list
{
position:fixed !important;
bottom:0% !important ;
right:0px !important;
}

/*Le bouton de fermeture partie Notifications*/
#M14_close_see_all
{
text-decoration:none !important;
text-align:left !important;
color:red !important;
cursor:pointer !important;
position: absolute !important;
left: 10px !important;
width:10px !important;
height:10px !important;
}

/*** --- BDN --- ***/
 
/* L'image de fond */
#BDN {
background: url(http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png) no-repeat 0 0;
height: 111px;
position: fixed;
top: 0;
width: 60%;
}
 
/* La liste de lien */
#BDN.linklist.navlinks li{
  display: inline-block;
  height: 35px;
  margin-top: 19px; /* pour placer comme il faut la liste par rapport à l'image de fond */
  font: normal 13px/35px "NSPFONT_med","Palatino Linotype", "Arial", serif;
  letter-spacing: 2px;
}

Voici mon template index_body :

Code:
{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in --><p class="right rightside">{LAST_VISIT_DATE}</p><!-- END switch_user_logged_in -->
<p>{CURRENT_TIME}</p>
<br class="clear" />

<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
   <div class="inner"><span class="corners-top"><span></span></span>
      <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
         <div class="user_login_form center">
            <label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label>&nbsp;
            <label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label>&nbsp;
            <label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>&nbsp;
            {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
            <!-- BEGIN switch_fb_connect -->
            <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
            <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
            <!-- END switch_fb_connect -->
         </div>
      </form>
   <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END switch_user_login_form_header -->

<!-- BEGIN message_admin_index -->
   <div class="panel introduction">
      <div class="inner"><span class="corners-top"><span></span></span>
   <!-- BEGIN message_admin_titre -->
      <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
   <!-- END message_admin_titre -->

   <!-- BEGIN message_admin_txt -->
      <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
   <!-- END message_admin_txt -->
      <span class="corners-bottom"><span></span></span></div>
   </div>
<!-- END message_admin_index -->
<table align="center" style="width: 100%" border="0" rules="rows">
                                               
<tbody>
<tr>
                                                 
<td class="table-index1" align="center">
    <div>
      Titre du Sous-forum N°1xxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
      blabalbalblvdflibjdblhqdmofbhqdmofbhqmdofbhqdmofihbmoqdifhb<br />
      dbhqdibjqdmgbjqemibhqdglibqe=lbhqdl=bgqd=lgbndql=gbndljgn<br />
    </div>                         
</td>
 
 <td style="width: 10px;">
                                                 
</td>
 
<td class="table-index2" align="center">
                          <a href="Lien vers le sous-forum N°2"><strong>Titre du Sous-forum N°2</strong></a><br />                       
<ul>
                                               
<li>
                        <a href="Lien vers sujet N°4">Titre du Sujet N°4</a>                       
</li>
                                               
<li>
                          <a href="Lien vers sujet N°5">Titre du Sujet N°5</a>                       
</li>
                                               
</ul>
                                               
</td>
<td style="width: 10px;">
                                                 
</td>
 
<td class="table-index3" align="center">
                          <a href="Lien vers le sous-forum N°2"><strong>Titre du Sous-forum N°3</strong></a><br />                       
<ul>
                                               
<li>
                        <a href="Lien vers sujet N°6">Titre du Sujet N°4</a>                       
</li>
                                               
<li>
                          <a href="Lien vers sujet N°7">Titre du Sujet N°5</a>                       
</li>
                                               
</ul>
                                               
</td>
<td style="width: 10px;">
                                                 
</td>
                                         
</tr>
                                       
</tbody>
</table>
{CHATBOX_TOP}
{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->

   <!-- BEGIN switch_viewonline_link -->
   <div class="h3"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></div>
   <!-- END switch_viewonline_link -->

   <!-- BEGIN switch_viewonline_nolink -->
   <div class="h3">{L_WHO_IS_ONLINE}</div>
   <!-- END switch_viewonline_nolink -->

<img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" />
<p>{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}

<br />
{LOGGED_IN_USER_LIST}

{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

<br />
<em>{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</em>

</p>
<div class="clear"></div>

   <!-- BEGIN switch_statistics_link -->
   <div class="h3"><a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a></div>
   <!-- END switch_statistics_link -->

   <!-- BEGIN switch_statistics_nolink -->
   <div class="h3">{L_STATISTICS}</div>
   <!-- END switch_statistics_nolink -->

<p class="page-bottom">
{TOTAL_POSTS}
</p>
<p class="page-bottom">
{TOTAL_USERS}
</p>
<p class="page-bottom">
{NEWEST_USER}
</p>
   <!-- BEGIN switch_chatbox_activate -->
   <div class="h3"><a href="{S_JOIN_CHAT}" target="ChatBox">{CHATBOX_NAME}</a></div>
   <div class="page-bottom">
   {TOTAL_CHATTERS_ONLINE}&nbsp;:&nbsp;
   {CHATTERS_LIST}<br />
   </div>
      <!-- BEGIN switch_chatbox_popup -->
      <div id="chatbox_popup"></div>
      <script type="text/javascript">
      insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
      </script>
      <!-- END switch_chatbox_popup -->
   <!-- END switch_chatbox_activate -->
<!-- END disable_viewonline -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
   <div class="inner"><span class="corners-top"><span></span></span>
      <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
         <div class="user_login_form center">
            <label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label>&nbsp;
            <label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label>&nbsp;
            <label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>&nbsp;
            {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
            <!-- BEGIN switch_fb_connect -->
            <span class="fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
            <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
            <!-- END switch_fb_connect -->
         </div>
      </form>
   <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END switch_user_login_form_footer -->

<br style="clear:both" />

<!-- BEGIN switch_legend -->
<ul id="picture_legend">
   <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />{L_NEW_POSTS}</li>
   <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />{L_NO_NEW_POSTS}</li>
   <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />{L_FORUM_LOCKED}</li>
</ul>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script>
    FB.init({
      appId      : {switch_fb_index_login.FACEBOOK_APP_ID},
      cookie    : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_fb_index_login -->

Merci d'avance,
Bien à vous


Dernière édition par Ancients le Mer 23 Mar 2016 - 10:19, édité 1 fois
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème hover avec un sprite de 2 images

Message par Miettes Ven 18 Mar 2016 - 14:51

Coucou Smile

Quand tu fais un sprite, il faut que les images "normal" et "survol" fassent la même taille pour que l'effet soit impeccable. Ici, il y a une différence d'1px en largeur et hauteur entre les 2 images.

Conclusion : refais un sprite "tout propre" avant de creuser plus loin Smile
Miettes

Miettes
*****

Féminin
Messages : 590
Inscrit(e) le : 01/09/2008

http://tambouille-raleuses.forumactif.com/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème hover avec un sprite de 2 images

Message par Ancients Ven 18 Mar 2016 - 17:34

Bonjour,

J'ai refait mes images qui font la même taille et mon sprite :

Image de base
Problème hover avec un sprite de 2 images H211

Hover
Problème hover avec un sprite de 2 images H2_on11

Sprite
Problème hover avec un sprite de 2 images Sprite10

Et pourtant j'ai un décalage de 1px top 1px left sur le hover environ. Je ne comprends pas..

Voici mon CSS :

Code:
/*** --- GENERAL --- ***/

/*** TYPO ***/

@font-face {
    font-family: NSPFONT;
    src: url('http://us.battle.net/d3/static/fonts/exocet/exocet-blizzard-light.woff');
}
 
@font-face {
    font-family: NSPFONT_med;
    src: url('http://us.battle.net/d3/static/fonts/exocet/exocet-blizzard-medium.woff');
}

/* Pas de soulignement au survol des liens */
a:hover {
    text-decoration: none!important;
}

/* Couleur de texte des listes déroulantes */
select {
    color: #999999;
}

/* Taille de typo du fil d'Ariane
(nav au-dessus des boutons "nouveau", "répondre", verrouillé) */
h1.page-title {
    font-size: 12px;
}


/*** BOUTONS ***/
a.button1,
a.button2,
button.button2,
input.button1,
input.button2 {
  background: transparent url('http://image.noelshack.com/fichiers/2016/09/1456834048-envoyer.png') no-repeat;
  border:none;
  color:#000!important;
  display: inline-block;
  font-size:10px;
  height:31px;
  line-height: 31px;
  width: 106px !important;
}

/*** Champs "rechercher" ***/

#search-box {
    margin-top: 0px!important;
}

/* Champs de saisi du texte */
input.search {
    background: #ffffff!important; 
    border-radius: 5px;
    box-shadow: 0 0 5px #000;
    font: normal 12px/18px Arial, sans-serif;
    padding: 5px 6px;
}

/*** CHAMPS SAISI DE TEXTE ***/
.inputbox {
    color:#00B4FF;
}

/* Ajout de bordure au survol */
.inputbox:hover {
    border: 1px solid #00B4FF;
}


/*** COULEURS ***/

/*Couleur pour les Admins*/
#M14_Color_Admin.inner .postbody .content{
  color: #00B4FF !important;
}

/*Couleur pour les Modos*/
#M14_Color_Modo.inner .postbody .content{
  color: red !important;
}

/*** BLOC FORUM ***/

/* On décale le début du forum de 300px du haut */
#wrap {
  background:#F2F2F2;
  background-clip:padding-box;
  border:1px solid rgba(0, 0, 0, 0.1);
  min-width:950px;
  padding:30px 5px 0px 5px;
}

/* On annule le padding sur le bloc qui contient le logo & la barre de nav par défaut */
.headerbar,
#logo {
    padding: 0;
}

/* Pas de couleurs de fond */
/* #wrap = le bloc général du forum */
/* .headerbar = le bloc qui contient le logo + la BDN par défaut */
/* #cp-main .panel = le contenu du bloc "ChatBox" */
#wrap,
.headerbar,
#cp-main .panel {
    background-color: transparent;
}


/*** --- TOOLBAR - NOTIFICATIONS --- ***/

/*Suppression de la couleur de fond des Notifications*/
#fa_notifications{
  background-color: #000000 !important;
  color: #fff !important;
}

/*La partie notification*/
#notif_list{
  bottom: 0% !important ;
  position: fixed !important;
  right: 0px !important;
}

/*Le bouton de fermeture partie Notifications*/
#M14_close_see_all{
  color: red !important;
  cursor: pointer !important;
  height: 10px !important;
  left: 10px !important;
  position: absolute !important;
  text-align: left !important;
  text-decoration: none !important;
  width: 10px !important; 
}

/*** --- FOND --- ***/

/*** VIDEO ***/
#video-background {
 background: url('http://eu.battle.net/d3/static/images/reaper-of-souls/bg/malthael.jpg') repeat-x;
    background-size: cover;
  left: 50%;
    position: fixed;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: 1s opacity;
    z-index: -100; 
}

/*** --- BARRE DE NAVIGATION --- ***/

/* Supprime les bordures de la BDN */
ul.navlinks{
  border:none;
}

/* L'image de fond */
#BDN {
  background: url('') no-repeat 0 0;
  height: 111px;
  position: fixed;
  top: 0;
  width: 60%;
}

/*IMAGE inscription*/
#i_icon_mini_register{width:180px; height:111px; background:url("http://i68.tinypic.com/27wzomv.png") no-repeat -1012px 0px;}
#i_icon_mini_register:hover{background:url("http://i68.tinypic.com/27wzomv.png") no-repeat -1012px -111px;}
/*IMAGE CONNEXION*/
#i_icon_mini_login{width:205px; height:111px; background:url("http://i68.tinypic.com/27wzomv.png") no-repeat -1272px 0px;}
#i_icon_mini_login:hover{background:url("http://i68.tinypic.com/27wzomv.png") no-repeat -1272px -111px;}
/*IMAGE PORTAIL*/
#i_icon_mini_portal{width:163px; height:111px; background:url("http://i68.tinypic.com/27wzomv.png") no-repeat 0 0px;}
#i_icon_mini_portal:hover{background:url("http://i68.tinypic.com/27wzomv.png") no-repeat 0px -111px;}
/*IMAGE INDEX*/
#i_icon_mini_index{width:154px; height:111px; background:url("http://i68.tinypic.com/27wzomv.png") no-repeat -163px 0px;}
#i_icon_mini_index:hover{background:url("http://i68.tinypic.com/27wzomv.png") no-repeat -163px -111px;}
/*IMAGE MEMBRES*/
#i_icon_mini_members{width:120px; height:111px; background:url("http://i68.tinypic.com/27wzomv.png") no-repeat -316px 0px;}
#i_icon_mini_members:hover{background:url("http://i68.tinypic.com/27wzomv.png") no-repeat -316px -111px;}
/*IMAGE GROUPES*/
#i_icon_mini_groups{width:130px; height:111px; background:url("http://i68.tinypic.com/27wzomv.png") no-repeat -435px 0px;}
#i_icon_mini_groups:hover{background:url("http://i68.tinypic.com/27wzomv.png") no-repeat -435px -111px;}
/*IMAGE PROFIL*/
#i_icon_mini_profile{width:98px; height:111px; background:url("http://i68.tinypic.com/27wzomv.png") no-repeat -564px 0px;}
#i_icon_mini_profile:hover{background:url("http://i68.tinypic.com/27wzomv.png") no-repeat -564px -111px;}
/*IMAGE MP (pas de nouveaux messages)*/
#i_icon_mini_message{width:82px; height:111px; background:url("http://i68.tinypic.com/27wzomv.png") no-repeat -661px 0px;}
#i_icon_mini_message:hover{background:url("http://i68.tinypic.com/27wzomv.png") no-repeat -661px -111px;}
/*IMAGE MP (nouveaux messages)*/
#i_icon_mini_new_message{width:82px; height:111px; background:url("http://i68.tinypic.com/27wzomv.png") no-repeat -661px 0px;}
#i_icon_mini_new_message:hover{background:url("http://i68.tinypic.com/27wzomv.png") no-repeat -661px -111px;}
/*IMAGE RECHERCHE*/
#i_icon_mini_search{width:81px; height:111px; background:url("http://i68.tinypic.com/27wzomv.png") no-repeat -743px 0px;}
#i_icon_mini_search:hover{background:url("http://i68.tinypic.com/27wzomv.png") no-repeat -743px -111px;}
/*IMAGE DECONEXION*/
#i_icon_mini_logout{width:175px; height:111px; background:url("http://i68.tinypic.com/27wzomv.png") no-repeat -824px 0px;}
#i_icon_mini_logout:hover{background:url("http://i68.tinypic.com/27wzomv.png") no-repeat -824px -111px;}

/* La liste de lien */
#BDN.linklist.navlinks li{
  display: inline-block;
  height: 124px;
  margin-top: 19px; /* pour placer comme il faut la liste par rapport à l'image de fond */
  font: normal 13px/80px "NSPFONT_med","Palatino Linotype", "Arial", serif;
  letter-spacing: 2px;
}

/*** --- FOOTER --- ***/

/* On centre le contenu du footer */
#page-footer .inner {
    text-align: center;
}

/*** Liste des liens de bas de page ***/

/* Mettre le bouton "Accueil" hors de l'écran */
.footer-home { 
    left: -500px;
    position: absolute;
    top: -500px;
}

/* On annule le floattant des liens pour qu'ils soient centrés */
#page-footer ul.linklist li.rightside {
    float: none;
}

/*** --- INDEX - HOME ***/

/*** GENERAL ***/
.table-index1,
.table-index2,
.table-index3{
  height: 185px;
    width: 307px;
}

.table-index1 > div,
.table-index2 > div,
.table-index3 > div{
  display: inline-block;
    width: 252px;
    word-wrap: break-word;
    color: #000000
}

/*** IMAGE 1 ***/
.table-index1 {
    background: url('http://i65.tinypic.com/1zluhlj.png') no-repeat center -7px; 
}
 
.table-index1:hover {
    background-position: center -201px;
}

/*** IMAGE 2 ***/
.table-index2 {
    background: url('http://i65.tinypic.com/2h7ib6t.jpg') no-repeat center -7px;
}
 
.table-index2:hover {
    background-position: center -199px;
}

/*** IMAGE 3 ***/
.table-index3 {
    background: url('http://i67.tinypic.com/257odxy.png') no-repeat center -7px;
}
 
.table-index3:hover {
    background-position: center -199px;
}

/*** INDEX - CATEGORIE ***/

/* Nom des catégories */
.table-title h2 {
    color: #f3e6d0;
    font: normal 18px/1 "NSPFONT","Palatino Linotype", "Arial", serif;
    letter-spacing: -1.5px;
    text-shadow: 0 0 5px #241209;
}

/* Lien / nom des forums */
a.forumtitle {
    font-size: 12px;
}

/*** --- INDEX - QEEL ***/
.qeel {
    background-image:url('http://i84.servimg.com/u/f84/19/42/85/35/fond_a14.png');
}

/* Supprimer l'image "qui est en ligne" par défaut */
.img-whois {
    display: none;
}

/*** --- DANS UN MESSAGE --- ***/

/*** EDITEUR DE TEXTE ***/

/*  Partie supérieur contenant les outils */
 
div.sceditor-toolbar {
    background-color: #131210 !important;
    border-color: #00B4FF!important;
    border-width: 2px!important;
}

/* suppression boutons code, date, heure et mode*/
a.sceditor-button-code,
a.sceditor-button-date,
a.sceditor-button-time,
a.sceditor-button-source {
    display: none;
}

/* Groupes de bouton */
div.sceditor-group {
    background: #333333 !important;
    border: 1px outset #000000 !important;
    border-radius: 5px !important;
}

/* Bouton */
a.sceditor-button {
  background: #777777 !important;
    border-radius: 30px !important;
}

/* Bouton survolé */
a.sceditor-button:hover{
  background: #AD835A !important;
}

/* Bouton actif */
a.sceditor-button.active{
    background: #c2c2c2 !important;
}

/* zone de saisi de message */
#textarea_content {
    min-width: 702px;
}

/* largeur de l'éditeur */
.sceditor-container {
    width: 710px!important;
}

.sceditor-container iframe,
.sceditor-container textarea {
    color: #00B4FF !important;
    font-size:12px !important;
    line-height: 16px;
    width: 100% !important;
}

/*** REPONSE RAPIDE ***/
 
.sceditor-container.ltr.sourceMode,
.sceditor-container.ltr.wysiwygMode  {
    background-color: #12110f !important;
    border-color: #131210!important;
    max-height: 450px!important;
    width:100% !important;
}

/*** CITATION ***/

blockquote {
    background-color: #1b1915!important;
    border-color: #999999!important;
    border-width: 1px!important;
    border-style: double;
}

/*** PAGINATION ***/

/* Mise en page des liens */
.pagination span a:active,
.pagination span a:link,
.pagination span a:visited {
    background-color: #12110e;
    border: 1px solid #000000;
    color: #AD835A!important;
    display: inline-block;
    font-size: 9px;
    text-decoration: none;
}

/* Le texte en gras */
.pagination span strong{
    background-color: #12110e;
    border: 1px solid #000000;
    color: #999999;
    font-size: .9em;
    text-decoration: none;
}

/*** BLOC SIGNATURE ***/
.signature_div {
    color: #00B4FF!important;
    font: normal 12px/1 "Arial", sans serif!important;
    text-align: center!important;
}

/* Taille max des images dans les signatures */
.signature_div img{
    max-width: 500px !important;
    max-height: 200px !important;
}

/*** MESSAGE ***/
/* (Colonne du posteur + du contenu du message) */
.post {
    background: #12110f url('http://eu.battle.net/d3/static/images/layout/cms/post_bg.jpg');
    background-size: cover;
  border:2px solid #000;
}

/*** ZONE DU MESSAGE ***/
.post .postbody .content {
  line-height: 1.7em;
    margin-left: 10%!important;
    margin-right: 10%!important;
}

/* Hover sur les posts hide buttons */
.postbody ul.profile-icons {
  opacity: 0;
}

.post:hover .postbody ul.profile-icons {
    opacity: 1;
}

/*** PARTIE CONCERNANT LE POSTEUR ***/
.postprofile {
    border-color: #322e2e;
    font: normal 11px/1 "Arial", sans serif!important;
  padding: 5px 0 0 8px;
    text-align: center;
}

/* Aligner le texte "Battle Tag" et l'image */
.postprofile .label,
.postprofile .label img[alt="Battle Tag"]{
  display: inline-block;
  vertical-align: middle;
}

/* Icone des profils (profil, mp, mail, site, ...) */
ul.profile-icons {
    list-style: none;
    margin-top: 10px;
    margin-right: 0px!important;
}

/*** --- AUTRES --- ***/

/* Position des images "icône du sujet" */
dd.dterm {
    background-position: 85%!important;
}


/*** TWITCH ***/

/* L'image du bouton */
#M14_btn_slide:before{
  background: url('http://i84.servimg.com/u/f84/19/42/85/35/14573010.png') no-repeat;
  content: "";
  height: 64px;
  left: 200px;
  position: absolute;
  width: 64px;
}

/*Le bloc du slide*/
#M14_btn_slide{
  height:64px;/*on donne une hauteur toujours en relation avec la hauteur de l image*/
  left:-205px;/*on cache le bloc*/
  position:fixed;/*on fixe le slide*/
  text-align:center;/*on centre le lien*/
  top:60px;/* on le positionne a 60px du haut du fofo*/
  width:200px;/*on lui donne une largeur en relation avec l image*/

  /*La transition*/
  -webkit-transition: left 0.5s ease-in-out;
  -moz-  transition: left 0.5s ease-in-out;
  -o-    transition: left 0.5s ease-in-out;
        transition: left 0.5s ease-in-out;
}

/*Le slide effectue par le script*/
#M14_btn_slide.margin{
  left: 0;
}

/* Iframe dans le bouton */
#frametwitch {
  border: 1px solid black;
  height: 100%;   
  width: 100%;
}

/*** MISE EN PAGE PARTIE PUB FA (haut du forum) ***/
div#main-content{
    background: url('http://oi63.tinypic.com/1zldtgl.jpg') repeat;
    border: 2px solid #000;
    border-radius: 10px;
    padding:5px;
}

/*** MESSAGE PRIVE ***/

/* On redonne leur taille de base aux images */
form[action="/privmsg?folder=inbox"] .postprofile img {
    width: inherit;
    height: inherit;
}
 
/* Mais on fait en sorte que l'avatar fasse 64px*64px */
form[action="/privmsg?folder=inbox"] .postprofile > dt > img:first-child,
.postprofile dt img {
    background-color: #000;
    background-position: 1px 1px;
    background-repeat: no-repeat;
    border: 1px solid #483A30;
    border-bottom-color: #3D2F26;
    border-radius: 3px;
    border-top-color: #887465;
    height: 64px;
    overflow: hidden;
    padding: 1px;
    width: 64px;
}

/*** MODIFICATION PROFIL ***/

/* couleur des onglets (informations, préférences...) */
#tabs .activetab a span {
    color: #00B4FF;
}

/* Couleur des liens survolés "Nom d'utilisateur, adresse mail, mdp" */
fieldset dl:hover dt label {
    color: #FAF8F7;
}

/*** GESTION OPACIY ***/

/* Dans les messages (.post) */
/* Pour le tableau contenant les widgets du portail (.portal) */
.portal,
.post {
    opacity: 0.9 !important;
}

/*** MENTION TAG (@ #) ***/
a.mentiontag.tooltipstered {
    color: #00B4FF;
}

Bien à vous
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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