Fixer une horloge de navigation

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

Résolu Fixer une horloge de navigation

Message par Oz-Chan le Mer 26 Avr 2017 - 15:23

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 !


Dernière édition par Oz-Chan le Jeu 27 Avr 2017 - 9:28, édité 1 fois
avatar

Oz-Chan
****

Messages : 260
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Fixer une horloge de navigation

Message par tupac le Jeu 27 Avr 2017 - 4:44

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.

avatar

tupac
Membre actif

Masculin
Messages : 2494
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fixer une horloge de navigation

Message par Oz-Chan le Jeu 27 Avr 2017 - 9:28

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 !
avatar

Oz-Chan
****

Messages : 260
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan 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