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 du moment :
LEGO Icons 10331 – Le martin-pêcheur
Voir le deal
35 €

    Bannière réactive

    SweetieYume
    SweetieYume
    FémininAge : 34Messages : 94

    Lun 16 Mai 2011 - 20:11

    Bonsoir bonsoir.

    J'aimerais faire une bannière réactive (avec des liens cliquables) pour mon forum. Le problème, c'est que je ne sais pas du tout comment faire pour coder tout ça. En fait, j'ai un sérieux problème avec le choix du template à modifier et ce que je dois modifier.

    Mon forum est sous phpbb2
    http://takeover.forumactif.org/
    et voici ma bannière: https://2img.net/h/oi51.tinypic.com/e6280z.jpg

    merci d'avance pour votre aide.


    Dernière édition par SweetieYume le Sam 28 Mai 2011 - 11:20, édité 1 fois
    • Revenir en haut
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Lun 16 Mai 2011 - 23:16

    Bonsoir^^

    Alors en théorie, il te faut modifier le template du haut de page afin de mettre une image transparente et des zones cliquables par dessus qui correspondront à tes zones de texte-liens. Il s'agira de "mapper" l'image.
    Je ne peux pas faire grand chose pour le moment, mais j'essaierai de t'aider davantage demain Wink (sauf si tu sais comment faire avec les éléments que je t'ai donné^^).



    sign
    • Revenir en haut
    SweetieYume
    SweetieYume
    FémininAge : 34Messages : 94

    Mar 17 Mai 2011 - 0:05

    Euh merci de m'avoir répondu tout d'abord. Et concernant les éléments...je n'ai rien compris du tout '-' ...

    Alors je veux bien une aide supplémentaire ^_^
    • Revenir en haut
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mar 17 Mai 2011 - 15:46

    Je ne pourrais t'aider que de retour chez moi je pense, donc en fin de semaine, car j'aurais besoin de photoshop pour les mesures du "mapping"... Si en attendant un codeur est motivé pour t'aider y'a pas de souci, sinon j'essaierai ça à partir de vendredi probablement. Wink



    sign
    • Revenir en haut
    SweetieYume
    SweetieYume
    FémininAge : 34Messages : 94

    Ven 20 Mai 2011 - 21:46

    mon sujet est toujours d'actualité '-'
    • Revenir en haut
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Ven 20 Mai 2011 - 23:48

    Salut^^

    Y'a un souci en fait, parce que tu as placé ton fond contre la gauche, or du coup si je centre les zones cliquables ces zones vont se déplacer en fonction de la résolution d'écran des visiteurs... Il faudrait tout centrer pour que ça fonctionne^^



    sign
    • Revenir en haut
    SweetieYume
    SweetieYume
    FémininAge : 34Messages : 94

    Sam 21 Mai 2011 - 11:06

    https://2img.net/h/oi51.tinypic.com/2ephdmo.jpg

    Voilà, j'ai changé tout ça ^_^
    • Revenir en haut
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Sam 21 Mai 2011 - 11:55

    Alors en fait, je me suis mal exprimé je crois, dans l'idée c'est bon^^ mais en fait tu pouvais laisser le texte sur le côté, il faut juste afficher la bannière/fond de façon centrée et non sur la gauche. En fait, je te demandais juste si ça t'ennuyait pas de l'afficher centrée... Désolé de la confusion ^^



    sign
    • Revenir en haut
    SweetieYume
    SweetieYume
    FémininAge : 34Messages : 94

    Sam 21 Mai 2011 - 12:21

    ah ok. Ah non ça ne me dérange pas du tout ^_^
    • Revenir en haut
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Sam 21 Mai 2011 - 12:47

    Ok^^ Je vais essayer de coder tout ça^^



    sign
    • Revenir en haut
    SweetieYume
    SweetieYume
    FémininAge : 34Messages : 94

    Mer 25 Mai 2011 - 13:56

    on m'a oublié ;o;
    • Revenir en haut
    Neva
    Neva
    FémininAge : 33Messages : 18565

    Mer 25 Mai 2011 - 15:12

    Salut,

    Pourrais-tu commencer par faire ton mapping toute seul via ce site : http://www.image-maps.com/ . Il est assez simple d'utilisation mais requiert quelques bases d'anglais. Ensuite, donne-moi les codes et je verrai où les mettre :)



     
    • Revenir en haut
    SweetieYume
    SweetieYume
    FémininAge : 34Messages : 94

    Mer 25 Mai 2011 - 20:04

    euh je comprend rien du tout -_-"
    • Revenir en haut
    Klash
    Klash
    MasculinAge : 44Messages : 20653

    Ven 27 Mai 2011 - 10:03

    Salut voila j'ai coder ta bannière, par contre j'ai été obliger de réduire la taille car dans le template la taille déforme tout, j'ai mit les liens de l'index de ton forum ils seront juste à remplacer par ceux que tu souhaite clic ici pour aller voir



    Bannière réactive 376864signichigo
    • Revenir en haut
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Ven 27 Mai 2011 - 15:01

    Ah merci Klash^^ J'avais commencé mais pas eu le temps de finir avant de partir :s



    sign
    • Revenir en haut
    SweetieYume
    SweetieYume
    FémininAge : 34Messages : 94

    Ven 27 Mai 2011 - 18:21

    C'est super o/ Merci
    • Revenir en haut
    Klash
    Klash
    MasculinAge : 44Messages : 20653

    Ven 27 Mai 2011 - 18:26

    De rien Captain'^^

    Content que cela te convient bon je te passe le template en entier comme tu ne t'y connait pas trop alors à copier coller dans le template overall_header la bannière est déjà hébergé.

    N'oublie pas de changer les liens tu verra tu ne peut pas les ratées.



    Et enfin un petit bout de code css pour obliger la bannière à ce coller en haut du forum à copier coller dans la feuille de style css

    Code:
    .logo
    {
    margin-top: -18px;
    }



    Bannière réactive 376864signichigo
    • Revenir en haut
    SweetieYume
    SweetieYume
    FémininAge : 34Messages : 94

    Ven 27 Mai 2011 - 19:44

    Merci pour tout! Par contre... ça m'a mis tout le forum sur le côté gauche u_u
    • Revenir en haut
    Klash
    Klash
    MasculinAge : 44Messages : 20653

    Ven 27 Mai 2011 - 20:14

    Bizarre ta bien copier coller tout le code car la réaction ne fonctionne pas peut tu me donner ton css pour voir si y'a une erreur.



    Bannière réactive 376864signichigo
    • Revenir en haut
    SweetieYume
    SweetieYume
    FémininAge : 34Messages : 94

    Ven 27 Mai 2011 - 20:33

    voila

    Code:
    body {
    background-position: top center;
        background-repeat: no-repeat;}

    .logo
    {
    margin-top: -18px;
    }

    /*Esthétique générale du forum*/
    tr.post span.gensmall {
    display: none;
    text-shadow : black 1px 1px 2px;}


    body {
    background-repeat: no-repeat;

    }


    /*Soulignement des liens*/
    a:link {text-decoration: none;}
    a:hover{text-decoration: none !important;}
    a { text-decoration: none; }
    a:link { text-decoration: none; }
    a:hover { text-decoration: none; }

    a:hover
    {
    text-shadow : black 1px 1px 2px;

    }


    /*Menu principal*/
    a.mainmenu
    {
    font-variant : small-caps;
    background-color : #909190;
    font-size : 10px;
    padding : 3px;
    border-left : #ffffff 1px solid;
    border-right : #ffffff 1px solid;
    border-top : 3px  #ffffff solid;
    border-bottom : 3px #ffffff solid;
    color: #ffffff ;
    text-shadow : black 1px 1px 2px ;
    -moz-box-shadow: 0px 0px 2px  #010101;
    text-decoration: none;
    -moz-border-radius : 10px;
    padding-bottom : -25px;
    }

    a
    {
    font-variant : small-caps;
    }
    a:hover {
    font-variant : small-caps;
    color : #ffffff;
    text-decoration : none !important;
    cursor : crosshair;
    }

    a.mainmenu:hover
    {
    background-image : URL('');
    text-decoration: none;
    color: #909190 ;
    text-shadow : #010101 1px 1px 2px;
    box-shadow : black 1px 1px 2px
    border-left : #4f584f 1px solid;
    border-left : #ffffff 1px solid;
    border-right : #ffffff 1px solid;
    border-top : 3px  #ffffff solid;
    border-bottom : 3px #ffffff solid;
    -moz-border-radius: 15px; }



    /*bordure du forum*/
    .forumline{

        border-right: 6px #ffffff solid;
     border-left: 6px #ffffff solid;
     border-top: 10px #ffffff solid;
     border-bottom: 10px #ffffff solid;
      -moz-box-shadow: 0px 0px 5px  #010101;
    -moz-border-radius-bottomleft : 12px;
    -moz-border-radius-topright : 12px; }


    /*titres forums (à ne pas modifier)*/
    a.forumlink{
      font-weight: normal;
      font-family:  arial black;
      font-size: 20px;
      font-style: ;
      text-align: center;
     background-color: ;
    display: block;
      letter-spacing : 2px;
      font-variant:italic ;
      text-transform: ;
      color: #f6beab;
      position: relative;
     top: 15px;
    padding-left:10px;
    }

    a.forumlink:hover{
      font-weight: bold;
      font-family:  arial black;
      font-size: 20px;
      font-style: normal;
      text-align: center;
     background-color:;
    display: block;
      letter-spacing : 2px;
      font-variant:italic ;
      text-transform: ;
      color: #ef9b87;
      top:15px;
    text-shadow : #083266 2px 0px 2px;
    position: relative;}


    /*colonnes derniers messages*/
    .entête-fstat {
    color: #E8C9C9;
    font-size: 10px;
    font-weight: bold;}


    .forum-description1 {
    background: #616265; -moz-box-shadow: 0px 0px 3px #010101; border-right:3px #f0eceb solid; border-left: 3px #f0eceb solid; border-top: 3px #f0eceb  solid; border-bottom: 3px #f0eceb solid;
    -moz-border-radius-bottomleft : 0px;
    -moz-border-radius-topright :15px;
    -moz-border-radius-bottomright : 0px;
    -moz-border-radius-topleft :15px;
    }

    .forum-description {
    background: #616265; -moz-box-shadow: 0px 0px 3px #010101; border-right:3px #f0eceb solid; border-left: 3px #f0eceb solid; border-top: 3px #f0eceb  solid; border-bottom: 3px #f0eceb solid;
    -moz-border-radius-bottomleft : 15px;
    -moz-border-radius-topright :0px;
    -moz-border-radius-bottomright :15px;
    -moz-border-radius-topleft :0px;
    }

    .forum-stats {
          text-shadow: #010101 1px 0px 2px;
    font-family: calibri; georgia;
    color: #E8C9C9;
     font-size: 8px;
          font-style: bold;
          height: 14px;
          left: 0px;
          padding: 3px;
          position: relative;
          text-align: center;}

    /*Encadrement du profil*/
    .cadreprofil {
    background: #616265;
        -moz-box-shadow:  0px 0px 4px  #010101;
    -moz-border-radius:10px;
    Border-top:6px solid#616265;
    border-bottom:6px solid#616265;
    border-left:6px solid #616265;
    border-right: 6px solid #616265;
    }

    /*Nom des utilisateurs*/
    .name {
    text-shadow: 1px 0px 2px #010101;
    text-align: center;
    font-size: 15px;
    position: relative;
     }

    /*esthétique des catégories (a ne pas modifier)*/
    .categorie{
    margin: 15px 0px;
    border-radius: 15px:
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;}

    .titrecategorie{
    -moz-box-shadow:  0px 0px 4px  #010101;
    margin-left: 225px;
    padding: 3px;
    display: block;
    width: 450px;
    margin-top: -15px;
    -moz-border-radius-bottomleft : 0px;
    -moz-border-radius-topright :15px;
    -moz-border-radius-bottomright : 0px;
    -moz-border-radius-topleft :15px;
    background-color: #fff;
    color: #FFF;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    text-align: center}
    th,p
    {
    font-variant : small-caps;
    font-size : 10px;
    }

    /*largeur du forum*/
    table
    {
    max-width: 950px;

    }

    /*esthétique des posts*/
    tr.post td {
    padding-left:35px;
    padding-right : 35px;
    text-align : justify ;
    color:#ffffff;}

    tr.post span.gensmall { display: none; }


    input,textarea, select
    {
    -moz-border-radius: 5px 5px 5px 5px;
    padding-left: 4px;
    border: 2px solid #ffffff;
    }

        /* QEEL */
        .tableauqueel {
      background-color: #8C8D8C;
       
        border-right: 6px #ffffff solid;
     border-left: 6px #ffffff solid;
     border-top: 10px #ffffff solid;
     border-bottom: 10px #ffffff solid;
      -moz-box-shadow: 0px 0px 5px  #010101;
    -moz-border-radius-bottomleft : 12px;
    -moz-border-radius-topright : 12px; }


      .partiedroite {
    font-size : 12px ;
    border-left : 2px dotted # B7E5CD;
    padding-left : 10px;
    text-align:center; }


        .groupes {
        background-color:#E6F2AE;
        border: 1px solid #E6F2AE;
        height: 9px;
        padding-right:5px;
        padding-left: 5px;
        font: normal 12px arial;
        text-align:center;
        font-weight: bold;
        text-transform: none;
        font-variant: small-caps;
        text-shadow: #ffffff 2px 2px 2px;
        }

        /* FIN */


    /*PA*/
    {
    background-color: #ffffff; }



    .opac
    {
    opacity: 0.5;
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    filter: alpha(opacity=50);
    }

    .opac:hover
    {
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    }


    /*fichepv*/
    .infobulle{position: relative;z-index: 1;}

    .infobulle:hover{background-color: transparent;z-index: 50;}

    .infobulle span{
    position: absolute;
    background-color: #000000;
    padding: 0px;
    left: -980px;
    visibility: hidden;
    color: #FFFFFF;}

    .infobulle span img{padding: 0px;}

    .infobulle:hover span{
    visibility: visible;
    bottom: 0px;
    left: 1px;
    width: 500px ;
    background: #dadada;
    width: 500px;
    border-top: 2px solid #b5b5b5;
     font-size:11px;
    color: #8e8e8e;}

    .bouton {
      background-color: #b5b5b5;
      width:135px;
      height:32px;
      font-size:11px;
      color: #8e8e8e;
      padding:-5px;
     -moz-border-radius-bottomleft : 0px;
    -moz-border-radius-topright :15px;
    -moz-border-radius-bottomright : 0px;
    -moz-border-radius-topleft :0px;
    border-top : 3px  #ffffff solid;
    border-right : 1px #ffffff solid;
    }

    .infobulle span h2{
      margin:0;
      padding:0;
      font-size:14px;
      color: #8e8e8e;}

    • Revenir en haut
    Klash
    Klash
    MasculinAge : 44Messages : 20653

    Sam 28 Mai 2011 - 8:35

    Salut alors voila j'ai trouver le problème c'était trois fois rien tu à un double body et sur la table tu na pas demander à ce qu'elle soit centrer je t'es corriger aussi le body pour mettre la couleur de fond .





    Bannière réactive 376864signichigo
    • Revenir en haut
    SweetieYume
    SweetieYume
    FémininAge : 34Messages : 94

    Sam 28 Mai 2011 - 11:20

    Parfait ! Merci beaucoup pour ton aide ^_^
    • Revenir en haut
    Klash
    Klash
    MasculinAge : 44Messages : 20653

    Sam 28 Mai 2011 - 11:23

    De rien avec plaisir^^



    Bannière réactive 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 - 6:41