Le Forum du Zèbre et des Zamiboostiens

WA4 et Menus LAVALAMP

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

Résolu WA4 et Menus LAVALAMP

Message par Jeffdulac le Mer 18 Mai 2016 - 22:14

Bonjour à toutes et à tous,

J'ai posé, il y a quelque années, un sujet concernat une inclusion de mega menu dynamique dans Webacappella.
J'ai supprimer mon site Jeffdulac, pour en remonter Sealex (c'est tout frais).
J'ai trouvé un menu lavaLamp assez sympa, pour l'insérer dans mes maquettes.

Or je n'arrive pas à faire exactement ce que je veux avec.
Je veux faire des sous menus !

Pourtant je sais le faire en codage, mais là bizarrement ça ne fonctionne pas
(des li et des ul, c'est pas compliqué, hé ben si !)

Je pense que ça vient du css, (voir du js), mais pareil je ne vois pas ce qui cloche.
J'ai déjà réussi à ajouter des onglets, bien positionner le menu dans les maquettes.
J'aime bien ce petit indice qui va sur les onglets au survol Smile
Donc je viens chez les Zèbres pour poser ce sujet, qui je pense, ravira les fondus de codage  studieux

Mon menu en test : ICI
Qui risque d'évoluer si je trouve du "bon" code Plaf

Merci d'avance Idea


Dernière édition par Jeffdulac le Ven 27 Mai 2016 - 18:23, édité 1 fois
avatar
Jeffdulac
Soigneur
Soigneur

Sagittaire Coq
Nombre de messages : 880
Age : 71
Ville (CP) : (83700)
Date d'inscription : 20/09/2008

http://www.sealex.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par B@byl le Jeu 19 Mai 2016 - 9:53

Bonjour Jeff

Grâce à toi je découvre les menus style LavaLamp
Très sympa ton menu J'aime beaucoup.
Dans ce domaine on n’arrêtera jamais d'apprendre et de découvrir des choses sympas.
Et oui tu me donnes de quoi continuer à m'amuser.  Very Happy

Après une recherche j'ai trouvé ce lien un menu du même style mais qui fonctionne sans javascript, uniquement du css, juste 2 codes à mettre et à modifier selon les besoins.

Pour le faire avec tes images de menu qui vont mieux avec ton design, il y a quelques modifs à faire dans le css car les images ne sont pas de la même taille.

Je te mets le css modifié (pour t'éviter trop de temps sur l'écran, attention les yeux) qui collera avec tes images, pour les détails à mettre au point pas de soucis je sais que tu sauras te débrouiller.
J'ai mis une police Arial mais à toi de voir, c'est quand même celle que je te conseille car sur tablette une police fantaisie est souvent remplacée par Arial et les curseurs risquent de ne plus être au bon endroit, avec Arial pas de soucis elle est prise en charge sur tous les supports.

Code:
<style type="text/css">
#nav,#nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    background: url('light.png') no-repeat scroll 0 0 transparent;
    clear: both;
    font-size: 12px;
    height: 49px;
    padding: 0 0 0 0;
    position: relative;
    width: 957px;
 font-family: Arial,sans-serif;
}
#nav ul {
    background-color: #d7d7d7;
    border:1px solid #222;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    left: -9999px;
    overflow: hidden;
    position: absolute;
    top: -9999px;
    z-index: 2;

    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);

    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;

    -moz-transition: -moz-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    transition: transform 0.1s linear;
}
#nav li {
    background: url('sep.png') no-repeat scroll right 5px transparent;
    float: left;
    position: relative;
}
#nav li a {
    color: #575757;
    display: block;
    float: left;
    font-weight: normal;
    height: 26px;
    padding: 20px 20px 0;
    position: relative;
    text-decoration: none;
  
}
#nav li:hover > a {
    color: #2c2c2c;
}
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {

    outline: 0 none;
}
#nav li:hover ul.subs {
    left: 0;
    top: 46px;
    width: 180px;

    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}
#nav ul li {
    background: none;
    width: 100%;
}
#nav ul li a {
    float: none;
}
#nav ul li:hover > a {
    background-color: #e3e3e3;
    color: #2c2c2c;
}
#lavalamp {
    background: url('darkred.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 24px;
    position: absolute;
    top: 5px;
    width: 64px;

    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#nav li:nth-of-type(1):hover ~ #lavalamp {
    left: 24px;
}
#nav li:nth-of-type(2):hover ~ #lavalamp {
    left: 115px;
}
#nav li:nth-of-type(3):hover ~ #lavalamp {
    left: 220px;
}
#nav li:nth-of-type(4):hover ~ #lavalamp {
    left: 340px;
}
#nav li:nth-of-type(5):hover ~ #lavalamp {
    left: 435px;
}
#nav li:nth-of-type(6):hover ~ #lavalamp {
    left: 520px;
}
#nav li:nth-of-type(7):hover ~ #lavalamp {
    left: 615px;
}
#nav li:nth-of-type(8):hover ~ #lavalamp {
    left: 700px;
}
</style>

Si tu mets ce menu dans une maquette on aura le même souci d'arrière plan pour les sous menu que tu avais rencontré avec ton mega menu il faudra donc utiliser la même ruse pour que les sous menus soient au premier plan sur les pages.

@ +

_________________
B@byl
"La qualité d'une vie n'est pas dans l'accumulation mais dans le partage"
avatar
B@byl
Conservateur
Conservateur

Balance Serpent
Nombre de messages : 5844
Age : 63
Ville (CP) : Pas d'entraide par MP ou mail
Date d'inscription : 07/02/2007

http://www.assmat-nantes.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par Jeffdulac le Jeu 19 Mai 2016 - 14:34

Salut B@byl,

Ah que j'ai bien fait de poser le sujet !

