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.


    Mise en forme préfédinie avec onglets, personnalisable (Forme 1)

    Partagez
    avatar
    Okhmhaka
    FémininAge : 33Messages : 31851

    le Mar 16 Oct 2012 - 16:20

    Rappel du premier message :

    Bonjour, bonsoir x)

    Je vous mets à disposition une page d'accueil type, assez petite mais groupant les informations essentielles qu'elle doit contenir. Voici ce qu'elle donne (page d'accueil normale du forum test) :

    Lien du forum test

    Il s'agit donc de la page d'accueil ayant pour fond cette image : lien image de fond.

    Comme vous pouvez le constater, tout a été fait pour vous simplifier la tâche. Au lieu d'avoir à créer des boutons un par un, ou bien faire l'image puis la découper, là vous n'avez qu'à créer votre propre fond en prévoyant simplement les espaces de texte comme je l'ai fait. Libre à vous d'utiliser les couleurs que vous voulez, d'inclure des images, etc... Pour vous éviter d'avoir à trop déplacer les blocs je vous conseille par contre de vous baser sur l'image de fond exemple que j'ai faite pour réaliser la votre, et ainsi garder les mêmes emplacements.
    Si vous agrandissez l'image ou déplacez les blocs, il vous faudra modifier les marges dans le code, sachez-le^^

    Un crédit est déjà en place dans le code : il contient simplement le lien de Never-Utopia précisant que la PA vient d'ici. Merci de le conserver, c'est le seul remerciement que je puisse avoir pour ce travail, et il prend peu de place Wink

    Voici les codes HTML et CSS de cette page d'accueil. Le HTML est à placer dans Affichage > Page d'accueil > Généralité ; le CSS sera à ajouter au votre dans Affichage > Couleurs > Feuille CSS.

    Code HTML

    Code:
    <div id="f1_accueil">
    <table style="width: 100%;">
    <tr><td class="f1_col1"><div class="f1_contexte">
    Quod opera consulta cogitabatur astute, ut hoc insidiarum genere Galli periret avunculus, ne eum ut praepotens acueret in fiduciam exitiosa coeptantem. verum navata est opera diligens hocque dilato Eusebius praepositus cubiculi missus est Cabillona aurum secum perferens, quo per turbulentos seditionum concitores occultius distributo et tumor consenuit militum et salus est in tuto locata praefecti. deinde cibo abunde perlato castra die praedicto sunt mota.<br />
    Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.<br />
    Post haec indumentum regale quaerebatur et ministris fucandae purpurae tortis confessisque pectoralem tuniculam sine manicis textam, Maras nomine quidam inductus est ut appellant Christiani diaconus, cuius prolatae litterae scriptae Graeco sermone ad Tyrii textrini praepositum celerari speciem perurgebant quam autem non indicabant denique etiam idem ad usque discrimen vitae vexatus nihil fateri conpulsus est.
    </div></td>
    <td style="vertical-align: top;"><div class="f1_bloconglets">
    <span class="f1_onglet1"><div class="f1_contenu1">
    <span class="f1_liens"><a href="#">Lien 1</a> - <a href="#">Lien 1</a> - <a href="#">Lien 1</a> - <a href="#">Lien 1</a></span>
    <table><tr>
    <td><div class="f1_news"><marquee direction="up" scrollamount="2" onmouseover="this.stop();" onmouseout="this.start();"><span style="display: block; text-align: justify;">Quod opera consulta cogitabatur astute, ut hoc insidiarum genere Galli periret avunculus, ne eum ut praepotens acueret in fiduciam exitiosa coeptantem. verum navata est opera diligens hocque dilato Eusebius praepositus cubiculi missus est Cabillona aurum secum perferens, quo per turbulentos seditionum concitores occultius distributo et tumor consenuit militum et salus est in tuto locata praefecti. deinde cibo abunde perlato castra die praedicto sunt mota.</span></marquee></div></td>
    <td><div class="f1_credits">(c) Crédits du forum<br />
    Merci à ...<br />
    PA par <a href="http://www.never-utopia.com">Never-Utopia</a>.</div></td>
    </tr></table>
    </div></span>

    <span class="f1_onglet2"><div class="f1_contenu2">
    <span class="f1_staff1"><div class="f1_staffcontenu1">Information staff 1</div></span>
    <span class="f1_staff2"><div class="f1_staffcontenu2">Information staff 2</div></span>
    <span class="f1_staff3"><div class="f1_staffcontenu3">Information staff 3</div></span>
    </div></span>

    <span class="f1_onglet3"><div class="f1_contenu3">
    <table><tr>
    <td><div class="f1_friends"><marquee direction="up" scrollamount="2" onmouseover="this.stop();" onmouseout="this.start();"><center>partenaires</center></marquee></div></td>
    <td><div class="f1_topsites">
    topsites
    </div></td>
    </tr></table>
    </div></span>

    </div>
    </td>
    </tr></table>
    </div>

    Code CSS

    Code:
    /* PAGE ACCUEIL FORME 1 */

    #f1_accueil
    {
      width: 800px;
      height: 500px;
      margin: auto;
      background: url(http://img15.hostingpics.net/pics/891324imageexemplePA.jpg);
      text-shadow: none !important;
    }
    #f1_accueil a
    {
      color: #ba8550 !important;
      text-shadow: none !important;
    }
    #f1_accueil a:hover
    {
      color: #e58f3a !important;
      text-shadow: none !important;
    }
    .f1_col1
    {
      width: 300px;
      vertical-align: top;
    }
    .f1_contexte
    {
      width: 220px;
      height: 300px;
      overflow: auto;
      margin-top: 100px;
      margin-left: 65px;
      text-align: justify;
      color: #7e6144;
      text-shadow: 1px 1px 0px #ffffff;
    }
    .f1_bloconglets
    {
      margin-top: 80px;
    }
    .f1_onglet1, .f1_onglet2, .f1_onglet3
    {
      display: inline-block;
      width: 110px;
      height: 50px;
    }
    .f1_onglet1
    {
      margin-left: 50px;
      margin-right: 25px;
    }
    .f1_onglet2
    {
      margin-right: 30px;
    }
    .f1_contenu1, .f1_contenu2, .f1_contenu3
    {
      position: absolute;
      width: 0px;
      height: 220px;
      margin-top: 40px;
      padding-top: 40px;
      overflow: hidden;
      font-size: 11px;
      color: #7e6144;
    }
    .f1_contenu1
    {
      margin-left: -10px;
    }
    .f1_contenu2
    {
      margin-left: -149px;
    }
    .f1_contenu3
    {
      margin-left: -294px;
    }
    .f1_onglet1:hover .f1_contenu1, .f1_onglet2:hover .f1_contenu2, .f1_onglet3:hover .f1_contenu3
    {
      width: 400px;
    }
    .f1_liens
    {
      display: block;
      text-align: center;
    }
    .f1_liens a
    {
      font-size: 16px;
      font-weight: bold;
    }
    .f1_news, .f1_friends
    {
      width: 200px;
      height: 200px;
      overflow: hidden;
      text-align: justify;
    }
    .f1_credits, .f1_topsites
    {
      height: 150px;
      border-left: 1px solid #d19962;
      margin-left: 5px;
      padding: 5px;
      text-align: center;
    }
    .f1_staff1, .f1_staff2, .f1_staff3
    {
      display: block;
      width: 50px;
      height: 50px;
      background: url() #d19962;
      margin-bottom: 20px;
      margin-top: 20px;
      border: 1px solid #d19962;
    }
    .f1_staffcontenu1, .f1_staffcontenu2, .f1_staffcontenu3
    {
      position: absolute;
      width: 0px;
      height: 150px;
      background: #ffffff;
      margin-left: 80px;
      overflow: hidden;
    }
    .f1_staffcontenu2
    {
      margin-top: -72px;
    }
    .f1_staffcontenu3
    {
      margin-top: -144px;
    }
    .f1_staff1:hover .f1_staffcontenu1, .f1_staff2:hover .f1_staffcontenu2, .f1_staff3:hover .f1_staffcontenu3
    {
      width: 300px;
      border: 1px solid #d19962;
    }

    Pour modifier l'image de fond, il suffit donc juste de mettre l'adresse de votre image hébergée dans le début du code à la place de celle déjà présente :

    Code:
    #f1_accueil
    {
      width: 800px;
      height: 500px;
      margin: auto;
      background: url(adressedevotreimage.jpg);
      text-shadow: none !important;
    }

    Vous pouvez modifier les couleurs de la police puisque celle-ci dépendra des tons de votre forum et surtout de ceux de votre image de fond.

    Merci de laisser le crédit déjà en place dans le code.

    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.


    Dernière édition par Sparrow-style le Jeu 28 Mar 2013 - 12:51, édité 1 fois



    avatar
    SooJaeHee
    FémininAge : 23Messages : 50

    le Ven 24 Oct 2014 - 19:21

    Merci !
    avatar
    Lauriale
    FémininAge : 21Messages : 113

    le Dim 26 Oct 2014 - 18:53

    Je suis curieuse de voir comment tu as fais ça :)
    avatar
    Skylighty
    FémininAge : 88Messages : 97

    le Mar 28 Oct 2014 - 23:16

    merci *-*
    avatar
    Celuna
    FémininAge : 28Messages : 133

    le Mer 29 Oct 2014 - 9:18

    C'est magnifique. Merci pour ces superbes réalisations.
    avatar
    1XMisterX1
    MasculinAge : 20Messages : 423

    le Mer 29 Oct 2014 - 22:30

    Très jolie PA ! *_*
    Merci beaucoup ! Very Happy
    avatar
    louchielulue
    FémininAge : 28Messages : 32

    le Jeu 30 Oct 2014 - 10:04

    merci Very Happy
    Drogba JR
    MasculinAge : 26Messages : 88

    le Mar 4 Nov 2014 - 15:08

    merci :)
    avatar
    Astramael
    MasculinAge : 25Messages : 8

    le Ven 7 Nov 2014 - 22:21

    Thank you!
    avatar
    Nîniel
    FémininAge : 23Messages : 70

    le Sam 8 Nov 2014 - 19:04

    Je prends, merci beaucoup ! Elle rend vraiment très bien :)



    avatar
    Rementis
    MasculinAge : 25Messages : 69

    le Lun 10 Nov 2014 - 18:04

    Merci à toi Very Happy
    avatar
    Matantelie
    FémininAge : 24Messages : 36

    le Mar 11 Nov 2014 - 0:45

    merciiii
    avatar
    Sinon
    FémininAge : 19Messages : 68

    le Jeu 13 Nov 2014 - 19:05

    Merci beaucoup !
    avatar
    Pillonis
    MasculinAge : 22Messages : 11

    le Mer 19 Nov 2014 - 15:30

    merci !
    avatar
    Sacha73
    MasculinAge : 38Messages : 67

    le Lun 24 Nov 2014 - 18:34

    Merci
    avatar
    Loucas Kiiro
    FémininAge : 28Messages : 53

    le Mer 26 Nov 2014 - 12:29

    merci =)
    avatar
    Nelliel
    FémininAge : 28Messages : 30

    le Sam 29 Nov 2014 - 14:59

    Merci beaucoup pour cette pa **



    avatar
    Hyuna
    FémininAge : 21Messages : 98

    le Dim 30 Nov 2014 - 17:42

    Merci :3 c'est très jolie **
    avatar
    Fame
    MasculinAge : 28Messages : 232

    le Jeu 4 Déc 2014 - 21:41

    Merci beaucoup c'est génial
    avatar
    AwenWolf
    FémininAge : 30Messages : 76

    le Ven 5 Déc 2014 - 14:53

    Merci *_*
    avatar
    sayedn73
    MasculinAge : 44Messages : 17

    le Dim 7 Déc 2014 - 4:40

    Thank you
    avatar
    DarkMasamune
    FémininAge : 26Messages : 57

    le Sam 13 Déc 2014 - 14:21

    Merci beaucoup ! C'est exactement ce que je recherchais :).
    avatar
    No'Oz
    FémininAge : 16Messages : 88

    le Sam 13 Déc 2014 - 17:26

    Merci beaucoup pour cette magnifique Page d'Acceuil :hug:
    avatar
    Chevalier Oignon
    MasculinAge : 28Messages : 60

    le Sam 13 Déc 2014 - 19:17

    Michi :)
    avatar
    Narcisse
    FémininAge : 103Messages : 21

    le Dim 14 Déc 2014 - 23:19

    Merci beaucoup !
    Sépia
    FémininAge : 21Messages : 70

    le Mer 17 Déc 2014 - 18:45

    Je l'aime beaucoup x) Merci *_*
    Contenu sponsorisé


      La date/heure actuelle est Mer 26 Sep 2018 - 7:15