Rajouter un cadre autour d'une QEEL

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

Résolu Rajouter un cadre autour d'une QEEL

Message par Unleash le Mar 20 Déc 2016 - 2:05

Détails techniques


Version du forum : phpBB2
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
Problème apparu depuis : 20/12/2016
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème



Bonjour à tous,

je viens vers vous afin d'essayer de régler mon soucis si vous souhaitez bien m'aider.
En effet j'ai personnalisé un QEEL préfait et j'aimerai rajouter des cadres autour de celui-ci et à l'intérieur. J'ai eu beau tourner pendant des heures je n'arrive pas à le faire :'(

J'aimerai donc pouvoir ajouter deux cadres:

cadre 1 (qui encadre tout le QEEL (voir schéma ci-dessous))=


cadre 2 (qui entoure une partie du QEEL à l'intérieur (voir schéma ci-dessous)):



Voici mon QEEL actuel:



Voici le Qeel que j'aimerai obtenir à la fin:


Voici mon CSS :
Code:
/* -------------------------------- QEEL -------------------------------- */

        .fond_qeel {
          width: 830px;
          background-image: url('http://image.noelshack.com/fichiers/2016/51/1482192703-tst.png');
          margin: auto;
          height: 450px;
          position: relative;
        }

        /*** MISE EN FORME TITRE PRINCIPAL ***/
        .titre_principal {
          color: #AA0000;
          font-family: georgia;
          font-size: 28;
          letter-spacing: 5px;
          text-align: center;
        }

        /*** MISE EN FORME SOUS-TITRE "Et à qui se fier ?" ***/
        .titre_secondaire {
          color: #C7BBC1;
          font-family: georgia;
          font-size: 14px;
          text-align: center;
        }

        /*** MISE EN FORME BLOC STATISTIQUES ***/
        .bloc_stat {
          background-color: #F0F0F0;
          padding: 15px;
          width: 200px;
          height: 150px;
          overflow: auto;
          font-size: 11px;
          border: 2px solid #CACACA;
          text-align: justify;
          color: #515151;
          position: absolute;
          left: 3em;
          z-index: 1;
        }

        /*** MISE EN FORME BLOC DES GROUPES ***/
        .bloc_groupes {
          background-color: #F0F0F0;
          padding: 15px;
          width: 420px;
          height: 50px;
          overflow: auto;
          font-size: 20px;
          border: 2px solid #CACACA;
          text-align: center;
          font-family: 'Six Caps', sans-serif;
          position: absolute;
          left: 14.5em;
          z-index: 1;
        }

        /*** MISE EN FORME BLOC DES CONNECTES LES 24H ***/
        .bloc_connectes {
          background-color: #F0F0F0;
          padding: 15px;
          width: 420px;
          height: 50px;
          overflow: auto;
          font-size: 20px;
          border: 2px solid #CACACA;
          text-align: center;
          font-family: 'Six Caps', sans-serif;
          position: absolute;
          left: 14.5em;
          z-index: 1;
        }

        /*** MISE EN FORME BLOC DES PARTENAIRES ***/
        .bloc_partenaires {
          background-color: #F0F0F0;
          padding: 20px;
          width: 420px;
          height: 70px;
          overflow: auto;
          font-size: 20px;
          border: 2px solid #CACACA;
          text-align: center;
          font-family: 'Six Caps', sans-serif;
          position: absolute;
          left: 14.5em;
          z-index: 1;


        }


        /*** MISE EN FORME BLOC DES PARTENAIRES ***/
        .bloc_partenaires {
          background-color: #F0F0F0;
          padding: 10px;
          width: 686px;
          height: 70px;
          overflow: auto;
          font-size: 20px;
          border: 2px solid #CACACA;
          text-align: center;
          font-family: 'Six Caps', sans-serif;
          position: absolute;
      bottom: 22px;
          left: 34px;
          z-index: 1;
 
}

        /*** COULEUR ET TRANSPARENCE DU FOND DES 24H ***/
        #kaboum .row1 {
          background-color : transparent;
        }

        #kaboum span.gensmall {
          color: #515151;
        }

        /*** MISE EN FORME DES TITRES (simple + survol) ***/
        .titre_bloc {
          font-family: 'Dancing Script', cursive;
          font-size: 24px;
          font-weight: bold;
          color: #AA0000;
          position: absolute;
          z-index: 2;
          margin-top: -18px;
        }

        /*** TITRE PARTENAIRES ***/
  .titre_partenaires {
      font-family: 'Dancing Script', cursive;
          font-size: 24px;
          font-weight: bold;
          color: #AA0000;
          position: absolute;
          z-index: 2;
      bottom: 105px;
          left: 54px;
}

      .titre_bloc:hover {
          color: #420404;
        }

  .titre_partenaires:hover {
          color: #420404;
        }


        /*** GROUPES A ONGLETS ***/
        /* Mise en forme des noms de groupe */
        .groupe_onglet {
          display: inline-block;
          padding: 10px;
        }

        /* Mise en forme du bloc en transparence de description */
        .contenu_groupe_onglet {
          padding: 15px;
          display: none;
          width: 315px;
          height: 115px;
          overflow: auto;
          font-size: 11px;
          color: #414141;
          text-align: justify;
          background-color: #CBC4C2;
          position: absolute;
          top: 14em;
          left: 21em;
          filter: alpha(opacity = 50);
          opacity: 0.5;
        }



