AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Responsive : Adapter mon forum a TOUTES les résolutions que faire?

    Partagez
    avatar
    Angie H.-Carter
    FémininAge : 34Messages : 698

    le Sam 10 Juin 2017 - 12:42

    Ma demande



    Bonjour tout le monde,
    Voilà il y'a quelques jour j'ai enfin terminer le vidsuel (codage + design) de mon forum. Sa version 1 est donc totalment definitive. Cependant, une amie avec une certaine résolution c'est retrouver avec ce visuel:


    D'abord je me suis dit que cela ne venais que de chez elle, mais une de mes admins m'a dit qu'elle voyais la même chose. Du coup, on ma conseillé soit de mettre forum en responsive soit de changer la navigation. J'ai changer la navigation et cela m'a grave déprimer du coup j'ai remis comme c'était et c'est pour cela que je viens ici.


    Schéma(s) et Eléments


    Schémas : Bien, en somme, je veux garder tout mon visuel > http://the-librarians-rpg.forumactif.org/
    Je ne change rien , ce que je veux c'est que les personnes qui on le même visuel que sur l'image est un visuel normal donc mettre tout mon forum en responsive.

    Tailles des éléments : Normalment tout le forum est en 850px de largeur, alors soitil faudrais le mettre en % soit en "em"
    Effets voulus : un visuel correct pour tout le monde
    Version de votre forum : PHPBB2


    Ressources


    Voilà au moins le CSS du forum en intégralité. Le "body{width:100%;}" a été rajouté justement pour permettre l'adaptation mais cela à échouer lamentablement u_u. Optimisation accepter mais c'est tout du LS pratiquement:

    Code:
    /**msg lu**/
    .marqlu {
    margin-bottom: 5px;
    }
    /**suppr cookie**/
    .supcook {
    margin-bottom: 5px;
    }
    /**Select Code**/
    .selectCode { float:right; cursor:pointer; }
    div.cont_code { clear: right; }

     body{width:100%;}
    table#msg_et, table#msg_et td{
      background-color:none !important;
      }
      /***************************** MISE EN FORME PA *****************************/

        .fond_PA {
          background: url('http://oi64.tinypic.com/29wn621.jpg');
          padding: 10px;
          width: 830px;
          text-align: justify;
        }

        .fond_PA a {
          color: #A2778B !important;
          text-decoration: none !important;
        }

        .titrePA {
          color: #d3b876;
          font-size: 35px;
          font-family: 'IM Fell English', serif;
          margin-top: -90px;
          text-transform:uppercase;
          margin-bottom: 20px
        }

        .sous-titresPA {
          color: #583520;
          font-size: 24px;
          font-family: 'IM Fell English', serif;
          font-weight: bold;
          text-align: left;
          position: absolute;
          z-index: 2;
          margin-top: -18px;
       
        }


            .sous-titresPA:hover {
              color: #9e8c62;
            }

        .blocsPA {
          width: 200px;
          overflow: auto;
          background-color: #f0f0f0;
          padding: 25px;
          text-align: justify;
          color: #515151;
          border: 2px solid #9e8c62;
        }

        /*** IMAGES DU STAFF ***/


    .contenu_infobulles {
      text-align: center;

    }

    .bulles {
      display: inline-block;
        padding-bottom: 1%;
    }

    .img_bulles {
      width: 60px;
      filter: grayscale(1);
      -webkit-filter: grayscale(1);
      -moz-filter: grayscale(1);
      -ms-filter: grayscale(1);
      -o-filter: grayscale(1);
      z-index: 1;
    }

    .img_bulles:hover {
      filter: grayscale(0);
      -webkit-filter: grayscale(0);
      -moz-filter: grayscale(0);
      -ms-filter: grayscale(0);
      -o-filter: grayscale(0);
      position: relative;
      z-index: 2;
    }

    .bulles span{
      z-index: 99;
      text-align: center;
      position: absolute;
      margin-left: -100px;
      padding: 15px;
      height: 70px;
      width: 70px;
      background: #583520;
      color: #d3b876;
      font-family: 'IM Fell English', serif;
      opacity: 0;
      -webkit-transform: scale(0) rotateZ(-12deg);
      -moz-transform: scale(0) rotate(-12deg);
      -ms-transform: scale(0) rotateZ(-12deg);
      -o-transform: scale(0) rotate(-12deg);
      transform: scale(0) rotateZ(-12deg);
      -webkit-transition: all .25s;
      -moz-transition: all .25s;
      -ms-transition: all .25s;
      -o-transition: all .25s;
      transition: all .25s;
    }

    .bulles:hover span, .bulles:focus span{
      transform: scale(1) rotate(0);
      opacity: 1;
    }


      /***************************** FIN MISE EN FORME PA *****************************/
    /* -------------------------------- QEEL -------------------------------- */

            /*** MISE EN FORME LIENS AU SURVOL ***/
            a:hover {
              text-decoration: none !important;
            }

            /*** MISE EN FORME FONT DU QEEL ***/
            .fond_qeel {
              width: 850px;
              background: url('http://i64.tinypic.com/29wn621.png');
              margin: auto;
              font-family: arial;
              height: 670px;
              position: relative;
            }

            /*** MISE EN FORME TITRE PRINCIPAL ***/
            .titre_principal {
              color: #583520;
              font-family: 'IM Fell English', serif;
              font-size:35px; text-transform:uppercase;
              letter-spacing: 5px;
              text-align: center;
            }

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

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

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

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

            /*** DECALAGE BLOC CONNECTES ***/
            .bloc_perigrination {
              margin-top: 1em;
            }


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

            #kaboum span.gensmall {
              color: #515151;
          font-family: arial;
            }

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

            .titre_bloc:hover {
              color: #9e8c62;
            }

            /*** 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: 12px;
              color: #000000;
              text-align: justify;
              background-color: #CBC4C2;
              position: absolute;
              top: 14em;
              left: 21em;
              filter: alpha(opacity = 80);
              opacity: 0.8;
            }

            /* Mise en forme des liens */
            .contenu_groupe_onglet a{
              text-decoration: none !important;
            }
            /* -------------------------------- FIN QEEL -------------------------------- */

    /* ******************************BLOC CATEGORIES **********************************/
    .topCAT{
    width:850px; height:95px; margin:auto;
    background-image:url(http://i65.tinypic.com/2qs8705.png); background-repeat:no-repeat;  /* MODIFIABLE */
    }
    /* MILIEU CATEGORIE */
    .mdlCAT{
    background-image:url(http://i64.tinypic.com/29wn621.png) /* MODIFIABLE */
    width:850px; margin:auto;
    }
    /* BAS CATEGORIE */
    .btmCAT{
    width:850px; height:55px; margin:auto;
     background-image:url(http://i65.tinypic.com/29vf70p.png); background-repeat:no-repeat;/* MODIFIABLE */
    }
    /* TITRE CATEGORIES */
    .tleCAT{
    width:850px; text-align:center;
    }
    .tleCAT h2{
    padding-top:25px;
    font-size:35px; text-transform:uppercase; letter-spacing:3px;
    font-family:Birch Std; color:#d3b876; text-shadow:1px 1px 0px #240902; /* MODIFIABLE */
      font-family: 'IM Fell English', serif;
    }
    /* BLOC FORUMS */
    .blocFRM{
    width:850px; padding-left:25px; text-align:center;
    margin-left:auto; margin-right:auto; margin-top:5px;
    }
    /* BLOCS FORUMS */
    .FRM{
    float:left; margin:10px; 
    width:245px; height:230px; 
    }
    /* TITRE BLOCS FORUMS */
    .tleFRM {
    margin:auto; height:35px; width:210px; padding:5px; overflow:hidden;
    font-family:Verdana; font-size:16px; font-weight:bold; text-transform:uppercase; text-align:center;
      font-family: 'IM Fell English', serif;
    background:rgba(250,250,250,0.6); /* MODIFIABLE */
    }
    .tleFRM a{
    color:#240902 !important; text-shadow:1px 1px 0px rgba(0,0,0,0.2); /* MODIFIABLE */
      font-family: 'IM Fell English', serif;
    }
    /* DESCRIPTIONS BLOCS FORUMS */
    .descFRM {
    margin:10px auto;
    border:5px solid rgba(250,250,250,0.3); /* COULEUR MODIFIABLE */
    width:200px; height:105px; padding:5px; overflow:auto;
    background:rgba(250,250,250,0.3); color:black; text-shadow:0 0 3px rgba(0,0,0,0.3); /* MODIFIABLE */
      font-family: 'IM Fell English', serif;
    font-size:12px; text-align:justify;
    }
    /* IMAGES DESCRIPTIVES BLOCS FORUMS */
    .descFRM img {
    position:absolute; margin-top:-5px; margin-left:-5px;
    width:210px; height:115px;
    transition:all .65s linear; -webkit-transition:all .65s linear;
    }
    .descFRM:hover img{
    opacity:0; transform:scale(0); -webkit-transform:scale(0);
    }
    /* BLOC ICÔNES/SOUS-FORUMS/SUJETS/MESSAGES */
    .ismFRM {
    width:245px; height:50px;
    }
    /* ICÔNES BLOCS FORUMS */
    .imgFRM{
    width:50px; height:50px; display:inline-block;
    }
    .imgFRM img {
    width:50px; height:50px;
    }
    /* BLOC DERNIER MESSAGE & AVATAR DERNIER POSTEUR */
    #lstavFRM {
    position:absolute; margin-top:-180px; margin-left:1px;
    width:210px; height:115px;
    background:#583520; /* MODIFIABLE */
    transform:scale(0); -webkit-transform:scale(0); opacity:0;
    transition:all .65s linear; -webkit-transition:all .65s linear;
    }
    /* DERNIER MESSAGE */
    .lmsgFRM {
    display:inline-block; vertical-align:top;
    width:140px; height:95px; padding:10px; overflow:hidden;
    text-align:right; font-size:11px; text-transform:uppercase; line-height:24px;
      font-family: 'IM Fell English', serif;
    background-color:none; /* MODIFIABLE */
    }
    .lmsgFRM img {
    width:11px; height:9px;
    }
    /* AVATAR DERNIER POSTEUR */
    .avaFRM {
    display:inline-block; vertical-align:top;
    width:50px; height:115px; overflow:hidden;
    }
    .avaFRM img{
    width:50px; height:115px; opacity:0.7;
    }
    .imgFRM:hover #lstavFRM {
    transform:scale(1); -webkit-transform:scale(1); opacity:1;
    }
    /* SOUS-FORUMS */
    .sfFRM {
    display:inline-block; vertical-align:top;
    width:50px; height:35px; padding:15px 0px 0px 0px;
    text-align:center; color:#D3B876; font-size:10px;
      font-family: 'IM Fell English', serif;
    background:#583520; /* MODIFIABLE */
      border-radius:5px 5px 5px 5px;
    }
    /* BLOC LIENS SOUS-FORUMS */
    .sfFRM div{
    position:absolute; z-index:3; margin-top:-158px; margin-left:-53px;
    width:200px; height:105px; padding:5px; overflow:auto;
    font-size:12px; text-transform:uppercase; text-align:justify;
      font-family: 'IM Fell English', serif;
    background:#583520; /* MODIFIABLE */
    opacity:0; transform:scale(0); -webkit-transform:scale(0);
    transition:all .65s linear; -webkit-transition:all .65s linear;
    }
    .sfFRM:hover div{
    opacity:1;
    transform:scale(1); -webkit-transform:scale(1);
    }
    /* LIENS SOUS-FORUMS */
    .sfFRM a{
    color:#D3B876 !important; /* MODIFIABLE */
    }
    /* NOMBRE SUJETS ET MESSAGES */
    .sjtFRM{
    display:inline-block; vertical-align:top;
    width:50px; height:35px; padding:15px 0px 0px 0px; font-size:12px;
      font-family: 'IM Fell English', serif;
    background-color:#384226; color:#D3B876; /* MODIFIABLE */
      border-radius:5px 5px 5px 5px;
    }
    .repFRM { 
    display:inline-block; vertical-align:top;
    width:50px; height:35px; padding:15px 0px 0px 0px; font-size:12px;
      font-family: 'IM Fell English', serif;
    background-color:#943a26; color:#D3B876; /* MODIFIABLE */
      border-radius:5px 5px 5px 5px;
    }
    /****************************** NAVIGATION **********************************/
    /* NAVIGATION */
    #navSIT {
    position:absolute; top:55px; margin-left:-250px; /* MODIFIABLE - DETERMINE LA POSITION */
    line-height:10px;
    }
    .mainmenu img{
    display:none;
    }
    /* LIEN NAVIGATION */
    #navSIT a{
    display:block; margin:5px 0;
    width:135px; padding:10px 5px; border-radius:15px 100px/100px 15px;
    text-transform:uppercase; text-align:center; font-size:14px; font-family:'IM Fell English', serif; line-height:14px;
    background-image:url(http://i64.tinypic.com/29wn621.png); color:black; /* MODIFIABLE */
    transition:all .65s linear; -webkit-transition:all .65s linear;
    }
    /* SURVOL LIEN NAVIGATION */
    #navSIT a:hover {
    background:#583520; color: #d3b876; /* MODIFIABLE */
    }
    /* LIEN MENU RECHERCHE */
    #search_menu a{
    background:none !important; border:none !important; color:inherit !important;
    }
    /****************fin nav*******************/
    /* CODAGE ANGIE LG DE REIRA (FICHES)*/

    /**Select Code**/
    .selectCode { float:right; cursor:pointer; }
    div.cont_code { clear: right; }

    .cadrean {
      background:url(http://i64.tinypic.com/i211nb.png);
      border-bottom:5px solid #542209;
      width:500px;
      padding:20px;
    }

    .cadrean h1 {
      font-family:great vibes;
      font-size:40px;
      text-align:center;
      text-transform: lowercase;
      border-bottom: 1px solid #542209;
      color: #d3b876;
      margin:0;
    }

    .blocan {
      background:#915A38;
      padding:20px;
      text-align:justify;
      font-size:12px;
      line-height:15px;
    }

    .blocan .hoveran {
      width:100%;
      margin-bottom:10px;
    }

    .cadrean h2 {
      font-family:great vibes;
      font-size:28px;
      text-transform: lowercase;
      color: #d3b876;
      margin:0;
    }


    .cadrean .credit {
      text-transform:uppercase;
      font-size:10px;
      font-family:arial;
      opacity:0.5
          color: #d3b876;
      text-align:center;
    }


    .cadrean .iconean {
      float:left;
      width:100px;
      margin-right:5px;
      margin-bottom:5px;
    }

    .elapoint {width:164px;display:inline-block;padding:3px 0;text-transform: uppercase; font-size:9px;background:#915A38;text-align:center;margin-top:3px; }

    /*******************fin fiches****************/
    /*************************************Liste Membres***************************/

    /* BLOC LISTE DES MEMBRES */
    #LMBER {
    width:700px; margin:auto;
    }
    /* BLOC MEMBRE */
    #MBER {
    float:left; width:220px; height:210px; margin:5px;
    }
    /* PSEUDONYME */
    .nameLMBER{
    margin-bottom:5px;
    width:215px; padding-left:5px;
    text-align:left; text-transform:uppercase;
    }
    /* INFORMATIONS */
    .stsLMBER {
    display:inline-block; vertical-align:top;
    width:100px; font-size:11px;
    }
    /* CONTENU INFORMATIONS */
    .stsLMBER div{
    margin:5px 0; padding:5px;
    background:#9e8c62; color:black; /* MODIFIABLE */
    }
    /* IMAGES PROFIL & WWW */
    .mpwLMBER {
    background:none !important;
    }
    /* AVATAR MINIATURISE */
    #imgLMBER {
    display:inline-block; margin-left:10px; width:100px; height:160px; overflow:hidden;
    }
    .imgLMBER {
    position:relative;
    width:100px; height:160px; overflow:hidden;
    }
    .imgLMBER div img{
    position:absolute; margin-left:-50px; width:100px;
    transition:all 0.85s linear; -webkit-transition:all 0.85s linear;
    }
    #imgLMBER:hover .imgLMBER div img{
    transform:translateX(100px); -webkit-transform:translateX(100px);
    }
    /* HUMEUR */
    .imgLMBER span {
    position:absolute;
    width:90px; height:150px; padding:5px; overflow:auto;
    text-align:justify; font-size:10px;
    background:rgba(0,0,0,0.6); color:white; /* MODIFIABLE */
    transform:translateX(-150px); -webkit-transform:translateX(-150px);
    transition:transform 0.85s linear; -webkit-transition:transform 0.85s linear;
    }
    #imgLMBER:hover .imgLMBER span{
    transform:translateX(-50px); -webkit-transform:translateX(-50px);
    }
    /* AFFICHAGE GROUPES LISTE DES MEMBRES */
    .grpLMBER {
    display:block; margin:5px auto; padding:5px;
    text-transform:uppercase; font-weight:bold; font-size:12px;
    border:1px solid black; /* MODIFIABLE */
    }

    /********************Affichage Sujet**********************/

    /* PRESENTATION DU SUJET */
    /* TITRE SUJET */
    #tleSBJ {
    margin:auto; padding:10px 0;
    text-transform:uppercase; font-weight:bold;
    background-image:url(http://i64.tinypic.com/i211nb.png); color:#d3b876; /* MODIFIABLE */
    }
    /* DATE & OUTILS DE MODERATION */
    .datePOST {
    margin-bottom:5px; padding:10px; height: 38px;
    background:rgba(250,250,250,0.3); color:black; font-size:12px; /* MODIFIABLE */
    }
    /* APPARENCE MESSAGE */
    div.postbody {
    min-height:400px; padding:10px;
    background:none; color:black; /* MODIFIABLE */
    text-align:left;
    }
    /* AVATAR */
    .avaPOST {
    width:200px; height:320px; border:5px solid;
    border-color: #d3b876; /* MODIFIABLE */
    transition:transform 0.65s linear; -webkit-transition:transform 0.65s linear;
    }
    .avaPOST img {
    width:200px; height:320px;
    }
    /* FICHE DE PERSONNAGE */
    .avaPOST div{
    position:absolute; z-index:2; margin-top:-320px;
    width:200px; height:320px; overflow:hidden;
    }
    /* CONTENU FICHE DE PERSONNAGE */
    .avaPOST div div{
    width:190px; height:310px; padding:5px; overflow:auto; 
    font-size:11px; background:rgba(250,250,250,0.5); color:black; /* MODIFIABLE */
    transform:translateY(-640px); -webkit-transform:translateY(-640px);
    transition:transform 0.65s linear; -webkit-transition:transform 0.65s linear;
    }
    .avaPOST:hover div div {
    transform:translateY(320px); -webkit-transform:translateY(320px);
    }
    /* PSEUDONYME */
    .namePOST {
    position:absolute; z-index:3; margin-left:45px; margin-top:165px;
    width:350px; padding:5px;
    text-align:left; text-transform:uppercase;
    transform:rotate(90deg); -webkit-transform:rotate(90deg);
    }
    /* IMAGE RANG */
    .imgrankPOST {
    position:absolute; z-index:3;
    margin-top:-63px;
    }
    /* ICONE EN LIGNE */
    .onS {
    position:absolute; z-index:4;
    margin-left:97px; margin-top:-30px;
    }
    /* BLOC INFORMATIONS JOUEUR */
    .boxPOST {
    padding-top:50px; padding-bottom:5px;
    background:#d3b876; /* MODIFIABLE */
    }
    /* TEXTE RANG */
    .rankPOST {
    padding:5px; width:200px;
    text-transform:uppercase; text-align:center;
    color:#583520;  /* MODIFIABLE */
    }
    /* IMAGES CONTACT JOUEUR */
    .ktactPOST {
    width:210px; padding:5px 0; text-align:center;
    opacity:0.5;
    }
    /* INFORMATIONS JOUEUR */
    .abtPOST {
    padding:5px; width:180px; margin:auto;
    font-size:10px; color:#583520;  /* MODIFIABLE */
    }
    /* IMAGES INFORMATIONS JOUEUR */
    .abtPOST img{
    margin:auto; max-width:180px;
    }
    /* TRIANGLE BAS PROFIL */
    .triPOST {
    width:0; height:0; border-style:solid; border-width:50px 105px 0 105px; border-color:transparent;
    border-top-color:#d3b876; /* MODIFIABLE */
    }
    /***********************************************Profil Memmbre********************************************/

    /* AFFICHAGE DU PROFIL */
    .PFIL {
    margin:auto; width:800px;
    }
    /* BLOC POSITIONNEMENT */
    .boxPFIL {
    display:inline-block; vertical-align:top; 
    }
    /* BLOC SUJETS UTILISATEUR PROFIL */
    .sbjPFIL {
    margin-bottom:10px;
    width:100px; height:100px; padding:10px;
    text-transform:uppercase; text-align:center;
    background:#D3B876; /* MODIFIABLE */
    }
    /* BORDURE SUJETS UTILISATEUR PROFIL */
    .sbjPFIL a{
    display:block; margin:auto;
    width:98px; height:58px; padding-top:40px; border:1px solid;
    border-color:#583520; color:#583520; /* MODIFIABLE */
    }
    /* BLOC MESSAGES UTILISATEUR PROFIL */
    .msgPFIL {
    margin-bottom:10px;
    width:100px; height:100px; padding:10px;
    text-transform:uppercase; text-align:center; font-size:18px;
    background:rgba(0,0,0,0.5); /* MODIFIABLE */
    }
    /* BORDURE MESSAGES UTILISATEUR PROFIL */
    .msgPFIL a{
    display:block; margin:auto;
    width:98px; height:58px; padding-top:40px; border:1px solid;
    border-color:white; color:white; /* MODIFIABLE */
    }
    /* BLOC DERNIERE VISITE */
    #lstPFIL {
    width:100px; height:100px; padding:10px;
    text-align:center; font-size:11px;
    background:rgba(0,0,0,0.5); color:white; /* MODIFIABLE */
    }
    /* BORDURE DERNIERE VISITE */
    #lstPFIL div{
    display:block; margin:auto;
    width:88px; height:78px; padding:20px 5px 0; border:1px solid;
    border-color:white; /* MODIFIABLE */
    }
    /* INTITULE DERNIERE VISITE */
    #lstPFIL span{
    text-transform:uppercase;
    }
    /* PSEUDONYME PROFIL */
    .namePFIL {
    margin-left:10px; margin-bottom:10px;
    height:20px; padding:15px 0;
    text-transform:uppercase; text-align:center; letter-spacing:3px;
    background:#D3B876;  /* MODIFIABLE */
    }
    /* BLOC AVATAR & IMAGES CONTACT PROFIL */
    .avPFIL {
    display:inline-block; vertical-align:top; margin-left:10px;
    width:200px; height:320px; overflow:hidden;
    }
    /* BLOC IMAGES CONTACT & ADMINISTRATION PROFIL */
    #ktactPFIL {
    position:absolute;
    width:200px; height:305px; padding-top:15px; text-align:center;
    background:#D3B876; /* MODIFIABLE */
    opacity:0; transition:opacity ease-in-out 0.75s; -webkit-transition:opacity ease-in-out 0.75s;
    }
    #ktactPFIL:hover {
    opacity:1;
    }
    /* BLOC ADMINISTRATION PROFIL */
    #adminPFIL {
    margin-bottom:15px;
    font-size:11px; color:white; /* MODIFIABLE */
    }
    /* IMAGES CONTACT PROFIL */
    .ktactPFIL img{
    margin:auto; margin-bottom:10px;
    }
    /* BLOC INFORMATIONS */
    .abtPFIL {
    display:inline-block; margin-left:10px; 
    width:440px; height:320px; padding:0 10px; overflow:auto;
    font-size:11px;
    background:rgba(0,0,0,0.5); color:white; /* MODIFIABLE */
    }
    /* INTITULES BLOC INFORMATIONS */
    .abtPFIL div span {
    text-transform:uppercase; color:black; font-weight:bold; /* MODIFIABLE */
    }
    /* CONTENU BLOC INFORMATIONS */
    .abtPFIL div:first-child{
    margin:5px; padding:2px 0;
    }
    .abtPFIL .field_uneditable {
    display:inline-block;
    }
    /* FEUILLE DE PERSONNAGE PROFIL */
    .boxRPG {
    margin:auto; margin-top:10px;
    width:780px; padding:10px;
    background:rgba(0,0,0,0.5); color:#ccc; /* MODIFIABLE */
    }
    /* INTITULES CONTENU FEUILLE DE PERSONNAGE PROFIL */
    .boxRPG span {
    text-transform:uppercase; color:#ccc; /* MODIFIABLE */
    }



    /* PRESENTATION LISTE SUJETS */
    /* BLOC SUJET */
    .LSBJ {
    width:750px; margin:10px auto;
    }
    /* OUTIL MODERATION */
    .modSBJ {
    position:absolute; z-index:3; margin-left:-15px; margin-top:15px;
    }
    /* TITRE / AUTEUR / DERNIER MESSAGE / STATISTIQUES */
    .boxSBJ {
    display:inline-block; vertical-align:top;
    width:690px;
    }
    /* BLOC TITRE & DESCRIPTION */
    .tleSBJ {
    display:inline-block; vertical-align:top; margin-bottom:10px;
    width:460px; height:35px; padding:10px; overflow:hidden;
    font-family:'IM Fell English'; background:rgba(0,0,0,0.1); box-shadow:inset 0 0 5px rgba(0,0,0,0.1); /* MODIFIABLE */
    text-align:left;
    }
    /* TITRE */
    .tleSBJ a {
    line-height:9px;
    color:black !important; /* MODIFIABLE */
    }
    /* DESCRIPTION */
    .descSBJ {
    color:black; /* MODIFIABLE */
    font-size:10px; text-align:justify;
    }
    /* TRIANGLE AUTEUR */
    .triSBJ {
    display:inline-block; vertical-align:middle;
    width:0; height:0; border-style:solid; border-width:12.5px 15px 12.5px 0; border-color:transparent;
    border-right-color:#9e8c62; /* MODIFIABLE */
    }
    /* AUTEUR */
    .nameSBJ {
    display:inline-block; vertical-align:middle;
    width:185px; height:35px; padding:20px 5px 0; overflow:hidden;
    background:#9e8c62; /* MODIFIABLE */
    font-size:11px; text-align:center; line-height:11px;
    }
    /* ICÔNES */
    .imgSBJ {
    display:inline-block; vertical-align:top; margin-left:10px;
    width:50px; height:100px;
    }
    /* BLOC DERNIER MESSAGE / VUES & REPONSES */
    .stsSBJ {
    display:inline-block; vertical-align:top;
    background:#381b01; /* MODIFIABLE */
    }
    /* DERNIER MESSAGE */
    .lmsgSBJ {
    display:inline-block; margin:5px;
    height:15px; width:275px; padding:5px; overflow:hidden;
    background:rgba(250,250,250,0.5); color:black; /* MODIFIABLE */
    font-size:9px; text-align:center;
    }
    /* VUES */
    .vuesSBJ {
    display:inline-block; vertical-align:top; margin:5px 5px 5px 0;
    width:85px; height:20px; padding-top:5px;
    background:#9e8c62; color:black; /* MODIFIABLE */
    font-size:11px; text-align:center;
    }
    /* REPONSES */
    .repSBJ {
    display:inline-block; vertical-align:top;  margin:5px 0;
    width:85px; height:20px; padding-top:5px;
    background:#9e8c62; color:black; /* MODIFIABLE */
    font-size:11px; text-align:center;
    }
    /* LISTE DES PAGES */
    .gotoSBJ {
    display:inline-block; vertical-align:top; margin-top:-3px;
    width:210px; padding-right:10px; font-size:10px; text-align:right;
    color:white; /* MODIFIABLE */
    }
    /*************************************fin liste sujet*******************************/


    Autres précisions ?


    Si je demande cela c'est que je ne sais absolument pas faire. Alors y'a deux solutions: Soit on m'explique la démarche correctement et on le fait étape part étape avec moi en suivi. Soit on me le fait completement. La personne qui m'aidera décidera je n'ai aucun souci du moment que cela soit calé à l'ouverture (c'est à dire fin juilliet au plus tard). Merci de votre aide , de votre temps et de votre disponibilité de votre intérêt pour ma demande.




    Dernière édition par Angie H.-Carter le Sam 10 Juin 2017 - 14:43, édité 1 fois



    Your my brillant! You shine into the darkness and you guide me in my life with no fear. I love you so much and i don't want to loose you in my heart. You will be my love forerver. You and me it's like the sky and the sea...This is LIFE!
    avatar
    Nihil Scar Winspeare
    Messages : 4792

    le Sam 10 Juin 2017 - 13:31

    Coucou :)

    La seule chose qui pose problème sur une petite résolution c'est la navigation mal placée, il n'y a pas d'autres éléments que tu veux adapter ?

    Si oui tu devrais pouvoir t'en sortir en ajoutant à la fin de ton CSS quelque chose dans ce genre (enfin, ça fonctionne de mon côté :hum:) :
    Code:
    @media (max-width:1400px) {
       #navSIT {
         margin-left:0;
         left: 40px;
       }
    }

    Attention, en dessous de la zone où tu mets ton CSS, il y a une option "Optimiser votre CSS". Il faut bien que cela soit cocher à "Non", sinon cela ne fonctionnera pas ^^

    Pour comprendre, un petit lien vers un sujet sur le forum : Media Queries - Adapter le CSS selon le type d'écran, l'appareil, etc.

    En gros, on va placer différemment la navigation si la largeur de la fenêtre est en dessous de 1400px.


    avatar
    Angie H.-Carter
    FémininAge : 34Messages : 698

    le Sam 10 Juin 2017 - 14:31

    Bonjour Nihil,

    je te remercie de ton aide. Cependant un autre souci viens d'apparaitre. Même si il corrige parfaitement le souci , l'image de fond des catégories disparait pour une raison obscure que j'ignore. J'ai pourtant bien mit le code à la fin du CSS de la navigation et décocher l'optimisation comme tu me l'a demander o_o... (pourtant skaemp a de bon codage je trouve mais peut-être que ces mes bidouillages qui font tout foiré XD lol)



    Your my brillant! You shine into the darkness and you guide me in my life with no fear. I love you so much and i don't want to loose you in my heart. You will be my love forerver. You and me it's like the sky and the sea...This is LIFE!
    avatar
    Nihil Scar Winspeare
    Messages : 4792

    le Sam 10 Juin 2017 - 14:38

    Quand tu parles d'images de fond des catégories, tu parles de laquelle ? Celle des descriptions ?

    ...
    Je viens d'aller voir dans le code, à un endroit il y a ça :
    Code:
    /* MILIEU CATEGORIE */
    .mdlCAT{
    background-image:url(http://i64.tinypic.com/29wn621.png) /* MODIFIABLE */
    width:850px; margin:auto;
    }

    Il manque un point virgule pour le background-image, je pense que le problème vient de là :
    Code:
    /* MILIEU CATEGORIE */
    .mdlCAT{
    background-image:url(http://i64.tinypic.com/29wn621.png); /* MODIFIABLE */
    width:850px; margin:auto;
    }

    avatar
    Angie H.-Carter
    FémininAge : 34Messages : 698

    le Sam 10 Juin 2017 - 14:42

    Ha bha oui j'avais mal vu merci XD je comprend pas d'aillieur pourquoi je ne l'avais pas vu plus tôt enfinbref merci c'est super ^^ je te remerci de ton aide tu m'a sauvé la vie ^^



    Your my brillant! You shine into the darkness and you guide me in my life with no fear. I love you so much and i don't want to loose you in my heart. You will be my love forerver. You and me it's like the sky and the sea...This is LIFE!
    Contenu sponsorisé


      La date/heure actuelle est Sam 18 Nov 2017 - 18:31