Très sympa ton menu J'aime beaucoup.
Sympa ton appréciation !
Et quel bonheur ta réponse, le code css et tout et tout !
Génialissime sans le js, et aussi beau comme menu.
Si tu mets ce menu dans une maquette on aura le même souci d'arrière plan pour les sous menu que tu avais rencontré avec ton mega menu il faudra donc utiliser la même ruse pour que les sous menus soient au premier plan sur les pages
Ah oui, la fermeture div juste avant !

C'est vrai qu'ils sont pas mal du tout ces "lavaLamp" !

Comme d'hab, toujours aussi réactive et efficace, merci  B@byl  cheers
Je teste cela tout de suite.

Je vais faire attention à mes yeux (avec mes lunettes de soleil ça va mieux) Smile
avatar
Jeffdulac
Soigneur
Soigneur

Sagittaire Coq
Nombre de messages : 880
Age : 71
Ville (CP) : (83700)
Date d'inscription : 20/09/2008

http://www.sealex.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par Jeffdulac le Jeu 19 Mai 2016 - 22:10

Bonsoir,

Je me demande si je sais encore coder Plaf
Après moultes essais, en jouant avec les class, les id, les ul ou les li, pas moyen de faire des sous-sous menus fonctionnels.
Embarassed

Si tu vois le truc B@byl, ça arrangerai bien mes yeux et mes neurones, je fatigue  Sleep

Smile
avatar
Jeffdulac
Soigneur
Soigneur

Sagittaire Coq
Nombre de messages : 880
Age : 71
Ville (CP) : (83700)
Date d'inscription : 20/09/2008

http://www.sealex.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par B@byl le Ven 20 Mai 2016 - 19:04

Salut jeff

Ah oui là ça se complique, et je t'avoue que je ne suis pas sure d'y arriver mais je vais regarder de près, mais ce sera après le weekend car il va être très chargé.
c'est le css qu'il faut faire spécialement pour ssubs car il doit forcément être différent de subs menu, si niveau couleur c'est pareil, niveau emplacement ce sera forcément différent par raport à l'emplacement du subs menu.

Je te tiens au courant semaine prochaine

@ +

_________________
B@byl
"La qualité d'une vie n'est pas dans l'accumulation mais dans le partage"
avatar
B@byl
Conservateur
Conservateur

Balance Serpent
Nombre de messages : 5844
Age : 63
Ville (CP) : Pas d'entraide par MP ou mail
Date d'inscription : 07/02/2007

http://www.assmat-nantes.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par Jeffdulac le Ven 20 Mai 2016 - 21:15

Hello B@byl,

c'est le css qu'il faut faire spécialement pour ssubs car il doit forcément être différent de subs menu
Bien sûr, c'est d'ailleurs ce que j'ai commencé à faire, mais je vois pas le truc !
Une modif qui a donné une arborescence correcte de sous sous menu,
est d'avoir passé tous les ID en CLASS du css, mais évidement plus de lecture correcte des images.
Donc je suppose que c'est dans cette voie qu'il faut investiguer.
ce sera après le weekend car il va être très chargé
Pas de soucis, comme je t'ai dit "il n'y a pas le feu au sujet"  Wink

Bon weekend B@byl
avatar
Jeffdulac
Soigneur
Soigneur

Sagittaire Coq
Nombre de messages : 880
Age : 71
Ville (CP) : (83700)
Date d'inscription : 20/09/2008

http://www.sealex.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par B@byl le Mar 24 Mai 2016 - 17:40

Bonjour Jeff

De mon côté je n'ai pas réussi à intégrer un 2ème niveau de sous menu à partir de ton css.
Je suis donc repartie d'un menu déroulant 2 niveaux et en lui ajoutant le marqueur et ça marche ici
Seul truc je n'ai pas réussi à placer les séparateurs dans la barre principale sans qu'ils se mettent aussi partout dans les sous menus (pas beau), j'ai donc laissé sans séparateurs.

Code css :
Code:
#menu,#menu ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;  
 
}

#menu {
    background: url('light.png') no-repeat scroll 0 0 transparent;
  padding:10px;
  margin:5px 0 0 0;
  list-style: none;
  text-align: left;
  font-size: 13px;
  height: 49px;

}

#menu ul {
     background-color: #d7d7d7;
font-size: 12px;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
  padding:0;
  margin:10px 0 0 0;
  list-style: none;
  text-align: center;
border-right: 1px black;
 
}

#menu li {
  display:inline-block;
  vertical-align: top;
  position: relative;
}
#menu li li {
  display:inherit;
}
#menu a {
  display:block;
  padding:5px 10px;
  text-decoration: none;
  color:#575757;
  font-family:arial;
}
#menu ul li a {
  padding:5px 8px;
}
#menu ul {
  position: absolute;
  z-index: 1000;
  min-width:100%;
  white-space: nowrap;
  text-align: left;
}
#menu ul ul {
  left:100%;
  top:0;
  overflow: hidden;
  max-width: 0;
  min-width: 0;
  transition: 0.3s all;
}
#menu ul li:hover ul {
  max-width: 30em;
}
#menu ul li {
  max-height:0;
  overflow: hidden;
  transition:all 0.8s;
}
#menu li li li {
  max-height: inherit;
}
#menu li:hover li {
  max-height: 15em;
  overflow: visible;
}





#menu li:hover {
    background-image:none;
}
#menu li:hover a, .menu li li:hover a {

    color:#000
}
#menu li:hover li a, #menu li:hover li li a {
    color: #575757;
  
}
#menu li:hover a, #menu li li:hover a, #menu li li li:hover a {

    color:#000
}

#menu li:hover, #menu a:focus, #menu a:hover, #menu a:active {

    outline: 0 none;
}