.testcadre {
  margin-top:-30px
}


.fond_deux {
  -moz-border-image: url(http://i.imgur.com/VgBIVUc.png) 8 round;
  -o-border-image: url(http://i.imgur.com/VgBIVUc.png) 8 round;
  -webkit-border-image: url(http://i.imgur.com/VgBIVUc.png) 8 round;
  background-image: url(http://image.noelshack.com/fichiers/2015/26/1435089036-1.png);
  border-image: url(http://i.imgur.com/VgBIVUc.png) 8 fill round;
  border-style: solid;
  border-width: 8px;
  height: 310px}




.cadre_prem {
  -moz-border-image: url(http://i.imgur.com/PAjd5wl.png) 9 repeat;
  -o-border-image: url(http://i.imgur.com/PAjd5wl.png) 9 repeat;
  -webkit-border-image: url(http://i.imgur.com/PAjd5wl.png) 9 repeat;
  background-image: url(http://i.imgur.com/G1BMZj9.png);
  background-position-x: 363px;
  background-position-y: 300px;
  border-image: url(http://i.imgur.com/PAjd5wl.png) 9 fill repeat;
  border-style: solid;
  border-width: 9px;
  box-shadow: 0 0 5px #000;
  padding-bottom: 15px
}


        /* -------------------------------- FIN QEEL -------------------------------- */

Voici mon template index_body:
Code:
<!-- BEGIN disable_viewonline -->
        <link href='http://fonts.googleapis.com/css?family=Dancing+Script|Six+Caps' rel='stylesheet' type='text/css'>

      <div class="cadreprem">
        <div class="fond_qeel"><br /><br /><div class="titre_principal">QUI EST EN LIGNE ?</div>
    <br />
          <br /><br />
            <br />
          <div class="titre_bloc" style="left: 2.5em;">Statistiques</div>
            <div class="bloc_stat">{TOTAL_POSTS}.<br />{TOTAL_USERS}.<br />
            {NEWEST_USER}.<br />
            {TOTAL_USERS_ONLINE}<br /><br />{LOGGED_IN_USER_LIST}</div>
          <div class="titre_bloc" style="left: 13em;">Groupes</div>
            <div class="bloc_groupes"><div class="groupe_onglets">
              <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_protecteurs" onmouseover="javascript:change_groupe_onglet('protecteurs');"><font color=#123D18>NG1</font></span>
              <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_trucs" onmouseover="javascript:change_groupe_onglet('trucs');"><font color=#776B2B>NG2</font></span>
              <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_dissidents" onmouseover="javascript:change_groupe_onglet('dissidents');"><font color=#772F2B>NG3</font></span>
              <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_civils" onmouseover="javascript:change_groupe_onglet('civils');"><font color=#3B133B>NG4</font></span>
              <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_gardiens" onmouseover="javascript:change_groupe_onglet('gardiens');"><font color=#2B3077>NG5</font></span>
          </div></div><br /><br /><br /><br /><br />
          <div class="titre_bloc" style="left: 13em;">Périgrination</div>
            <div class="bloc_connectes"><table id="kaboum">{L_CONNECTED_MEMBERS}</table></div>

            <div class="titre_partenaires">Partenaires</div>
            <div class="bloc_partenaires"><table>Test</table></div>
     
        </div></div>

            <!-- END disable_viewonline -->



J'espère que vous saurez gentiment apporter réponses à mes problèmes

En vous souhaitant de bonnes fêtes de fin d'année et en vous remerciant d'avance,




Dernière édition par Unleash le Mar 20 Déc 2016 - 4:03, édité 1 fois
avatar

Unleash
Nouveau membre

Messages : 27
Inscrit(e) le : 09/03/2016

http://hbsfifa.kanak.fr.
Unleash a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Rajouter un cadre autour d'une QEEL

Message par Unleash le Mar 20 Déc 2016 - 4:03

Résolu tout seul j'ai réussi finalement j'y ai passé du temps mais j'ai réussi x)
avatar

Unleash
Nouveau membre

Messages : 27
Inscrit(e) le : 09/03/2016

http://hbsfifa.kanak.fr.
Unleash a été remercié(e) par l'auteur de ce sujet.

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