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.


    ♥ (Schéma détaillé) Page d'accueil complète

    Ema Skye
    Ema Skye
    FémininAge : 26Messages : 134

    Dim 21 Oct 2012 - 15:11

    Bonjour ! Very Happy J'aimerais que vous me fassiez une jolie page d'accueil svp ! :3

    Commande
    Lien du forum : http://phoenixwright-rpg.forumactif.org/

    Description des éléments :
    ♥ (Schéma détaillé) Page d'accueil complète Pageda10

    Le texte écrit en vert sont les indications pour que vous vous repérez.
    Le texte écrit en rouge (Texteicitexteici...) sont des repères pour moi, lorsque je ferais des modifications de fonds, de textes...

    Couleurs ou tons :

    • Pour les "Staff", "News", "Top-sites", "Contexte", "Friends" et "Credits", la police est Christopher Hand, en italique, de cette couleur : #7E3817, et d'une taille de 70. D'autre part, les autres textes sont écris en "verdana", de taille 13.

    • Le fond en dehors des vignettes doit être fait de cette image :
    Clique !:

    Et pour ce qui est des fonds à l'intérieur des vignettes, ce doit être celui-ci :
    Clique:

    •Toutes les bordures sont de cette couleur : #7E3117

    • La vignette "Staff" fait 431*255, la vignette "Contexte" fait 325*255, la vignette "Top-sites" fait 319*245, la vignette "Friends" fait 115*245, la vignette "News" fait 202*245, et la vignette "Credits" fait 120*245. Elles sont alignées comme sur le schéma.
    Toute la page d'accueil fait 790*587.

    • Comme vous pouvez le voir sur le schéma, les écritures "Contexte", "top-sites" etc... chevauchent légèrement sur la vignette ^^ Est-il possible de faire pareil ? Very Happy

    • A propos des images du "Staff", j'aimerais que lorsque l'on pointe le curseur sur l'une d'entre elle, elle fait apparaître un texte


    Images : Je compléterai par moi même si possible. Wink Par contre, pourrez vous m'aider à me repérer en mettant du texte du genre "ICI" s'il-vous plaît ? :3

    Autres précisions : Pas d'autres précisions.
    J'ai fait tout mon possible pour faire un beau schéma, j'espère que vous allez effectuer ma commande *^* D'ailleurs, je vous en remercie d'avance ! :)

    Ce sera tout !


    Merci d'avance à celle ou celui qui effectuera ma commande ! ♥


    Dernière édition par Ema Skye le Sam 27 Oct 2012 - 17:48, édité 4 fois
    • Revenir en haut
    Klash
    Klash
    MasculinAge : 44Messages : 20653

    Dim 21 Oct 2012 - 16:59

    Bonjour avant de valider pourrait tu raccourcir t'es liens stp cela déforme la page merci.



    ♥ (Schéma détaillé) Page d'accueil complète 376864signichigo
    • Revenir en haut
    Ema Skye
    Ema Skye
    FémininAge : 26Messages : 134

    Dim 21 Oct 2012 - 17:04

    Bonjour, je les ai mis sous "spoilers" Wink
    • Revenir en haut
    Klash
    Klash
    MasculinAge : 44Messages : 20653

    Dim 21 Oct 2012 - 17:13

    La commande est validée !▬ il est autorisé de la relancer toutes les 48h minimum
    ▬ une commande laissée sans nouvelles sera relancée au bout de 10 jours
    ▬ après la relance du modérateur, si nous n'avons toujours pas d'actualisation de la commande elle sera archivée après une semaine



    ♥ (Schéma détaillé) Page d'accueil complète 376864signichigo
    • Revenir en haut
    Angelusia
    Angelusia
    FémininAge : 39Messages : 1159

    Mar 23 Oct 2012 - 10:12

    Coucou Ema ^^

    Je veux bien me charger de toi ^^

    Je ferais ta commande cette semaine. ^^
    • Revenir en haut
    Ema Skye
    Ema Skye
    FémininAge : 26Messages : 134

    Mar 23 Oct 2012 - 17:45

    Kyaaah ! Merci beaucoup !! :DD Ça me fait super plaisir que ma commande soit prise aussi rapidement ! Je t'en suis très reconnaissante !! ♥ x)
    • Revenir en haut
    Angelusia
    Angelusia
    FémininAge : 39Messages : 1159

    Mer 24 Oct 2012 - 12:45

    Coucou Ema ^^

    J'ai commencé ta pa et avec les images que tu m'as proposé, cela fait hideux.

    Tu préfères pas plutôt une pa sans image, neutre, bien harmonisée ? O.O

    Je te laisse quand même voir la chose => ICI



    Dernière édition par Angelusia le Mer 24 Oct 2012 - 15:44, édité 1 fois
    • Revenir en haut
    Ema Skye
    Ema Skye
    FémininAge : 26Messages : 134

    Mer 24 Oct 2012 - 14:33

    Coucou ! :DD

    Aaw, c'est ce que je craignais, j'aurais dû faire des tests avant... Bon ben, tu peux la laisser sans images, je me chargerai de bien harmoniser tout ça une fois la PA sous les yeux ! ;D ~ Ou bien alors, je te laisse décider, du moment que c'est dans les tons marrons comme ceux du forum ;D

    ( Je n'arrive pas à accéder à ton lien par contre... Ils me disent "You can return to the index"... 0v0"
    • Revenir en haut
    Angelusia
    Angelusia
    FémininAge : 39Messages : 1159

    Mer 24 Oct 2012 - 15:45

    Voilà lien edité ^^

    Je verrais ce soir pour les teintes. Là je ne suis que de passage.
    • Revenir en haut
    Ema Skye
    Ema Skye
    FémininAge : 26Messages : 134

    Mer 24 Oct 2012 - 16:04

    Ça marche ! Very Happy
    Hmm, c'est vrai que le fond derrière les vignettes n'est pas très beau... Oo" Bon, j'en chercherai peut-être un autre alors Wink
    • Revenir en haut
    Angelusia
    Angelusia
    FémininAge : 39Messages : 1159

    Jeu 25 Oct 2012 - 0:32

    Page d'accueil terminée.

    Je t'ai fait une modification via les tops sites et les partenaires.

    A toi de me dire si le rendu final te convient.

    Après je te donnerais tout le code avec l'explication ^^

    Et maintenant moi vais pouvoir me coucher xD

    Je verrais demain ta réponse : )
    • Revenir en haut
    Ema Skye
    Ema Skye
    FémininAge : 26Messages : 134

    Jeu 25 Oct 2012 - 17:37

    Waaaah ! Je viens de voir ! J'aime beaucoup !! Very Happy Merci beaucoup ! ♥ C'est parfait ! *____* Je n'oublierai surtout pas d'écrire ton nom sur la PA ! : )
    • Revenir en haut
    Angelusia
    Angelusia
    FémininAge : 39Messages : 1159

    Jeu 25 Oct 2012 - 21:44

    Je suis contente que ça te convienne ; )

    Je te donne ton css et le html de ta pa. Ensuite les explications pour les vignettes staff. ^^


    Code:
    /*-------------CSS Page daccueil----------------*/


    /*page daccueil*/

    .fondpa {height: 607px;
     
    width: 790px;
    color: black;}


    /*gros titre marron*/

    .titrepa {display: block;
      font-size: 40px;
    color: #7E3817;
      font-face: "Christopher Hand", Chaparral Pro Light;
    font-style: italic;
    margin-top: -40px;}

    /*bordure & couleurs*/

    .bordures {border: 1px solid #7E3117;
    margin-top: 35px;
    background-color: #C9A77D;}


    /*Css Staff*/



    .vignettes_staff {border: 2px dotted #7E3117;
    height: 210px;
      margin: 5px;
      display: inline-block;
      width: 60px;}


    /*fond ecriture staff*/

    .fond_vignettes {background-color: #DEC497;
    display: block;
      height: 210px;
    width: 60px;
      text-align: center;
      opacity:0;
    filter:alpha);
      -webkit-transition: all .6s ease-in;
        -moz-transition: all .6s ease-in;
        -o-transition: all .6s ease-in;
        transition: all .6s ease-in;
    }

    .fond_vignettes:hover {
      text-align: center;
      opacity:1;
    filter:alpha);
      -webkit-transition: all .6s ease-in;
        -moz-transition: all .6s ease-in;
        -o-transition: all .6s ease-in;
        transition: all .6s ease-in;
    }


    .clear {clear: both;}


    /*rectangle contexte & Staff*/

    .rectangle_dessus {float: left;
    height: 255px;
     padding: 10px;
      margin-bottom: 45px;
    }

    .gauche {width: 385px;
    margin-left: 10px;
    margin-right: 10px;}

    .droite { width: 325px;}

    /*cadre ecriture du contexte*/

    .cadre_contexte {overflow: auto;
      display: block;
    text-align: justify;
      padding-top: 5px;
    height: 210px;
    width: 320px;}

    /*rectange new friends credits & top site*/

    .rectangle_dessous {float: left;
     padding: 10px;
    height: 200px;
    margin: 5px;}

    .top_site {width: 165px;
      margin-left: 10px;
    }
    .friends {width: 190px;}
    .news {width: 160px;}
    .credits {width: 130px;}

    /*carre top site & friends*/

    .logo1 {display: inline-block;
    height: 50px;
    width: 50px;
      border: 1px dotted #7E3117;
    margin: 4px; }

    /*texte new*/

    .texte_new {overflow: auto;
      margin-top: 5px;
    height: 170px;
     text-align: justify;
    display: block;}

    La page d'Accueil

    Code:
    <div class="fondpa">
    <div class="bordures rectangle_dessus gauche"><font class="titrepa">Votre Staff</font><span class="vignettes_staff"><span class="fond_vignettes"></span></span><span class="vignettes_staff"><span class="fond_vignettes"></span></span><span class="vignettes_staff"><span class="fond_vignettes"></span></span><span class="vignettes_staff"><span class="fond_vignettes"></span></span><span class="vignettes_staff"><span class="fond_vignettes"></span></span></span></div>
    <div class="bordures rectangle_dessus droite"><font class="titrepa">Contexte</font><span class="cadre_contexte">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</span></div>

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

    <div class="bordures rectangle_dessous top_site"><font class="titrepa">Tops sites</font><span class="logo1"></span><span class="logo1"></span><span class="logo1"></span><span class="logo1"></span><span class="logo1"></span><span class="logo1"></span></div><div class="bordures rectangle_dessous friends"><font class="titrepa">Friends</font><span class="logo1"></span><span class="logo1"></span><span class="logo1"></span><span class="logo1"></span><span class="logo1"></span><span class="logo1"></span><span class="logo1"></span><span class="logo1"></span><span class="logo1"></span></div><div class="bordures rectangle_dessous news"><font class="titrepa">News</font><span class="texte_new">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. </span></div><div class="bordures rectangle_dessous credits"><span class="titrepa">Crédits</span> Merci à Never Utopia pour sa page d'accueil

    <span class="logo1"></span></div></div>

    Pour ton staff, pour mettre l'image faut que tu te fasses une class qui aura le nom de tes administrateurs ou modo.

    Genre

    Code:
    X {background-image: url(ton image);}

    Ensuite tu mettras le nom de ton staff après ça => vignettes_staff

    La taille et la hauteur sont réglées directement par cette class vignettes_staff.

    Ensuite, pour tes informations comme leur nom, etc, tu devras les mettre entre

    Code:
    <span class="fond_vignettes"></span>

    J'ai été assez claire ? : )
    • Revenir en haut
    Ema Skye
    Ema Skye
    FémininAge : 26Messages : 134

    Ven 26 Oct 2012 - 17:39

    Merci beaucoup !! ♥ J'ai euuh... à peu près compris.... Very Happy Mais... Dans la vignette "Friends", les logos ne sont pas de 88*31, comment je fais pour changer et les aligner comme sur mon schéma ? :3
    • Revenir en haut
    Angelusia
    Angelusia
    FémininAge : 39Messages : 1159

    Sam 27 Oct 2012 - 14:27

    Coucou Ema ^^

    Je vais t'éditer ta page d'accueil pour que ça te convienne pour les friends ; )

    Pour que tu puisses avoir l'effet que tu veux, tu n'auras qu'à mettre tes logos de partenariats et rajouter en class à ton img

    Code:
    class="logo2"

    Tes logos de partenariats se mettront bien alignés verticalement et horizontalement.

    J'ai mis quelques uns de mes logos pour que tu puisses voir. Ensuite je les enlèverais ; )

    • Revenir en haut
    Ema Skye
    Ema Skye
    FémininAge : 26Messages : 134

    Sam 27 Oct 2012 - 15:07

    Coucou à toi ! : D
    Waah !! Je viens d'aller voir sur ton forum test ! Merci beaucoup, c'est exactement ce que je voulais, c'est im-pe-ccable ! ♥ x)
    • Revenir en haut
    Angelusia
    Angelusia
    FémininAge : 39Messages : 1159

    Sam 27 Oct 2012 - 15:16

    Mais de rien, mais de rien ^^

    La zone friend est vide. C'est normal. Ce sera à toi de mettre tes logos avec l'ajout de class et le tout sera impeccable ; )

    Je te repasse la pa revue ; )

    Et le css avec la class : )

    Après tu pourras l'installer sur ton forum et mettre ta commande en terminée ; )

    Le css

    Code:
    /*-------------CSS Page daccueil----------------*/


    /*page daccueil*/

    .fondpa {height: 607px;
     
    width: 790px;
    color: black;}


    /*gros titre marron*/

    .titrepa {display: block;
      font-size: 40px;
    color: #7E3817;
      font-face: "Christopher Hand", Chaparral Pro Light;
    font-style: italic;
    margin-top: -40px;}

    /*bordure & couleurs*/

    .bordures {border: 1px solid #7E3117;
    margin-top: 35px;
    background-color: #C9A77D;}


    /*Css Staff*/



    .vignettes_staff {border: 2px dotted #7E3117;
    height: 210px;
      margin: 5px;
      display: inline-block;
      width: 60px;}


    /*fond ecriture staff*/

    .fond_vignettes {background-color: #DEC497;
    display: block;
      height: 210px;
    width: 60px;
      text-align: center;
      opacity:0;
    filter:alpha);
      -webkit-transition: all .6s ease-in;
        -moz-transition: all .6s ease-in;
        -o-transition: all .6s ease-in;
        transition: all .6s ease-in;
    }

    .fond_vignettes:hover {
      text-align: center;
      opacity:1;
    filter:alpha);
      -webkit-transition: all .6s ease-in;
        -moz-transition: all .6s ease-in;
        -o-transition: all .6s ease-in;
        transition: all .6s ease-in;
    }





    /*rectangle contexte & Staff*/

    .rectangle_dessus {float: left;
    height: 255px;
     padding: 10px;
      margin-bottom: 45px;
    }

    .gauche {width: 385px;
    margin-left: 10px;
    margin-right: 10px;}

    .droite { width: 325px;}

    /*cadre ecriture du contexte*/

    .cadre_contexte {overflow: auto;
      display: block;
    text-align: justify;
      padding-top: 5px;
    height: 210px;
    width: 320px;}

    /*rectange new friends credits & top site*/

    .rectangle_dessous {float: left;
     padding: 10px;
    height: 200px;
    margin: 5px;}

    .top_site {width: 160px;
      margin-left: 10px;
    }
    .friends {width: 200px;}
    .news {width: 155px;}
    .credits {width: 130px;}

    /*carre top site & friends*/

    .logo1 {display: inline-block;
    height: 50px;
    width: 50px;
      border: 1px dotted #7E3117;
    margin: 4px; }

    .logo2 {display: inline-block;
    height: 31px;
    width: 88px;
    border: 1px dotted #7E3117;
    margin: 4px;}

    /*new new*/

    .texte_new {overflow: auto;
      margin-top: 5px;
    height: 170px;
     text-align: justify;
    display: block;}

    La pa

    Code:
    <div class="fondpa"><div class="bordures rectangle_dessus gauche"><font class="titrepa">Votre Staff</font><span class="vignettes_staff"><span class="fond_vignettes"></span></span><span class="vignettes_staff"><span class="fond_vignettes"></span></span><span class="vignettes_staff"><span class="fond_vignettes"></span></span><span class="vignettes_staff"><span class="fond_vignettes"></span></span><span class="vignettes_staff"><span class="fond_vignettes"></span></span></span></div><div class="bordures rectangle_dessus droite"><font class="titrepa">Contexte</font><span class="cadre_contexte">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</span></div><div class="clear"></div><div class="bordures rectangle_dessous top_site"><font class="titrepa">Tops sites</font><span class="logo1"></span><span class="logo1"></span><span class="logo1"></span><span class="logo1"></span><span class="logo1"></span><span class="logo1"></span></div><div class="bordures rectangle_dessous friends"><font class="titrepa">Friends</font></div><div class="bordures rectangle_dessous news"><font class="titrepa">News</font><span class="texte_new">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. </span></div><div class="bordures rectangle_dessous credits"><span class="titrepa">Crédits</span> Merci à Never Utopia pour sa page d'accueil
    <br/><br/>
    <span class="logo1"></span></div></div>
    • Revenir en haut
    Ema Skye
    Ema Skye
    FémininAge : 26Messages : 134

    Sam 27 Oct 2012 - 16:38

    Merci ! x) Mais par contre, j'ai encore beaucoup de mal à comprendre comment insérer une image + le texte avec les 'class'... °x° Quand j'essaie l'image s'en va tout en bas est n'est même pas entière... Je connais vraiment rien rien mais rien du tout au codage :'( Au pire, pourrais-tu faire la première image du Staff, pour que ça me serve d'exemple s'il-te plaît ? : 3

    Vala la première image 69*199 Wink → https://2img.net/r/hpimg15/pics/566784staff01.gif
    • Revenir en haut
    Angelusia
    Angelusia
    FémininAge : 39Messages : 1159

    Sam 27 Oct 2012 - 16:56

    Je te montres ici. Wink

    Donc, tu as ton image. Tu veux la mettre dans ta pa.

    Tu lui donne, je sais pas le nom admin1

    Ce qui te donnerais

    Code:
    <span class="vignettes_staff admin1"><span class="fond_vignettes"></span></span>

    Ensuite, dans ton css, tu fais ta nouvelle class

    Ce qui te donnerais

    Code:
    .admin1 {background-image: url(http://img15.hostingpics.net/pics/566784staff01.gif);
    background-repeat: no-repeat;}

    Tu n'as pas besoin de mettre une taille ou un width. La class vignettes_staff les a déjà. ^^

    Pour t'expliquer, la class admin1 hérite de vignettes_staff.

    Ca te sembles plus compréhensible, comme ça ? :)

    • Revenir en haut
    Ema Skye
    Ema Skye
    FémininAge : 26Messages : 134

    Sam 27 Oct 2012 - 17:47

    Oui j'ai enfin compris !! *Alléluia* xDD
    Merci beaucoup !! ♥ x) Je place ma commande en validée !! : )
    • Revenir en haut
    Angelusia
    Angelusia
    FémininAge : 39Messages : 1159

    Sam 27 Oct 2012 - 17:55

    De rien ; )

    Je te dis bon courage pour compléter le reste ; )
    • Revenir en haut
    Klash
    Klash
    MasculinAge : 44Messages : 20653

    Dim 28 Oct 2012 - 8:49

    Tout est en odre je déplace.



    ♥ (Schéma détaillé) Page d'accueil complète 376864signichigo
    • Revenir en haut
    Contenu sponsorisé

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