#lavalamp {
    background: url('darkred.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 24px;
    position: absolute;
    top: 0;
    width: 64px;

    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#menu li:nth-of-type(1):hover ~ #lavalamp {
    left: 24px;
}
#menu li:nth-of-type(2):hover ~ #lavalamp {
    left: 100px;
}
#menu li:nth-of-type(3):hover ~ #lavalamp {
    left: 190px;
}
#menu li:nth-of-type(4):hover ~ #lavalamp {
    left: 290px;
}
#menu li:nth-of-type(5):hover ~ #lavalamp {
    left: 370px;
}
#menu li:nth-of-type(6):hover ~ #lavalamp {
    left: 440px;
}
#menu li:nth-of-type(7):hover ~ #lavalamp {
    left: 525px;
}
#menu li:nth-of-type(8):hover ~ #lavalamp {
    left: 595px;
}

Code html du menu :
Code:
<ul id="menu">
  <li><a href="#">ACCUEIL</a>
    <ul>
      <li><a href="#">Lien sous menu plus long</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu plus long</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
    </ul>
  </li><!--
--><li><a href="#">GALERIE</a>
    <ul>
      <li><a href="#">FORUM</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">EXPERT JALBUM</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
    </ul>
  </li><!--
--><li><a href="#">EPHEMERIDE</a>
    <ul>
      <li><a href="#">SOMMMAIRE</a>
 <ul>
  
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">MENSUEL</a>
 <ul>
  <li><a href="#">Janvier</a></li>
  <li><a href="#">Fevrier</a></li>
  <li><a href="#">mars</a></li>
  <li><a href="#">Avril</a></li>
  <li><a href="#">Mai</a></li>
  <li><a href="#">Juin</a></li>
  <li><a href="#">Juillet</a></li>
  <li><a href="#">Aout</a></li>
  <li><a href="#">Septembre</a></li>
  <li><a href="#">Octobre</a></li>
  <li><a href="#">Novembre</a></li>
  <li><a href="#">Decembre</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
    </ul>
  </li><!--
--><li><a href="#">ARTISTIQUE</a>
    <ul>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">LIENS</a>
    <ul>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">CONTACT</a>
    <ul>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">PARTAGE</a>
    <ul>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">INFOS</a>
    <ul>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
    </ul>
  </li>
  <div id="lavalamp"></div>
</ul>

@ + et bon courage

_________________
B@byl
"La qualité d'une vie n'est pas dans l'accumulation mais dans le partage"
avatar
B@byl
Conservateur
Conservateur

Balance Serpent
Nombre de messages : 5844
Age : 63
Ville (CP) : Pas d'entraide par MP ou mail
Date d'inscription : 07/02/2007

http://www.assmat-nantes.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par Jeffdulac le Mar 24 Mai 2016 - 21:14

Bonsoir B@byl,

Wouahhh, génialissime tes codes !
Exactement ce que je cherchais.

Comme finalement je n'aurai pas trop de 2 niveaux, ça va sacrément me faciliter la vie (et la vue...).
Et plus tard, le css, en place, me permettra d'enrichir ce menu quand j'en aurai besoin.

Seul truc je n'ai pas réussi à placer les séparateurs dans la barre principale sans qu'ils se mettent aussi partout dans les sous menus (pas beau), j'ai donc laissé sans séparateurs
Aussi sympa sans les séparateurs, je m'en passerai Smile

Merci B@byl  cheers flower

Je te décerne un zèbre d'or pour ta gentillesse lolol

avatar
Jeffdulac
Soigneur
Soigneur

Sagittaire Coq
Nombre de messages : 880
Age : 71
Ville (CP) : (83700)
Date d'inscription : 20/09/2008

http://www.sealex.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par B@byl le Mer 25 Mai 2016 - 10:18

Bonjour Jeff

Wouahhh!!!!!!!
Merci pour le zèbre d'or
Contente que ça te convienne.

Sinon, pour ton menu actuel dans ton site, si je ne me trompe pas il n'est pas placé dans une maquette, mais sur chaque page pour avoir le curseur sur l'onglet de la page active, c'est bien ça ?

@ +

_________________
B@byl
"La qualité d'une vie n'est pas dans l'accumulation mais dans le partage"
avatar
B@byl
Conservateur
Conservateur

Balance Serpent
Nombre de messages : 5844
Age : 63
Ville (CP) : Pas d'entraide par MP ou mail
Date d'inscription : 07/02/2007

http://www.assmat-nantes.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par Jeffdulac le Mer 25 Mai 2016 - 12:12

Hello B@byl,

mais sur chaque page pour avoir le curseur sur l'onglet de la page active, c'est bien ça ?
Oui exactement ça, dans les maquettes (attribut current) pour chaque page active
(obligé de faire comme cela sinon l'index en "current" ne fonctionne pas)

Smile
avatar
Jeffdulac
Soigneur
Soigneur

Sagittaire Coq
Nombre de messages : 880
Age : 71
Ville (CP) : (83700)
Date d'inscription : 20/09/2008

http://www.sealex.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par B@byl le Mer 25 Mai 2016 - 14:51

La même chose est à faire avec la formule css.
Comme je faisais mes essais sur une seule page je n'avais pas vu le problème du curseur en page courante.

Nous avons donc des petites modifs dans les codes pour que le curseur aie pleinement toute son utilité.
On va commencer par le code html, là ce ne sera pas le current qu'il faudra modifier pour chaque onglet mais la balise div qui se trouve tout en bas du code html:
Code:
<div id="lavalamp"></div>
et du coup pour chaque onglet, onglet 1 on remplacera par :
Code:
<div id="lavalamp1"></div>
onglet 2 :
Code:
<div id="lavalamp2"></div>
et ainsi de suite jusqu'à l'onglet 8.

Et bien sur comme pour ce que tu avais déjà fait, chacune des maquettes serviront pour tous les sous menus qui découleront de chaque onglet
çà c'est pour le code html

Maintenant on va passer au css
Pour le code css il y a le css de chaque lavalamp de 1 à 8 à ajouter.
Ce qui nous donnera (je mets le css complet c'est plus sur) :
Code:
#menu,#menu ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;  
 
}

#menu {
    background: url('light.png') no-repeat scroll  transparent;
  padding:10px;
  margin:5px 0 0 0;
  list-style: none;
  text-align: left;
  font-size: 13px;
  height: 49px;

}

