AccueilDernières imagesRechercherS'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.

Le deal à ne pas rater :
Code promo Nike : -25% dès 50€ d’achats sur tout le site Nike
Voir le deal

    (Benox) Page d'Accueil parchemin et à cadres

    The One Pandemonium
    The One Pandemonium
    FémininAge : 31Messages : 97

    Ven 28 Nov 2014 - 15:47

    Rappel du premier message :

    Ma demande



    Bonjour! Me revoici toujours et encore! Razz
    Il s'agit ici d'une page d'accueil assez simple mais que je voulais intégré à une image de base que j'ai fait moi-même! Tout est ici-bas :3 Merci à ceux qui se lanceront!

    Schéma(s) et Eléments
    Schémas : Mettez ici le ou les schémas que vous avez réalisés, ils sont préférables à un screen d'un autre forum...
    Tailles des éléments : 779x750 est la taille de l'image de base 8D
    Effets voulus : Je crois que tout est dans l'image. Une surbrillance sur les carrés des PV n'a jamais tué quelqu'un aussi B) j'accepte que vous y mettiez votre petit grain de sel si vous jugez qu'ça fera beau!
    Version de votre forum : PHPBB2

    Ressources
    https://2img.net/image.noelshack.com/fichiers/2014/48/1417185986-base.png
    https://2img.net/image.noelshack.com/fichiers/2014/48/1417185985-carre.png
    https://2img.net/image.noelshack.com/fichiers/2014/48/1417185985-image-topsite.png
    https://2img.net/image.noelshack.com/fichiers/2014/48/1417185986-paexempleexplication.png


    Autres précisions ?
    Je crois que tout y est!

    /!\ à la place du texte qui explique les carrés des "Habitants", soit PV du rpg, sera placé aussi un div de texte Razz


    Dernière édition par The One Pandemonium le Ven 28 Nov 2014 - 18:56, édité 3 fois



    « Une oeuvre d’art, c’est un monceau de cicatrices. »
    (Benox) Page d'Accueil parchemin et à cadres - Page 2 1416253868-ladycrowcoupe
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 13 Déc 2014 - 1:00

    Mmhh... Je crois que j'avais écrit 16px à la place de 160px Rolling Eyes

    Bref, voilà ce que le CSS devrait être avec le justify et la bonne hauteur :
    Code:
    /*--------------------------------------------PA PARCHEMIN--------------------------------------------*/
    .backgroundimage_base {
      width: 779px;
      height: 750px;
      background-image: url('http://image.noelshack.com/fichiers/2014/48/1417185986-base.png');
      overflow: hidden;
    }

    /*---Contexte---*/
    .contexte_pa {
      width: 340px;
      height: 295px;
      float: left;
      margin-left: 95px;
      margin-top: 220px;
      font-family: Georgia;
      color: #fff;
      overflow-y: auto;
      text-align: justify;
    }

    /*---Liens Utiles---*/
    .liens_utiles_pa {
      width: 200px;
      height: 175px;
      float: left;
      font-family: Georgia;
      font-size: 28px;
      text-align: right;
      margin-top: 220;
      margin-left: 50px;
      padding-right: 5px;
      overflow-y: auto;
    }

    /*---Votes---*/
    .liens_votes_pa {
      width: 228px;
      height: 78px;
      float: left;
      margin-left: 22px;
      margin-top: 42px;
    }
    .liens_votes_pa img {
      width: ;
      height: ;
    }

    /*---Staff---*/
    .staff_pa {
      width: 346px;
      height: 160px;
      float: left;
      margin-top: 40px;
      margin-left: 92px;
    }

    .staff_pa-image1 {
      width: 50px;
      height: 88px;
      position: relative;
      z-index: 6;
      float: left;
      top: 40px;
      left: 30px;
      display: inline;
      overflow: hidden;
      transition: 1s all;
      -webkit-transition: 1s all;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      opacity: 0.6;
    }
    .staff_pa-image1:hover {
      opacity: 1;
      transform : rotate(5deg);
      -webkit-transform: rotate(5deg);
      box-shadow: 0px 0px 3px #897E53;
    }

    .staff_pa-image2 {
      width: 50px;
      height: 88px;
      position: relative;
      z-index: 6;
      float: left;
      top: 40px;
      left: 40px;
      display: inline;
      overflow: hidden;
      transition: 1s all;
      -webkit-transition: 1s all;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      opacity: 0.6;
    }
    .staff_pa-image2:hover {
      opacity: 1;
      transform : rotate(5deg);
      -webkit-transform: rotate(5deg);
      box-shadow: 0px 0px 3px #897E53;
    }

    .staff_pa-image3 {
      width: 50px;
      height: 88px;
      position: relative;
      z-index: 6;
      float: left;
      top: 40px;
      left: 50px;
      display: inline;
      overflow: hidden;
      transition: 1s all;
      -webkit-transition: 1s all;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      opacity: 0.6;
    }
    .staff_pa-image3:hover {
      opacity: 1;
      transform : rotate(5deg);
      -webkit-transform: rotate(5deg);
      box-shadow: 0px 0px 3px #897E53;
    }

    .staff_pa-image4 {
      width: 50px;
      height: 88px;
      position: relative;
      z-index: 6;
      float: left;
      top: 40px;
      left: 60px;
      display: inline;
      overflow: hidden;
      transition: 1s all;
      -webkit-transition: 1s all;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      opacity: 0.6;
    }
    .staff_pa-image4:hover {
      opacity: 1;
      transform : rotate(5deg);
      -webkit-transform: rotate(5deg);
      box-shadow: 0px 0px 3px #897E53;
    }

    .staff_pa-image5 {
      width: 50px;
      height: 88px;
      position: relative;
      z-index: 6;
      float: left;
      top: 40px;
      left: 70px;
      display: inline;
      overflow: hidden;
      transition: 1s all;
      -webkit-transition: 1s all;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      opacity: 0.6;
    }
    .staff_pa-image5:hover {
      opacity: 1;
      transform : rotate(5deg);
      -webkit-transform: rotate(5deg);
      box-shadow: 0px 0px 3px #897E53;
    }

    /*---Nouveautés---*/
    .news_pa {
      width: 220px;
      height: 160px;
      float: left;
      font-familty: Georgia;
      overflow: hidden;
      padding-left: 5px;
      margin-top: 45px;
      margin-left: 22px;
    }
    .new_pa marquee {
      width: 220px;
      height: 155px;
    }

    /*---Crédits---*/
    .credit_nu_pa {
      width: 125px;
      height: 30px;
      font-family: Georgia;
      font-size: 16px;
      position: relative;
      z-index: 8;
      float: right;
      right: 60px;
      top: -25px;
      opacity: 0.2;
      transition: 1s all;
      -webkit-transition: 1s all;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    .credit_nu_pa:hover {
      font-size: 20px;
      opacity: 1;
      transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
    }



    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 19 Déc 2014 - 5:16

    Bonsoir,

    Je viens aux nouvelles! J'ai vu que c'était installé, est-ce que tout fonctionne? N'oublie pas l'icône "terminé" si c'est bon Wink



    • Revenir en haut
    The One Pandemonium
    The One Pandemonium
    FémininAge : 31Messages : 97

    Lun 22 Déc 2014 - 19:44

    Désolé pour le retard!
    En effet, cela l'a fait! Mais je me demandais comment réduire la distance entre les liens de la section liens utiles? Razz



    « Une oeuvre d’art, c’est un monceau de cicatrices. »
    (Benox) Page d'Accueil parchemin et à cadres - Page 2 1416253868-ladycrowcoupe
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 23 Déc 2014 - 7:20

    Dans une PA, un :
    Code:
    <br />
    équivaut à un saut à la ligne. Je crois qu'il y en a 2 entre chaque lien. Enlèves-en un sur deux et cela devrais déjà être plus petit.



    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 3 Jan 2015 - 6:51

    Puisqu'on n'a pas de nouvelles et que tout a l'air ok, j'archive ~



    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Sam 23 Nov 2024 - 21:02