Fixer une horloge de navigation

[Oz-Chan]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : 26.04.2017
Lien du forum : http://ask-question-later.forumactif.com/

Description du problème

Bonjour,

je viens demander une petite aide pour fixer l'horloge de navigation sur mon forum. Celle-ci se déplace quand la résolution de notre écran change et j'aimerai que cette dernière reste bien en place pour éviter qu'elle cache des lettres du titre.

Voici le codage de la montre :

Code:



/* --- NAVIGATION --- */
 
                  /*NAVIGATION*/

    /*Bloc de l'horloge*/
    .nav_bloc {
      background-image: url('http://img15.hostingpics.net/pics/909229montre2.png');
      width: 300px;
      height: 300px;
      position: relative;
      display: block;
      margin-top: -190px;
    }

    /*Trucs pour les liens*/
    .navv {
      position: absolute;
      display: block;
      z-index: 2;
    }

    /*Aiguille*/
    #nav_aiguille {
      background-image: url('http://img15.hostingpics.net/pics/418642aiguille.png');
      width: 14px;
      height: 244px;
      bottom: 32px;
      left: 140px;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      transition: 0.5s;
      -webkit-transition: 0.5s;
      z-index: 1;
    }

    /*Positionnement des liens*/
    #accueil {
      width: 100px;
      height: 27px;
      bottom: 260px;
      left: 101px;
      -webkit-transform:rotate(1deg);
      transform:rotate(1deg);
    }
    #rechercher {
      width: 131px;
      height: 35px;
      bottom: 200px;
      left: 184px;
      -webkit-transform:rotate(57deg);
      transform:rotate(57deg);
    }
    #membres {
      width: 94px;
      height: 28px;
      bottom: 100px;
      left: 218px;
      -webkit-transform:rotate(109deg);
      transform:rotate(109deg);
    }
    #groupes {
      width: 99px;
      height: 32px;
      bottom: 21px;
      left: 144px;
      -webkit-transform:rotate(157deg);
      transform:rotate(157deg);
    }
    #profil {
      width: 79px;
      height: 28px;
      bottom: 25px;
      left: 55px;
      -webkit-transform:rotate(205deg);
      transform:rotate(205deg);
    }
    #mp {
      width: 115px;
      height: 39px;
      bottom: 120px;
      left: -31px;
      -webkit-transform:rotate(265deg);
      transform:rotate(265deg);
    }
    #off, #on {
      width: 80px;
      height: 31px;
      bottom: 225px;
      left: 26px;
      -webkit-transform:rotate(315deg);
      transform:rotate(315deg);
    }
    #s_inscrire {
      width: 107px;
      height: 37px;
      bottom: 120px;
      left: -27px;
      -webkit-transform:rotate(263deg);
      transform:rotate(263deg);
    }

    /*Mouvement de l'aiguille selon le lien survolé*/
    #accueil:hover ~ #nav_aiguille {
      -webkit-transform:rotate(2deg);
      transform:rotate(2deg);
    }
    #rechercher:hover ~ #nav_aiguille {
      -webkit-transform:rotate(57deg);
      transform:rotate(57deg);
    }
    #membres:hover ~ #nav_aiguille {
      -webkit-transform:rotate(109deg);
      transform:rotate(109deg);
    }
    #groupes:hover ~ #nav_aiguille {
      -webkit-transform:rotate(157deg);
      transform:rotate(157deg);
    }
    #profil:hover ~ #nav_aiguille {
      -webkit-transform:rotate(205deg);
      transform:rotate(205deg);
    }
    #mp:hover ~ #nav_aiguille {
      -webkit-transform:rotate(265deg);
      transform:rotate(265deg);
    }
    #s_inscrire:hover ~ #nav_aiguille {
      -webkit-transform:rotate(263deg);
      transform:rotate(263deg);
    }
    #on:hover ~ #nav_aiguille, #off:hover ~ #nav_aiguille {
      -webkit-transform: rotate(315deg);
      transform: rotate(315deg);
    }


Je vous remercie de votre futur aide et bonne journée !

[tupac]

Bonjour Oz-Chan,

Dans votre css repéré le code suivant.

Code:

.nav_bloc {
    background-image: url(http://img15.hostingpics.net/pics/909229montre2.png);
    display: block;
    height: 300px;
    margin-top: -190px;
    position: relative;
    width: 300px;
}

Remplacez le par celui la.

Code:

.nav_bloc {
    background-image: url(http://img15.hostingpics.net/pics/909229montre2.png);
    display: block;
    height: 300px;
    position: absolute;
    width: 300px;
    top: 150px;
    left: 200px;
}

J'ai supprimé le margin top que j'ai remplacé par un top et un left ce qui a pour effet de fixer les marges entre votre contenu et les bords du forum puis j'ai également remplacé la position relative par une absolute, normalement ça devrait fonctionner.

[Oz-Chan]

Bonjour,

Oh, c'était tout bête en fait, merci beaucoup ! Je cherchais dans le coin en plus ahah.

Je vous remercie, tout marche bien.

Belle journée !