#menu ul {
     background-color: #d7d7d7;
font-size: 12px;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
  padding:0;
  margin:10px 0 0 0;
  list-style: none;
  text-align: center;
border-right: 1px black;
 
}

#menu li {
  display:inline-block;
  vertical-align: top;
  position: relative;
}
#menu li li {
  display:inherit;
}
#menu a {
  display:block;
  padding:5px 10px;
  text-decoration: none;
  color:#575757;
  font-family:arial;
}
#menu ul li a {
  padding:5px 8px;
}
#menu ul {
  position: absolute;
  z-index: 1000;
  min-width:100%;
  white-space: nowrap;
  text-align: left;
}
#menu ul ul {
  left:100%;
  top:0;
  overflow: hidden;
  max-width: 0;
  min-width: 0;
  transition: 0.3s all;
}
#menu ul li:hover ul {
  max-width: 30em;
}
#menu ul li {
  max-height:0;
  overflow: hidden;
  transition:all 0.8s;
}
#menu li li li {
  max-height: inherit;
}
#menu li:hover li {
  max-height: 15em;
  overflow: visible;
}

#menu li:hover {
    background-image:none;
}
#menu li:hover a, .menu li li:hover a {

    color:#000
}
#menu li:hover li a, #menu li:hover li li a {
    color: #575757;
  
}
#menu li:hover a, #menu li li:hover a, #menu li li li:hover a {

    color:#000
}

#menu li:hover, #menu a:focus, #menu a:hover, #menu a:active {

    outline: 0 none;
}

/*********lavalamp******/
/***********************/
#lavalamp1 {
    background: url('darkred.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 24px;
    position: absolute;
    top: 0;
    width: 64px;

    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp1:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}

