Partagez | 
 

 Pépin codage :c

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage

Je suis
HellDiamond
avatar
MODERATEUR - Photoshop

Logiciels : toshopinou cs4♥
Féminin Messages : 83
Date d'inscription : 29/06/2011
Age : 19
Localisation : toshopinou♥

MessageSujet: Pépin codage :c   Ven 20 Avr - 1:10


Coucou! J'ai encore un pépin niveau codage, à vrai dire, j'ai pas un pépin puisque je sais pas comment faire; bref, Mon forum est sous Forumactif

Voici un screen d'un forum dont j'aimerais bien faire "pareil" en quelque sorte xp

Sur la gauche du forum, vous voyez trois petites boîtes? Eh bien moi il m'en faudrait une et peut-être plusieurs mêmes *a une idée qui germe dans la tête*
Avec ses petites boîtes, quand on passe la souris dessus, le contenu s'affiche, voici l'exemple ci-dessous



Je ne sais pas du tout comment placer la boîte ni comment faire pour qu'elle s'affiche dès qu'on passe la souris dessus.. & je ne sais pas du tout si quelqu'un arrivera à faire çà mais je tente quand même car qui ne tente rien n'a rien!
Merci d'avance à celui/celle qui pourra m'aider ! :3


Dernière édition par HellDiamond le Mer 2 Mai - 5:24, édité 1 fois
Revenir en haut Aller en bas

Je suis
Kinoko
avatar
ADMIN - Photoshop

Logiciels : Photofiltre, Photoshop CS3/CS5, Illustrator et Flash CS3, InDesign CS5
Féminin Messages : 1607
Date d'inscription : 20/08/2010
Age : 25

MessageSujet: Re: Pépin codage :c   Mar 1 Mai - 8:14


Moi je sais pas faire en tout cas >.< j'espère que tu trouveras quelqu'un pour t'aider
Revenir en haut Aller en bas
http://tsuki-no-kioku.forumactif.com

Je suis
Elsaelly
avatar
MEMBRE - Photoshop

Logiciels : Photoshop CS5 et Photofiltre studio
Féminin Messages : 430
Date d'inscription : 16/03/2012
Age : 17
Localisation : Quelque part ~

MessageSujet: Re: Pépin codage :c   Mar 1 Mai - 23:43


Bonjour :3

Alors alors j'ai jamais fait sa mais avec mes quelques connaissances je pense pouvoir t'aider ^^
Je ne sais pas mettre les boîtes à droite mais à gauche x)
Est ce que,ce type de boites (les emplacements ect) te conviennent ?:
http://art-en-ciel.forumactif.com/h4-testhelldiamond
Je te donnerais le code si c'est sa ;)
Revenir en haut Aller en bas
http://ihatsu.asiat-world.com/

Je suis
HellDiamond
avatar
MODERATEUR - Photoshop

Logiciels : toshopinou cs4♥
Féminin Messages : 83
Date d'inscription : 29/06/2011
Age : 19
Localisation : toshopinou♥

MessageSujet: Re: Pépin codage :c   Mer 2 Mai - 3:47


Oui, ça me convient çà! *-*
Revenir en haut Aller en bas

Je suis
Elsaelly
avatar
MEMBRE - Photoshop

Logiciels : Photoshop CS5 et Photofiltre studio
Féminin Messages : 430
Date d'inscription : 16/03/2012
Age : 17
Localisation : Quelque part ~

MessageSujet: Re: Pépin codage :c   Mer 2 Mai - 4:09


Super ^^ Donc, voici les instructions à suivre Smile
Colle le code ci-dessous dans la template Overall_header(juste après "body") .
Code:
  <ul id="conteneur">
            <li>
              <div class="block">
                  <a  href="http://milopub.forumactif.org/" title="Visiter MiloPUb">
                    <img src="http://sd-2.archive-host.com/membres/images/72698231053381489/MiloPub.png" alt="" border="0" />
                  </a>
                  <span class="lien_bas">
                      <a  href="#">En savoir plus</a>
                  </span>
              </div>
            </li>
            <li>
            <div class="block">
                  <a  href="http://www.spick.biz/">
                    <img src="http://i60.servimg.com/u/f60/14/60/08/49/883112.jpg" alt="" border="0" />
                  </a>
                  <span class="lien_bas">
                      <a href="http://www.themes-fa.com/">En savoir plus.....</a>
                  </span>
              </div>
            </li>

            <li>
              <div class="block">
                <a  href="http://lesforumsde.forumactif.com/">
                  <img src="http://sd-1.archive-host.com/membres/images/142586199450897653/LFD/logo88-312.gif" alt="" border="0" />
                </a>
                <span class="lien_bas">
                  <a href="http://lesforumsde.forumactif.com/" title="Voir la pub">En savoir plus.....</a>
                </span>
              </div>
            </li>

            <li>
              <div class="block">
                <a target="_blank" href="http://creation.niceboard.com/forum.htm">
                    <img src="http://i65.servimg.com/u/f65/11/95/30/70/4511.jpg" border="0" alt=""  />
                </a>
                <span class="lien_bas">
                  <a href="http://www.themes-fa.com/profile.forum?mode=viewprofile&u=513">En savoir plus.....</a>
                </span>
              </div>
            </li>

        </ul>
