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.

-11%
Le deal à ne pas rater :
Smartphone 6.36 ” Xiaomi 14 (12 Go / 256 Go
641 € 719 €
Voir le deal

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

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    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



    sign
    Anonymous
    Invité

    Mar 11 Aoû 2015 - 11:00

    Thank you very much :)
    Merino
    Merino
    MasculinAge : 29Messages : 55

    Mar 11 Aoû 2015 - 14:14

    Merci d'avance, je suis curieux de savoir comment ça marche ! Very Happy
    Cruelly
    Cruelly
    FémininAge : 31Messages : 2605

    Lun 17 Aoû 2015 - 6:56

    Merci encore :)



    :heart: :heart:
    mon-etoile
    mon-etoile
    FémininAge : 36Messages : 140

    Ven 21 Aoû 2015 - 14:47

    Merci
    bloodyclouds
    bloodyclouds
    FémininAge : 30Messages : 20

    Lun 7 Sep 2015 - 17:27

    Merci beaucoup ! Very Happy
    fancy
    fancy
    MasculinAge : 34Messages : 34

    Ven 18 Sep 2015 - 10:15

    merci du partage :ange: :hug:
    Whit
    Whit
    FémininAge : 27Messages : 154

    Jeu 24 Sep 2015 - 20:23

    Merci ! =D
    Oupsie
    Oupsie
    FémininAge : 33Messages : 9

    Jeu 1 Oct 2015 - 18:06

    Grand merci, c'est super. Hâte de découvrir le tout !
    Shaolan
    Shaolan
    MasculinAge : 33Messages : 121

    Ven 2 Oct 2015 - 10:58

    Merci !
    Raclaw Leonheart
    Raclaw Leonheart
    MasculinAge : 27Messages : 11

    Mar 6 Oct 2015 - 17:59

    Cool la pte
    Rez
    Ju08
    Ju08
    FémininAge : 35Messages : 26

    Mer 7 Oct 2015 - 23:38

    Merci =)
    Pythia
    Pythia
    FémininAge : 36Messages : 183

    Jeu 8 Oct 2015 - 18:57

    Merci beaucoup pour le partage :)



    Mise en forme préfédinie avec onglets, personnalisable (Forme 1) - Page 8 Neo10
    Blacklice
    Blacklice
    FémininAge : 27Messages : 11

    Sam 10 Oct 2015 - 1:33

    Waouh j'adore ! :love: Merci beaucoup ! :hug2:
    Liraco
    Liraco
    FémininAge : 28Messages : 21

    Sam 17 Oct 2015 - 0:48

    Merveilleux, merci ♥
    KyoShinya
    KyoShinya
    FémininAge : 30Messages : 8

    Mer 21 Oct 2015 - 23:46

    Wah, merci beaucoup ! Excellente idée l'image de fond adaptable =D !!
    Lamire
    Lamire
    FémininAge : 31Messages : 96

    Sam 31 Oct 2015 - 2:33

    merci
    witm
    witm
    FémininAge : 30Messages : 51

    Jeu 19 Nov 2015 - 14:16

    merci beaucoup
    Toshiki
    Toshiki
    FémininAge : 28Messages : 56

    Ven 20 Nov 2015 - 11:38

    Merci
    sweetheart.
    sweetheart.
    FémininAge : 36Messages : 120

    Ven 20 Nov 2015 - 14:28

    Merci



    Un bisou pour Invité


    Un bisou pour...
    Invité
    br4nd0n
    br4nd0n
    Age : 30Messages : 50

    Dim 22 Nov 2015 - 19:16

    Simple mais j'adore, merci :)



    Mise en forme préfédinie avec onglets, personnalisable (Forme 1) - Page 8 Pourbrandonob6
    Kit by Adil94
    Elodothe
    Elodothe
    FémininAge : 30Messages : 9

    Ven 27 Nov 2015 - 19:14

    Jolie!!
    Myrcella Heaven
    Myrcella Heaven
    FémininAge : 28Messages : 53

    Dim 29 Nov 2015 - 14:34

    Merci !
    tunisiano111
    tunisiano111
    MasculinAge : 28Messages : 57

    Sam 2 Jan 2016 - 1:57

    c'est parfait ça, merci
    AlexTasie
    AlexTasie
    MasculinAge : 27Messages : 34

    Mar 12 Jan 2016 - 0:03

    Merci beaucoup ! Very Happy
    jean-claude
    jean-claude
    MasculinAge : 49Messages : 44

    Dim 24 Jan 2016 - 15:25

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Ven 4 Oct 2024 - 7:16