#menu li:nth-of-type(1):hover ~ #lavalamp1  {
    left: 24px;
}
#menu li:nth-of-type(2):hover ~ #lavalamp1  {
    left: 100px;
}
#menu li:nth-of-type(3):hover ~ #lavalamp1  {
    left: 190px;
}
#menu li:nth-of-type(4):hover ~ #lavalamp1  {
    left: 290px;
}
#menu li:nth-of-type(5):hover ~ #lavalamp1  {
    left: 370px;
}
#menu li:nth-of-type(6):hover ~ #lavalamp1  {
    left: 440px;
}
#menu li:nth-of-type(7):hover ~ #lavalamp1  {
    left: 525px;
}
#menu li:nth-of-type(8):hover ~ #lavalamp1  {
    left: 595px;
}
/****************/
#lavalamp2 {
    background: url('darkred.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 100px;
    position: absolute;
    top: 0;
    width: 64px;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp2:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#menu li:nth-of-type(1):hover ~ #lavalamp2  {
    left: 24px;
}
#menu li:nth-of-type(2):hover ~ #lavalamp2  {
    left: 100px;
}
#menu li:nth-of-type(3):hover ~ #lavalamp2  {
    left: 190px;
}
#menu li:nth-of-type(4):hover ~ #lavalamp2  {
    left: 290px;
}
#menu li:nth-of-type(5):hover ~ #lavalamp2  {
    left: 370px;
}
#menu li:nth-of-type(6):hover ~ #lavalamp2  {
    left: 440px;
}
#menu li:nth-of-type(7):hover ~ #lavalamp2  {
    left: 525px;
}
#menu li:nth-of-type(8):hover ~ #lavalamp2  {
    left: 595px;
}
/**************/
#lavalamp3 {
    background: url('darkred.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 190px;
    position: absolute;
    top: 0;
    width: 64px;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp3:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#menu li:nth-of-type(1):hover ~ #lavalamp3  {
    left: 24px;
}
#menu li:nth-of-type(2):hover ~ #lavalamp3  {
    left: 100px;
}
#menu li:nth-of-type(3):hover ~ #lavalamp3  {
    left: 190px;
}
#menu li:nth-of-type(4):hover ~ #lavalamp3  {
    left: 290px;
}
#menu li:nth-of-type(5):hover ~ #lavalamp3  {
    left: 370px;
}
#menu li:nth-of-type(6):hover ~ #lavalamp3  {
    left: 440px;
}
#menu li:nth-of-type(7):hover ~ #lavalamp3  {
    left: 525px;
}
#menu li:nth-of-type(8):hover ~ #lavalamp3  {
    left: 595px;
}
/************/
#lavalamp4 {
    background: url('darkred.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 290px;
    position: absolute;
    top: 0;
    width: 64px;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp4:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#menu li:nth-of-type(1):hover ~ #lavalamp4  {
    left: 24px;
}
#menu li:nth-of-type(2):hover ~ #lavalamp4  {
    left: 100px;
}
#menu li:nth-of-type(3):hover ~ #lavalamp4  {
    left: 190px;
}
#menu li:nth-of-type(4):hover ~ #lavalamp4  {
    left: 290px;
}
#menu li:nth-of-type(5):hover ~ #lavalamp4  {
    left: 370px;
}
#menu li:nth-of-type(6):hover ~ #lavalamp4  {
    left: 440px;
}
#menu li:nth-of-type(7):hover ~ #lavalamp4  {
    left: 525px;
}
#menu li:nth-of-type(8):hover ~ #lavalamp4  {
    left: 595px;
}
/************/
#lavalamp5 {
    background: url('darkred.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 370px;
    position: absolute;
    top: 0;
    width: 64px;

    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp5:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#menu li:nth-of-type(1):hover ~ #lavalamp5  {
    left: 24px;
}
#menu li:nth-of-type(2):hover ~ #lavalamp5  {
    left: 100px;
}
#menu li:nth-of-type(3):hover ~ #lavalamp5  {
    left: 190px;
}
#menu li:nth-of-type(4):hover ~ #lavalamp5  {
    left: 290px;
}
#menu li:nth-of-type(5):hover ~ #lavalamp5  {
    left: 370px;
}
#menu li:nth-of-type(6):hover ~ #lavalamp5  {
    left: 440px;
}
#menu li:nth-of-type(7):hover ~ #lavalamp5  {
    left: 525px;
}
#menu li:nth-of-type(8):hover ~ #lavalamp5  {
    left: 595px;
}
/****************/
#lavalamp6 {
    background: url('darkred.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 440px;
    position: absolute;
    top: 0;
    width: 64px;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp6:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#menu li:nth-of-type(1):hover ~ #lavalamp6  {
    left: 24px;
}
#menu li:nth-of-type(2):hover ~ #lavalamp6  {
    left: 100px;
}
#menu li:nth-of-type(3):hover ~ #lavalamp6  {
    left: 190px;
}
#menu li:nth-of-type(4):hover ~ #lavalamp6  {
    left: 290px;
}
#menu li:nth-of-type(5):hover ~ #lavalamp6  {
    left: 370px;
}
#menu li:nth-of-type(6):hover ~ #lavalamp6  {
    left: 440px;
}
#menu li:nth-of-type(7):hover ~ #lavalamp6  {
    left: 525px;
}
#menu li:nth-of-type(8):hover ~ #lavalamp6  {
    left: 595px;
}
/**************/
#lavalamp7 {
    background: url('darkred.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 525px;
    position: absolute;
    top: 0;
    width: 64px;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp7:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#menu li:nth-of-type(1):hover ~ #lavalamp7  {
    left: 24px;
}
#menu li:nth-of-type(2):hover ~ #lavalamp7  {
    left: 100px;
}
#menu li:nth-of-type(3):hover ~ #lavalamp7  {
    left: 190px;
}
#menu li:nth-of-type(4):hover ~ #lavalamp7  {
    left: 290px;
}
#menu li:nth-of-type(5):hover ~ #lavalamp7  {
    left: 370px;
}
#menu li:nth-of-type(6):hover ~ #lavalamp7  {
    left: 440px;
}
#menu li:nth-of-type(7):hover ~ #lavalamp7  {
    left: 525px;
}
#menu li:nth-of-type(8):hover ~ #lavalamp7  {
    left: 595px;
}
/************/
#lavalamp8 {
    background: url('darkred.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 595px;
    position: absolute;
    top: 0;
    width: 64px;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp8:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#menu li:nth-of-type(1):hover ~ #lavalamp8  {
    left: 24px;
}
#menu li:nth-of-type(2):hover ~ #lavalamp8  {
    left: 100px;
}
#menu li:nth-of-type(3):hover ~ #lavalamp8  {
    left: 190px;
}
#menu li:nth-of-type(4):hover ~ #lavalamp8  {
    left: 290px;
}
#menu li:nth-of-type(5):hover ~ #lavalamp8  {
    left: 370px;
}
#menu li:nth-of-type(6):hover ~ #lavalamp8  {
    left: 440px;
}
#menu li:nth-of-type(7):hover ~ #lavalamp8  {
    left: 525px;
}
#menu li:nth-of-type(8):hover ~ #lavalamp8  {
    left: 595px;
}
/****************************/
/*********fin lavalamp*******/

Je te remets un lien d'essai complet ici où tout y est tu pouras toujours voir le code source si ça t'est utile.

_________________
B@byl
"La qualité d'une vie n'est pas dans l'accumulation mais dans le partage"
avatar
B@byl
Conservateur
Conservateur

Balance Serpent
Nombre de messages : 5844
Age : 63
Ville (CP) : Pas d'entraide par MP ou mail
Date d'inscription : 07/02/2007

http://www.assmat-nantes.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par Jeffdulac le Mer 25 Mai 2016 - 15:46

Punaise ça c'est du codage de compétition ! I love you
Merci beaucoup B@byl cheers
avatar
Jeffdulac
Soigneur
Soigneur

Sagittaire Coq
Nombre de messages : 880
Age : 71
Ville (CP) : (83700)
Date d'inscription : 20/09/2008

http://www.sealex.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par Jeffdulac le Mer 25 Mai 2016 - 20:41

Iou ou !
Je crois avoir trouvé une astuce pour les séparateurs.
Tu me dis ce que tu en penses Wink
Bon je dois revoir tous les positionnements du curseur, mais ça devait marcher Suspect
avatar
Jeffdulac
Soigneur
Soigneur

Sagittaire Coq
Nombre de messages : 880
Age : 71
Ville (CP) : (83700)
Date d'inscription : 20/09/2008

http://www.sealex.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par B@byl le Jeu 26 Mai 2016 - 10:27

Salut Jeff
Ah oui bonne idée de mettre les séparateurs directement dans le menu.

cheers

_________________
B@byl
"La qualité d'une vie n'est pas dans l'accumulation mais dans le partage"
avatar
B@byl
Conservateur
Conservateur

Balance Serpent
Nombre de messages : 5844
Age : 63
Ville (CP) : Pas d'entraide par MP ou mail
Date d'inscription : 07/02/2007

http://www.assmat-nantes.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par Jeffdulac le Jeu 26 Mai 2016 - 13:13

Salut B@byl,

