Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Bouton en mouvement

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

Résolu Bouton en mouvement

Message par ScorpionWorms le Sam 31 Aoû 2013 - 15:40

Bonjour,

Je demande un petit coup de main concernant mon forum, pour ajouter des fonctionnalités dessus, j'ai "créé" des boutons/onglets qui permettent de se rediriger vers d'autres sites internet. Ces boutons à la forme rectangulaire sont placés sur la gauche du forum en page d'accueil. Un peu la même chose que les boutons twitter et facebook qu'il y a sur forumactif...
Il sont en partie cachés sur la gauche, car mon but est de les faire se déplacer vers la droite à l'approche de la souris, c'est notamment cette opération qui me pose problème, pendant un temps elle a très bien marché, mais ce n'est plus le cas Mad 

Si quelqu'un pouvait me proposer un solution Smile 

Les boutons apparaissent sous cette forme :
http://worms-uni67.monally.com/h3-onglets-maj

Voici le codage que j'ai utilisé :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Scorproduction</title>


<style>

ul#bouton {
position: fixed;    /* On fixe les boutons */
margin: 0px;        /*  marge extérieure */
padding: 0px;        /*  marge intérieure  */
top: 0px;          /* positionné à 50px du haut  */
left: 0px;          /* positionné à 0px du bord gauche */
list-style: none;    /* pas de style pour la liste */
z-index:9999;        /* place les boutons au dessus de tout le reste */
}

ul#bouton li {
width: 90px;          /* largeur du bouton */
margin-bottom: 4px;    /* marge inférieure */
}

ul#bouton li a {
display: block;      /* defini en bloc */
margin-left: -75px;  /* marge extérieure négative gauche */
width: 90px;          /* largeur */
height: 50px;          /* hauteur */
background-color: rgb(0, 0, 100, 0.5);  /* couleur de fond */
background-color: rgb(0, 0, 100, 0.5);
background-repeat:no-repeat;  /* répétition du fond */
background-position:center center;  /* position du fond */
background-position:center;  /* position du fond */
border-radius:0px 9px 9px 0px;        /* angles arrondis */
border:1px solid #323630;            /* bordure */
box-shadow: 0px 0px 5px #000;        /* ombre portée */
opacity: 1;                        /* opacité */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); /* opacité pour IE */
}



ul#bouton .ogame a{
    background-image: url(http://i70.servimg.com/u/f70/17/13/74/77/o10.gif);
}
ul#bouton .board a{
    background-image: url(http://i70.servimg.com/u/f70/17/13/74/77/o10.gif);
}
ul#bouton .warrider a{
    background-image: url(http://i70.servimg.com/u/f70/17/13/74/77/o10.gif);
}
ul#bouton .gamewinner a{
    background-image: url(http://i70.servimg.com/u/f70/17/13/74/77/o10.gif);
}
ul#bouton .speedsim a{
    background-image: url(http://i70.servimg.com/u/f70/17/13/74/77/o10.gif);
}
</style>

    </head>

    <body>

        <ul id="bouton">
 
          <li class="ogame"><a target="_blank" href="http://www.ogame.fr/"></a></li>
            <li class="board"><a target="_blank"href="http://board.ogame.fr/index.php?page=Index"></a></li>
            <li class="warrider"><a target="_blank" href="http://www.war-riders.de/?lang=fr&uni=67&page=search&post=1&type=ally&name=Worms"></a></li>
            <li class="gamewinner"><a target="_blank" href="http://www.gamewinner.fr/ogame-simulateur-combat.html"></a></li>
            <li class="speedsim"><a target="_blank" href="http://websim.speedsim.net/index.php?lang=fr"></a></li>
        </ul>

        <script type="text/javascript">
            $(function() {
                $('#bouton a').stop().animate({'marginLeft':'-75px'},1000);

                $('#bouton > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                      $('a',$(this)).stop().animate({'marginLeft':'-75px'},200);
                    }
                );
            });
        </script>

  </body>
</html>
Je pose ensuite ce code dans Affichage>Généralités> Message d'accueil :

Code:
<iframe src="http://worms-uni67.monally.com/h3-onglets-maj"
style=
"
position: fixed;
top: 70px;
left: 0px;
background-color: transparent ! important;
height: 400px;  
width: auto;
border: none !important;
overflow: hidden ! important;
"
allowtransparency="true" scrolling="no" frameborder="no">
</iframe>
Je pense qu'il y a une erreur dans ces codages, mais je ne vois pas lesquelles Crying or Very sad 

Help Mr. Green


Dernière édition par ScorpionWorms le Sam 31 Aoû 2013 - 17:16, édité 1 fois

ScorpionWorms
Nouveau membre

Messages : 4
Inscrit(e) le : 31/08/2013

http://worms-uni67.monally.com/
ScorpionWorms a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton en mouvement

Message par Adam_sfp le Sam 31 Aoû 2013 - 16:23

Bonjour

il faut mettre la librairie jquery dans votre code sur la page HTML
Après <head>
mettez
Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Cdt.
avatar

Adam_sfp
Membre actif

Masculin
Messages : 4279
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton en mouvement

Message par ScorpionWorms le Sam 31 Aoû 2013 - 17:15

J'ai essayé, et çà marche, merci beaucoup Adam pour la rapidité et l'efficacité! Affirmatif 

ScorpionWorms
Nouveau membre

Messages : 4
Inscrit(e) le : 31/08/2013

http://worms-uni67.monally.com/
ScorpionWorms a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum