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.


    Catégories Brunes - Images derrière le titre de catégorie modifiables

    Partagez
    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Dim 1 Mar 2015 - 20:45

    Rappel du premier message :


    Catégories Brunes - Image derrière le titre de catégorie modifiable


    Voici un petit LS de catégories que j'ai faites pour la demande de Filou, où on peut mettre une image de "haut de catégorie" différente pour chaque catégorie. De plus, la description des forums se révèlent au survol de l'image du forum.

    Pour voir l'aperçu : cliquez ici.

    Ce LS est en quatre parties.
    • Tout d'abord, nous allons installer les catégories dans le template.
    • Puis, nous allons mettre en forme les catégories à l'aide du CSS.
    • Ensuite, nous allons voir comment mettre un titre de catégories en image.
    • Enfin, nous allons mettre la description de forum.


    - Pour ce qui est de l'hiérarchie et la structure des catégories, il faut choisir "Séparer les catégories sur l'index : Moyen".
    - Les catégories ont une largeur de 854px.
    - La version du forum est PHPBB2.
    - Les images derrière les titres font 850 par 150 pixels.
    - Les boutons Old/New/Lock font 80 par 85 pixels.
    - L'image qui cache les catégorie fait 377 par 76 pixels.

    Mettre un crédit vers Never-Utopia est obligatoire.




    Dernière édition par Onyx le Sam 20 Juin 2015 - 4:14, édité 2 fois



    avatar
    ptite_perle
    FémininAge : 54Messages : 123

    le Jeu 21 Sep 2017 - 14:05

    Merci



    avatar
    Vanessa sassa
    FémininAge : 26Messages : 12

    le Sam 23 Sep 2017 - 8:57

    Merci
    avatar
    Vanessa sassa
    FémininAge : 26Messages : 12

    le Sam 23 Sep 2017 - 10:07

    Bonjour je cherche dans le code css comment augmenté la pixel de ceci pour qu'il soit plus grand le cadre

    Mais pas moyen de trouver

    et en meme temps augmenter la pixelle du texte ici



    Voici le code css si jamais vous en avez besoin
    Code:

    /**************************************************  DÉBUT DES CATÉGORIES **************************************************/


    /*Bloc de catégorie*/
    .categorie {
      position: relative;
      width: 850;
      margin: auto;
      background-color: #c9987a;
      border-top-left-radius: 427px 112px;
      border-top-right-radius: 427px 112px;
      padding-bottom: 50px;
      overflow: hidden;
      margin-bottom: 50px;
      border: 3px solid #854e31;
      font-size: 20px;
      font-family: georgia;
      color: #ffffff;
    }
    .categorie a {
      color: #ffffff;
    }
    .categorie a:hover {
      color: #ffffff;
    }


    /*Bloc du titre de catégorie*/
    .cate_title {
      height: 150px;
      width: 850px;
      margin-bottom: 50px;
      background-image: url('http://www.zupimages.net/up/17/38/zhvk.jpg');
      border-bottom: 3px solid #854e31;
      border-top-left-radius: 425px 110px;
      border-top-right-radius: 425px 110px;
    }
    /*Titre de catégorie*/
    .cate_title h2 {
      display: block;
      width: 850px;
      margin: 0px;
      padding: 0px;
      padding-top: 70px;
      text-align: center;
      text-shadow: 1px 1px 2px #c99677;
      color: #000000;
      font-family: monotype corsiva;
      font-weight: normal;
      font-size: 50px;
    }
    /*Met le titre de catégorie dessus son image*/
    .cate_title span {
      position: relative;
      z-index: 2;
    }
    /*Image du titre de catégorie*/
    .cate_title img {
      position: absolute;
      top: 0px;
      left: 0px;
      height: 150px;
      width: 850px;
      z-index: 1;
      border-top-left-radius: 425px 110px;
      border-top-right-radius: 425px 110px;
    }


    /*Bloc de forum*/
    .forum_bloc {
      margin: auto;
      width: 800px;
      height: 160px;
      box-shadow: 0 0 10px #000000;
      background-color: #c99677;
      margin-bottom: 30px;
    }


    /*Bloc du titre de forum*/
    .forum_title {
      height: 35px;
      line-height: 35px;
      margin-left: 170px;
      display: block;
    }
    /*Titre de forum*/
    a.forumlink {
      font-family: 'Lobster', cursive;
      font-size: 20px;
      letter-spacing: 0px;
      font-weight: normal;
      color: #000000!important;
      transition: 0.5s;
      -webkit-transition: 0.5s;
    }
    /*Titre de forums survolé*/
    a.forumlink:hover {
      color: #854e31!important;
      letter-spacing: 2px;
      text-decoration: none!important
    }


    /*Bloc image Old New Lock*/
    .forum_old_new_lock_img {
      float: left;
      height: 80px;
      width: 85px;
      margin-left: 30px;
    }
    .forum_old_new_lock_img img {
      height: 80px;
      width: 85px;
    }


    /*Bloc de la description de forum*/
    .forum_desc {
      position: relative;
      float: left;
      width: 377px;
      height: 76px;
      border: 2px solid #dfc5b7;
      margin-left: 46px;
      margin-right: 46px;
      overflow: hidden;
    }
    /*Description de forum*/
    .forum_desc_desc {
      position: absolute;
      width: 373px;
      height: 72px;
      background-color: #000000;
      color: #a3a3a3;
      opacity: 0;
      overflow: auto;
      padding: 2px;
      overflow: auto;
      text-align: justify;
      top: 0px;
      left: 0px;
      transition: 0.5s;
    }
    /*Apparition de la description de forum*/
    .forum_desc:hover .forum_desc_desc {
      opacity: 0.8;
    }
    /*Image de la description de forum*/
    .forum_desc_img {
      position: absolute;
      width: 377px;
      height: 76px;
      top: 0px;
      left: 0px;
    }


    /*Bloc du dernier message et statistiques*/
    .forum_lastmess_stats {
      float: left;
      width: 180px;
      height: 78px;
      border: 1px dotted #dfc5b7;
      text-align: center;
    }
    /*Statistiques*/
    .forum_stats {
      font-size: 10px;
      font-family: verdana;
      margin: auto;
      width: 160px;
      padding-top: 8px;
      padding-bottom: 2px;
      border-bottom: 1px dotted #dfc5b7;
    }
    /*Dernier message*/
    .forum_lastmess {
      margin: auto;
      margin-top: 8px;
      width: 170px;
    }


    /*Bloc des sous-forums*/
    .forum_sous_forums {
      width: 700px;
      margin: auto;
      margin-top: 8px;
      padding-top: 5px;
      height: 26px;
      text-align: center;
      border-top: 1px dotted #dfc5b7;
      vertical-align: bottom;
      overflow: auto;
      font-size: 16px;
      font-family: georgia;
    }
    /*Liens des sous-forums*/
    .forum_sous_forums a {
      vertical-align: bottom;
      font-size: 12px;
      font-family: georgia;
    }
    .forum_sous_forums img {
      width: 26px;
      height: 20px;
    }

    /*Cache les images qui ne doivent pas apparaître*/
    a.forumlink img, a.nav img {
      display: none;
    }


    /************************************************** FIN DES CATÉGORIES **************************************************/
    [/center]
    avatar
    Susu-chan
    FémininAge : 27Messages : 75

    le Sam 23 Sep 2017 - 19:06

    Parfait ! Merci du partage o/
    avatar
    Ayu-chan
    FémininAge : 23Messages : 8

    le Dim 24 Sep 2017 - 16:27

    Merci !
    Phénix'
    FémininAge : 16Messages : 91

    le Dim 24 Sep 2017 - 19:45

    Merci !
    avatar
    abysean
    MasculinAge : 22Messages : 24

    le Jeu 28 Sep 2017 - 22:36

    Merci
    avatar
    Eryu
    FémininAge : 25Messages : 46

    le Sam 30 Sep 2017 - 20:06

    Merci beaucoup pour le tuto, je trouve le rendu vraiment joli ! ^^
    avatar
    Titi | Luna
    FémininAge : 12Messages : 24

    le Mar 10 Oct 2017 - 19:12

    Coucou !
    Merci pour le code !
    avatar
    phenixia74
    FémininAge : 39Messages : 43

    le Mer 11 Oct 2017 - 9:25

    Merci pour le partage ♥
    avatar
    naah
    MasculinAge : 23Messages : 77

    le Sam 14 Oct 2017 - 20:50

    Jolies !
    avatar
    Tiffany.
    FémininAge : 28Messages : 12

    le Dim 15 Oct 2017 - 14:15

    Merci beaucoup
    avatar
    Tornade de Feuille
    FémininAge : 21Messages : 5

    le Dim 15 Oct 2017 - 20:50

    merci ! c'est trop beau !
    avatar
    Lexucio
    MasculinAge : 23Messages : 31

    le Ven 27 Oct 2017 - 9:04

    Merci beaucoup Very Happy
    avatar
    MadSushi
    FémininAge : 21Messages : 25

    le Jeu 2 Nov 2017 - 22:47

    Merci Very Happy
    avatar
    Brunehaut
    FémininAge : 49Messages : 4

    le Ven 10 Nov 2017 - 14:05

    C'est tout simplement magnifique, bravo et merci !
    avatar
    John:
    MasculinAge : 24Messages : 56

    le Ven 10 Nov 2017 - 22:32

    merci!
    avatar
    Fleuve Éternel
    FémininAge : 15Messages : 12

    le Sam 11 Nov 2017 - 19:34

    C'est tellement beau !!! *-*
    avatar
    Mystick
    FémininAge : 32Messages : 99

    le Mer 15 Nov 2017 - 21:06

    Superbe merci !
    Contenu sponsorisé


      La date/heure actuelle est Mar 21 Nov 2017 - 22:22