Merci Smile
Et du coup j'ai refait tous les positionnements du curseur.
Et aussi une image entièrement refaite avec photofiltre, pour la barre elle même.
Ça va être sympa comme cela.
avatar
Jeffdulac
Soigneur
Soigneur

Sagittaire Coq
Nombre de messages : 880
Age : 71
Ville (CP) : (83700)
Date d'inscription : 20/09/2008

http://www.sealex.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par B@byl le Ven 27 Mai 2016 - 9:43

cheers

_________________
B@byl
"La qualité d'une vie n'est pas dans l'accumulation mais dans le partage"
avatar
B@byl
Conservateur
Conservateur

Balance Serpent
Nombre de messages : 5844
Age : 63
Ville (CP) : Pas d'entraide par MP ou mail
Date d'inscription : 07/02/2007

http://www.assmat-nantes.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par Jeffdulac le Jeu 2 Juin 2016 - 20:45

Hello B@byl,

A y est il est pratiquement  totalement en place drinks
J'ai même re-installé mon bon "vieux" livre d'or" Smile
Par contre je n'arrive pas à résoudre le problème des caractères accentués pour ce menu Suspect

Mais bon, ça le fait bien ce menu Lavalamp !
avatar
Jeffdulac
Soigneur
Soigneur

Sagittaire Coq
Nombre de messages : 880
Age : 71
Ville (CP) : (83700)
Date d'inscription : 20/09/2008

http://www.sealex.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par B@byl le Jeu 2 Juin 2016 - 21:33

Salut jeff

Bien, bon boulot cheers

Pour les accents il y a 2 façons de les coder en html ou décimal, tu as essayé les 2 ?

_________________
B@byl
"La qualité d'une vie n'est pas dans l'accumulation mais dans le partage"
avatar
B@byl
Conservateur
Conservateur

Balance Serpent
Nombre de messages : 5844
Age : 63
Ville (CP) : Pas d'entraide par MP ou mail
Date d'inscription : 07/02/2007

http://www.assmat-nantes.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par Jeffdulac le Ven 3 Juin 2016 - 21:32

Salut B@byl,

En html, oui (et c'est pareil), en décimal idem
(sur la page test j'ai d'ailleurs essayé en décimal pour le premier É, et en iso pour les deux autres)  !

Tu fais comment, en particulier, pour ce genre de menu ?  scratch
avatar
Jeffdulac
Soigneur
Soigneur

Sagittaire Coq
Nombre de messages : 880
Age : 71
Ville (CP) : (83700)
Date d'inscription : 20/09/2008

http://www.sealex.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par B@byl le Sam 4 Juin 2016 - 10:22

Salut Jeff

Je suis allée voir sur le lien test que tu donnes mais pas vu d'accent codé dans le code source.

@ +

_________________
B@byl
"La qualité d'une vie n'est pas dans l'accumulation mais dans le partage"
avatar
B@byl
Conservateur
Conservateur

Balance Serpent
Nombre de messages : 5844
Age : 63
Ville (CP) : Pas d'entraide par MP ou mail
Date d'inscription : 07/02/2007

http://www.assmat-nantes.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par Jeffdulac le Sam 4 Juin 2016 - 16:01

Salut B@byl,

Je ne comprends plus rien, j'ai mis ces codes hier soir, et aujourd’hui plus rien ! Suspect
avatar
Jeffdulac
Soigneur
Soigneur

Sagittaire Coq
Nombre de messages : 880
Age : 71
Ville (CP) : (83700)
Date d'inscription : 20/09/2008

http://www.sealex.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par B@byl le Sam 4 Juin 2016 - 20:29

De mon côté ton menu je le vois comme ça :


Ton code source comme ça :

tu as laissé le 1er é non codé le 2ème en lettre pas fait en numérique.

Mon menu chez moi je le vois comme ça c'est ici:


Mon code source :

le 1er non codé le 2ème en lettre et le 3ème en numérique

Et je les vois tous avec l'accent, navigateur firefox 46.0.1
Tu publies bien directement avec WA ?

_________________
B@byl
"La qualité d'une vie n'est pas dans l'accumulation mais dans le partage"
avatar
B@byl
Conservateur
Conservateur

Balance Serpent
Nombre de messages : 5844
Age : 63
Ville (CP) : Pas d'entraide par MP ou mail
Date d'inscription : 07/02/2007

http://www.assmat-nantes.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par Jeffdulac le Sam 4 Juin 2016 - 21:07

Oui parce qu'en décimal, ça donne rien du tout (comme si il n'avait aucun caractère)
En fait , ce que tu vois je l'ai repris cet après midi.
J'ai mis seulement en codage html, et en "normal" pour voir.
Mais pour moi ça donne pareil ... rien, nada, que tchi, aucune lettre. lolol

Tu fais comment pour que l'on voit les accents ?

Tu publies bien directement avec WA ?
oui bien sûr.
Je viens de faire pareil que toi, et toujours rien. Crying or Very sad

Tu as fait quelque chose de particulier en css (je vois pas) ?
avatar
Jeffdulac
Soigneur
Soigneur

Sagittaire Coq
Nombre de messages : 880
Age : 71
Ville (CP) : (83700)
Date d'inscription : 20/09/2008

http://www.sealex.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par B@byl le Sam 4 Juin 2016 - 21:32

Moi non je n'ai rien fait de spéciale dans le css mais toi si, tu as au début de ton css ceci :

Code:
@charset "utf-8";
/* latin-ext */

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

Tu devrais retirer toute cette partie et réessayer, n'oublie pas de vider le cache avant de vérifier ce que ça donne.

_________________
B@byl
"La qualité d'une vie n'est pas dans l'accumulation mais dans le partage"
avatar
B@byl
Conservateur
Conservateur

Balance Serpent
Nombre de messages : 5844
Age : 63
Ville (CP) : Pas d'entraide par MP ou mail
Date d'inscription : 07/02/2007

http://www.assmat-nantes.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par Jeffdulac le Lun 6 Juin 2016 - 17:32

Salut Babyl,

J'avais mis ce supplément de code trouvé sur le net, pour essayer de résoudre le problème, et j'ai oublié de l’ôter ! Plaf
Évidement ça ne fonctionnait pas lolol

avatar
Jeffdulac
Soigneur
Soigneur

Sagittaire Coq
Nombre de messages : 880
Age : 71
Ville (CP) : (83700)
Date d'inscription : 20/09/2008

http://www.sealex.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par B@byl le Lun 6 Juin 2016 - 19:17

Salut Jeff
Vraiment curieux cette histoire d'accents Plaf et quand tu regardes en teste autrement dit en local est ce que tu as aussi le problème ?

_________________
B@byl
"La qualité d'une vie n'est pas dans l'accumulation mais dans le partage"
avatar
B@byl
Conservateur
Conservateur

Balance Serpent
Nombre de messages : 5844
Age : 63
Ville (CP) : Pas d'entraide par MP ou mail
Date d'inscription : 07/02/2007

http://www.assmat-nantes.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par Jeffdulac le Lun 6 Juin 2016 - 21:47

C'est ce que je me dis !
En local, j'ai reproduit ton test, c'est nickel, mais en ligne, publié avec WA, ça ne fonctionne plus, bizarre quand même Suspect
avatar
Jeffdulac
Soigneur
Soigneur

Sagittaire Coq
Nombre de messages : 880
Age : 71
Ville (CP) : (83700)
Date d'inscription : 20/09/2008

http://www.sealex.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par B@byl le Mar 7 Juin 2016 - 7:48

Hello Jeff
Jeffdulac a écrit:
En local, j'ai reproduit ton test, c'est nickel 
Je suppose que tu as reproduit sur un fichier vierge

Mais dans wa qu'est ce que ça donne si tu cliques sur le bouton tester ?
Est ce que ça ne viendrait pas de l'hébergement ?

Edit : Ah j'oubliais, c'est quoi ta police, c'es bien Arial ? Car il y a des polices dont les caractères accentués n'existent pas et donc même codé tu n'auras rien.

@ +

_________________
B@byl
"La qualité d'une vie n'est pas dans l'accumulation mais dans le partage"
avatar
B@byl
Conservateur
Conservateur

Balance Serpent
Nombre de messages : 5844
Age : 63
Ville (CP) : Pas d'entraide par MP ou mail
Date d'inscription : 07/02/2007

http://www.assmat-nantes.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par Jeffdulac le Mar 7 Juin 2016 - 15:28

Coucou B@byl,

Mais dans wa qu'est ce que ça donne si tu cliques sur le bouton tester ?
Pas grand chose, car le menu n'est visible qu'en ligne.

Je suppose que tu as reproduit sur un fichier vierge
Oui en fichier extra WA !
Oui c'est bien arial, car j'ai repris exactement ton menu et ton css !

Une piste, regardes bien ce qu'il se passe quand tu actualises la page de test,
c'est vraiment étrange, je vois le menu avec accents en premier, et fin d'actualisation, sans accents !



C'est dingue ce truc !
avatar
Jeffdulac
Soigneur
Soigneur

Sagittaire Coq
Nombre de messages : 880
Age : 71
Ville (CP) : (83700)
Date d'inscription : 20/09/2008

http://www.sealex.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par Jeffdulac le Mar 7 Juin 2016 - 16:04

Bon bah je crois que j'ai trouvé !
En fait il faut intégrer le lien css et la meta charset dans le code du menu,
et non dans les propriété du site web de WA ! Pouark