<script type="text/javascript">
jQuery(function() {
jQuery('#conteneur .block').stop().animate({'marginLeft':'75px'},1000);
jQuery('#conteneur>li').hover(
function () {                      jQuery('.block',jQuery(this)).stop().animate({'marginLeft':'2px'},200);
},
function () {                    jQuery('.block',jQuery(this)).stop().animate({'marginLeft':'75px'},200);
}
);
});
</script>
Et dans le CSS:
Code:

/* LISTE */
ul#conteneur {
position: fixed;
margin: 0;
padding: 0;
top: 50px;
right: 0px;
list-style: none;
z-index: 9999;
}
/* ÉLÉMENT DE LA LISTE */
ul#conteneur li {
width: 98px;
margin: 6px 0;
padding: 0;
}
/* BLOC DE CHAQUE MENU */
.block {
background: #333;
display: block;
width: 98px;
border: 1px solid #000;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
padding: 5px;
}
/* SPAN CONTENANT LE LIEN DU BAS */
.lien_bas {
display: block;
padding: 2px;
background: #555555;
border: 1px solid #000;
font: 10px Arial;
font-style: italic;
}
/* LIEN DU BAS */
.lien_bas a {
text-decoration: none;
color: #fff !important;
outline: none;
}
/* LIEN DU BAS AU SURVOL */
.lien_bas a:hover {
color: #76c0ff !important;
}

Si tu as un soucis avec le code , dis le moi ;)
Revenir en haut Aller en bas
http://ihatsu.asiat-world.com/

Je suis
HellDiamond
avatar
MODERATEUR - Photoshop

Logiciels : toshopinou cs4♥
Féminin Messages : 83
Date d'inscription : 29/06/2011
Age : 19
Localisation : toshopinou♥

MessageSujet: Re: Pépin codage :c   Mer 2 Mai - 5:24


Aucun problème avec les codes x), mais y'aurait pas un moyen de voir un petit bout qui dépasse et quand on passe la souris dessus le contenu apparaît ? Parce que là çà empiète un peu sur le header :c
Revenir en haut Aller en bas

Je suis
Elsaelly
avatar
MEMBRE - Photoshop

Logiciels : Photoshop CS5 et Photofiltre studio
Féminin Messages : 430
Date d'inscription : 16/03/2012
Age : 17
Localisation : Quelque part ~

MessageSujet: Re: Pépin codage :c   Mer 2 Mai - 7:03


Je verrais sa demain ^^
Revenir en haut Aller en bas
http://ihatsu.asiat-world.com/

Je suis
HellDiamond
avatar
MODERATEUR - Photoshop

Logiciels : toshopinou cs4♥
Féminin Messages : 83
Date d'inscription : 29/06/2011
Age : 19
Localisation : toshopinou♥

MessageSujet: Re: Pépin codage :c   Mer 2 Mai - 7:37


Merci d'avance ! Smile
Revenir en haut Aller en bas

Je suis
HellDiamond
avatar
MODERATEUR - Photoshop

Logiciels : toshopinou cs4♥
Féminin Messages : 83
Date d'inscription : 29/06/2011
Age : 19
Localisation : toshopinou♥

MessageSujet: Re: Pépin codage :c   Lun 7 Mai - 0:01


> J'ai plus ou moins réussi à changer la position en bidouillant quelques trucs, résolu donc, merci quand même♥
Revenir en haut Aller en bas

Je suis
Elsaelly
avatar
MEMBRE - Photoshop

Logiciels : Photoshop CS5 et Photofiltre studio
Féminin Messages : 430
Date d'inscription : 16/03/2012
Age : 17
Localisation : Quelque part ~

MessageSujet: Re: Pépin codage :c   Lun 7 Mai - 3:10


D'accord Very Happy
Revenir en haut Aller en bas
http://ihatsu.asiat-world.com/

Je suis
Contenu sponsorisé


MessageSujet: Re: Pépin codage :c   


Revenir en haut Aller en bas
 

Pépin codage :c

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
foligraph ☁ communauté graphique. :: THREE ☁ la solidarité, c'est bon pour le cœur ... :: codage :: problèmes et bugs :: problèmes résolus-