Popup de connexion

[J-CHamel]

Bonjour/bonsoir,
J'ai mis l'option popup de connexion et après avoir écrit le texte,
décider d'y ajouter une image de fond.  Le problème est que
maintenant, les trois boutons (Connexion, s'enregistrer, Ne plus afficher)
sont au centre de la boite et mon texte, en bas de page.
Voici le résultat:


Lien de mon forum:http://zone.1fr1.net/

Merci d'avance!
J-C

[Matriochka]

Bonsoir,

Je ne vois pas de popup de connexion sur le forum que tu montres. Pourrais-tu l’afficher le temps que l’on règle le souci ?

La capture d’écran n’est pas très parlante, ce sera plus simple avec l’exemple sous le nez

[J-CHamel]

Salut Matriochka,
Et bien là...je ne peux rien faire de plus car je n'ai rien
désactivé! Le Pupop serait sensé apparaitre à l'ouverture.
Autre que l'image dans le message plus haut, je pourrais
te donner un code mais...le quel?

Un gros MERCI pour ton aide!
J-C

[Matriochka]

Ah, sous Firefox je vois bien la popup.

Alors, ce que je te conseillerai plutôt, au lieu de mettre l'image avec les balises img, c'est de l'insérer en fond de la popup :

Code:

div#login_popup table.forumline {background:url(…);}

[J-CHamel]

Re bonjour Matriochka,

C'est pourtant celui que j'ai mis dans le code?
J'ai beaucoup de problèmes depuis que Forumactif a fait des modifications.
Problème de cadre, perdu mes boutons dans le menu du PORTAIL, perdu le
FOND DÉGRADÉ dans les messages, etc...
Mais je demeure positif

Un gros MERCI pour ton aide!
Cordialement.
J-C

[Matriochka]

Le dernier est le bon

[J-CHamel]

Re bonjour Matriochka,

C'est pourtant celui que j'ai mis dans le code?
J'ai beaucoup de problèmes depuis que Forumactif a fait des modifications.
Problème de cadre, perdu mes boutons dans le menu du PORTAIL, perdu le
FOND DÉGRADÉ dans les messages, etc...
Mais je demeure positif

Un gros MERCI pour ton aide!
Cordialement.
J-C

[Matriochka]

Ah je vois quel est le souci, c’est la couleur de la cellule qui recouvre l’image :

Code:

div#login_popup table.forumline td.row1 {background:transparent;}

[J-CHamel]

Re salut,

Que dois-je faire?  Car j'ai plusieurs problèmes de codes non fonctionnels
dans mon CSS.

Code:

body{
            background-position: top center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
        
        .user_login_form.forumline {
        border:…;
        background:transparent;
        }

        div#login_popup table.forumline {
        background:url(http://i36.servimg.com/u/f36/14/19/54/92/digita12.jpg);
        }

        .module {-webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        }

                div .AdministrateurDegrade {
          background-image: url(http://i34.servimg.com/u/f34/15/04/69/53/dagrad10.jpg);
          background-position: bottom right;
        }
 
               a:link {   /*couleur des liens dans les messages*/
             color: #2E5FA4;
            text-decoration: none;
        }


                
               .signature_div img {
        
       max-height:180px;
        max-width:500px;
        }

                                .avatar_mess
        {
           display: block;
           width: 200px;
           height: 200px;
           overflow: hidden;
           background: #031128;
           border: 5px solid #252626;
           box-shadow: 0 0 6px #000;
           position: relative;
        }
        
       .avatar_mess:hover a
        {
           left: 100%;
           -webkit-transition: all 1s ease;
           -moz- transition: all 1s ease;
           -o-transition: all 1s ease;
           transition: all 1s ease;
        }
        
       .profil_mess
        {
          position: absolute;
          display: block;
          left: 0; right: 0; top: 0; bottom: 0;
          padding: 5px;
          overflow: auto;
          background: #133A7B;
          color: #c5bea0;
          font-size: 11px;
        }
        
       .avatar_mess a {
           position: absolute;
           top: 0; bottom: 0;
           left: 0; right: 0;
           -webkit-transition: all 1s ease;
           -moz- transition: all 1s ease;
           -o-transition: all 1s ease;
           transition: all 1s ease;
        }
        
       .pseudo_mess
        {
          display: block;
          width: 205px;
          height: 50px;
          text-align: center;
          font: bold 18px "Courier New", Courier, monospace;
          background: #545252;
          padding-top: 5px;
          border: 3px solid #371e1a;
          text-shadow: 0 0 3px #c5bea0;
          box-shadow: 0 0 3px #000;
        }
                a.mainmenu {
          font-size:16px;        /* taille du texte */
          font-weight:bold;        /* texte en gras */
          font-style:italic;      /* texte en italic */
          font-family: Georgia, Arial, serif;      /* police du texte */
          letter-spacing:-1px;        /* espace les lettres */
          color:#404040;        /* couleur texte */
        }
        
       .barre_nav {
          background-color: #000000 ;      /* couleur du fond */
          border-bottom: 3px #000 solid;      /* bordure du bas */
          position: fixed;            /* on fixe le menu en haut */
          top: 0px;            /* place le menu en haut a 0px */
          left: 0px;
          width: 100%;
          z-index: 999;
          padding: 3px;
        }
        
               /* CSS du menu vertical, bieler batiste */
        
       
       .menu{
            position:absolute;
            /* solve a Opera7/IE display bug */
            width:152px;
            width/**/:150px;
            border-top: 1px #000 solid;
            border-left: 1px #000 solid;
            border-right: 1px #000 solid;
            margin:0;
            padding:0;
            }
          
       .menu span{
            display:none;
            }
          
       .menu ul{
            border-top: 1px #000 solid;
            border-left: 1px #000 solid;
            border-right: 1px #000 solid;
            margin:0;
            padding:0;
            position:absolute; /* important */
            width:152px;
            width/**/:150px;
            }
          
       .menu li ul{
            visibility:hidden;
            }
                  
       .menu li ul{
            margin-left:150px; /* be careful */
            margin-top:-24px;
            }
          
       .menu a{
            text-align:center;
            background-color: #2E5FA4;
            color:#000;
            text-weight:bold;
            display:block;
            width:150px;
            border-bottom: 1px #000 solid;
            text-decoration:none;
            margin:0;
            padding:3px 0 3px 0; /* em units can creat little graphic bug in mozilla */
            }
          
       .menu a:hover{
            background-color: #78BDF8;
            }
          
       /* for a mozilla better display with key nav */
        .menu a:focus{
            background-color: #2E5FA4;
        }
        
       .menu span{
            /* hide some accessibility stuff */
            display:none;
            }
              
       .menu li{
            width:150px;
            display:block;  
           float:left;
           list-style:none;
            margin:0;
            padding:0;
            }
          
       /* IE PC selector */
        * html .menu li {
            display:inline; /* solve a IE PC list bug */
            float:none; /* solve a IE5 clav nav bug */
            }
          
       a.linkOver{
            background-color: #eee;
            }



         @charset 'utf-8';
/*************************************************!
*
*  project:    liteAccordion - a horizontal accordion plugin for jQuery
*  author:    Nicola Hibbert
*  url:        http://nicolahibbert.com/liteaccordion-v2/
*  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
*
*  Version:    2.0.2
*  Copyright:  (c) 2010-2011 Nicola Hibbert
*  Licence:    MIT
*
**************************************************/
/****************************************** Core */
.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif }
.accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
.accordion .slide > h2 {
 color: black;
    font-size: 16px;    
  font-weight: normal;
  margin: 0;
 z-index: 100;
 position: absolute;
 top: 0;
 left: 0;
 -webkit-transform: translateX(-100%) rotate(-90deg);
 -webkit-transform-origin: right top;
 -moz-transform: translateX(-100%) rotate(-90deg);
  -moz-transform-origin: right top;
 -o-transform: translateX(-100%) rotate(-90deg);
 -o-transform-origin: right top;
 transform: translateX(-100%) rotate(-90deg);
 transform-origin: right top;
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
   display: block;
   padding-right: 8%;
   text-align: right;
   height: 90%;
    margin-top: 5px;
   -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.accordion .slide > h2 b {
   display: inline-block;
   position: absolute;
   top: 13%;
   left: 10%;
   text-align: center;
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }

/****************************************** Dark */
.accordion {
   border: 9px solid #353535;
   border-bottom-width: 8px;
   padding: 5px 5px 6px 0;
   background: #030303;
   -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
   -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
   -ms-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
  box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion .slide > h2 { background: #030303; text-shadow: 0 -1px 0 #030303; line-height: 265% }
.accordion .slide > h2 span { background: #353535; color: white }
.accordion .slide > h2 b { background: #353535; color: #030303; text-shadow: -1px 1px 0 #5b5b5b }
.accordion .slide > h2.selected span, .accordion .slide > h2.selected span:hover {
   background: #353535;
    background: -moz-linear-gradient(left,  #353535 0%, #555555 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
    background: -webkit-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -o-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -ms-linear-gradient(left,  #353535 0%,#555555 100%);
    background: linear-gradient(left,  #353535 0%,#555555 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}
.accordion .slide > h2.selected b {
   background: #383838;
    background: -moz-linear-gradient(top,  #3a3a3a 0%, #363636 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636));
    background: -webkit-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -o-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -ms-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: linear-gradient(top,  #3a3a3a 0%,#363636 100%);
}
.accordion .slide > div { background: #030303; margin-left: 5px }

/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }

/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.ie.accordion .slide > h2 b { top: 44% }
.ie9.accordion .slide > h2.selected span, .ie9.accordion .slide > h2.selected span:hover { filter: none }

/******************************************** FA */
.accordion figure .full { width: 100%; height: 100%; }
.accordion h2 { border: none; }

/* centrer l'accordéon */
.accordion { margin: auto; }


Encore MERCI pour ton aide!
J-C

[Matriochka]

Comment ça ? le code que j’ai donné ne fonctionne pas ?

[J-CHamel]

Re salut Matriochka,
Oui ça fonctionne très bien MERCI!

Je met le sujet RÉSOLU.