Par contre je n'arrive pas à l'actualiser avec Firefox, cache vidé et actualisation forcée (CTRL + F5)
(avec EDGE c'est nickel !)

EDIT:17h00
Et bah pas tout à fait !
Le menu passe sous la page Sad
Pourtant j'ai appliqué l'astuce de la div.
Et toujours Firefox impossible à actualiser.
avatar
Jeffdulac
Soigneur
Soigneur

Sagittaire Coq
Nombre de messages : 880
Age : 71
Ville (CP) : (83700)
Date d'inscription : 20/09/2008

http://www.sealex.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par B@byl le Mar 7 Juin 2016 - 17:11

Euh oui mais pas sure que ça règle le problème, d'autant plus que c'est contraire aux normes on ne met jamais de balise metta ou link dans le body, elles doivent être impérativement dans le head.

autrement pour le problème de fichiers qui ne s'actualisent pas c'est courant, ça actualise la page mais pas les fichiers appelés, à croire qu'ils ne sont pas dans le même cache ou qu'il ne vide que les pages.
Il y a un truc efficace pour ça, il faut suffixer l’appel du fichier en question par exemple pour ton css :
tu as mis :
Code:
<link href=".../styles/cssmenu.css" rel="stylesheet" type="text/css" />

il faudra mettre un suffixe (un nom de version de ton fichier), en exemple j'ai mis la date et l'heure de maintenant mais tu peux mettre ce que tu veux le principe est de changer ce nom quand tu modifies pour que ton navigateur n'utilise pas le cache mais aille chercher la nouvelle version sur le serveur
Ton appel actuel deviendra celui-ci :
Code:
<link href=".../styles/cssmenu.css?v06071706" rel="stylesheet" type="text/css" />
v06071706 est le nom du suffixe du fichier ( nom de version) il ne faut pas oublier le ? entre le nom de fichier et le nom du suffixe.
Ensuite à chaque fois que tu changes ton css tu changes le suffixe dans l'appel du fichier, ton navigateur sera obligé d'aller le chercher sur le serveur.
par contre pour le nom de ton fichier tu ne changes rien lui il s'appellera toujours cssmenu.css

En espérant être claire pour cette "astuce"

Par contre comme tu multiplies l'appel de fichier dans hesad et dans body par sure que ça marche, mais utilisé normalement ça marche impeccable.
Ça vaut aussi pour l'appel de fichiers JS.

_________________
B@byl
"La qualité d'une vie n'est pas dans l'accumulation mais dans le partage"
avatar
B@byl
Conservateur
Conservateur

Balance Serpent
Nombre de messages : 5844
Age : 63
Ville (CP) : Pas d'entraide par MP ou mail
Date d'inscription : 07/02/2007

http://www.assmat-nantes.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par B@byl le Mar 7 Juin 2016 - 17:23

EDIT:17h00
Et bah pas tout à fait !
Le menu passe sous la page Sad
Pourtant j'ai appliqué l'astuce de la div.
Et toujours Firefox impossible à actualiser

N’hésites pas à ajouter des zeros pour ton z-index mais plutôt 200000 ton body est déjà a 52000
et tes 2 balises meta et link dans une balise body c'est pas vraiment une bonne idée, mais bon ...

_________________
B@byl
"La qualité d'une vie n'est pas dans l'accumulation mais dans le partage"
avatar
B@byl
Conservateur
Conservateur

Balance Serpent
Nombre de messages : 5844
Age : 63
Ville (CP) : Pas d'entraide par MP ou mail
Date d'inscription : 07/02/2007

http://www.assmat-nantes.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par Jeffdulac le Mar 7 Juin 2016 - 18:39

Mon dieu c'est le z-index tout simplement !
Merci B@byl ! flower
Pour les meta et charset, si je les enlève plus d'accents.
avatar
Jeffdulac
Soigneur
Soigneur

Sagittaire Coq
Nombre de messages : 880
Age : 71
Ville (CP) : (83700)
Date d'inscription : 20/09/2008

http://www.sealex.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par B@byl le Mer 8 Juin 2016 - 8:53

Salut Jeff

Moi je n'ai toujours pas tes caractères accentués, le problème est toujours là.
De toutes façons il y a un soucis qui vient surement des codes ou plugins ajoutés, il n'y a pas de raisons ça marche chez moi en codant normalement ça doit aussi marcher chez toi, je regarde ça un de tes codes ou plugin est la cause de ce bug il faut trouver l’intrus .

Edit :
J'ai reproduit ta page, intrus trouvé c'est un de tes plugins (myriad.js) parmis ceux qui ne servent plus à rien puisqu'on n'utilise plus le menu que tu avais mis au départ.
Il faut que tu fasses du nettoyage, retirer tous ces appels de fichiers inutiles qui risquent de provoquer d'autre conflits.

Dans propriétés du site tu remplaces par le code ci-dessous et rien de plus les autres codes ne servent plus à rien avec ton menu actuel
Code:
<meta name="google-site-verification" content="xRgoyyNyeUB1l2SSpgyMAYjPY5uqOTRLa7n4DXLRWzY" />
<link href="http://www.sealex.fr/styles/cssmenu.css?v06080900" rel="stylesheet" type="text/css" />

<style type="text/css">
* {
outline:none; }

body {
overflow:auto;
}
</style>

et dans le code du menu retire les deux balises, la meta et la link tu ne devrais plus en avoir besoin.
Normalement tout doit être rentré dans l'ordre tes accents devraient s'afficher pour tout le monde.

Re Edit: Le myriad js est un fichier pour une police qui est sans accent et qui prenait le dessus par rapport au css c'est pourquoi tu voyais les accents pendant le chargement et plus après, tans que le JS n'était pas chargé tu voyais ton css avant qu'il ne soit écrasé par le js.
J'avais bien remarqué que ta police était différente de arial, du coup tu auras à replacer tes curseurs en fonction de Arial

@ +

_________________
B@byl
"La qualité d'une vie n'est pas dans l'accumulation mais dans le partage"
avatar
B@byl
Conservateur
Conservateur

Balance Serpent
Nombre de messages : 5844
Age : 63
Ville (CP) : Pas d'entraide par MP ou mail
Date d'inscription : 07/02/2007

http://www.assmat-nantes.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par Jeffdulac le Mer 8 Juin 2016 - 15:54

Salut B@byl,

RÔÔÔÔÔÔHHHHHH !
Superbe et absolument géniale cette réponse ! drinks

Effectivement tout est rentré dans l'ordre.

Merci beaucoup B@byl

flower flower flower
avatar
Jeffdulac
Soigneur
Soigneur

Sagittaire Coq
Nombre de messages : 880
Age : 71
Ville (CP) : (83700)
Date d'inscription : 20/09/2008

http://www.sealex.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par B@byl le Mer 8 Juin 2016 - 16:17

Merci Jeff
Super je vois que tout marche normalement maintenant
Allez un petit café italien pour se récompenser drinks

@ +

_________________
B@byl
"La qualité d'une vie n'est pas dans l'accumulation mais dans le partage"
avatar
B@byl
Conservateur
Conservateur

Balance Serpent
Nombre de messages : 5844
Age : 63
Ville (CP) : Pas d'entraide par MP ou mail
Date d'inscription : 07/02/2007

http://www.assmat-nantes.fr/

Revenir en haut Aller en bas

Résolu Re: WA4 et Menus LAVALAMP

Message par Jeffdulac le Mer 8 Juin 2016 - 16:57

Mouais, super, mais cela me rappelle un café payé 15 euros sur la place St Marc à Venise ...
Biz B@byl Wink
avatar
Jeffdulac
Soigneur
Soigneur

Sagittaire Coq
Nombre de messages : 880
Age : 71
Ville (CP) : (83700)
Date d'inscription : 20/09/2008

http://www.sealex.fr/

Revenir en haut Aller en bas

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

- Sujets similaires

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