Probleme css, un detail qui gene

Résolu

Julian_Assange Messages postés 450 Date d'inscription Statut Membre Dernière intervention -
Julian_Assange Messages postés 450 Date d'inscription Statut Membre Dernière intervention - 21 janv. 2015 à 22:36

bonjour a tous,

Je me permet de vous exposer mon problème.

J'ai trouvé un menu css libre de droit, très joli a l'origine en dégradé mais que j'ai simplifié pour concorder avec les couleurs de mon site.

Petit soucis, quand vous avez une catégories qui contient des sous-catégories, une fleche entourée d'un petit rond s'affiche a coté de la catégorie pour signaler qu'il y a des sous-menus.

J'ai bien réussi a mettre de la même couleur que le fond, la flèche pour qu'elle passe inaperçue, mais l'entourage de cette flèche persiste et le rgba (car j'ai fait tout les codes exa de la partie css et c'est pas la) et moi on est pas copain apparemment.

Donc voici ce qui gène prés de la flèche rouge:

http://img15.hostingpics.net/pics/380214test.png

Ensuite voici la partie html :

<div id='cssmenu'>
<ul>
   <li><a href='#'>Tableau de bord</a></li>
   
   <li class='active'><a href='#'>Mon réseau</a>
      <ul>
         <li><a href='#'>Mes messages</a></li>
         <li><a href='#'>Mes publications</a></li>
         <li><a href='#'>Mes contacts</a></li>
      </ul>
   </li>
   <li><a href='#'>About</a></li>
   <li><a href='#'>Contact</a></li>
</ul>
</div>

et pour finir la partie la plus longue, le css:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  border-radius: 5px;
  font-family: 'Open Sans', Helvetica, sans-serif;
  background: #9d9fff;
  background: -o-linear-gradient(top, #9d9fff, #9d9fff);
  background: -ms-linear-gradient(top, #9d9fff, #9d9fff);
  background: -webkit-linear-gradient(top, #9d9fff, #9d9fff);
  background: -moz-linear-gradient(top, #9d9fff, #9d9fff);
  background: linear-gradient(to bottom, #9d9fff, #9d9fff);
  box-shadow: inset 0 -3px 0 #9d9fff, inset 0 -3px 3px #9d9fff, inset 0 2px 2px #9d9fff, inset 1px 0 2px #9d9fff, inset -1px 0 2px #9d9fff, 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.06), 0 3px 3px rgba(0, 0, 0, 0.17), 2px 1px 2px rgba(0, 0, 0, 0.05), -2px 1px 2px rgba(0, 0, 0, 0.05);
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li > a {
  padding: 20px 25px;
  font-size: 13px;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  font-weight: 700;
  text-decoration: none;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
  color: #000000;
}
#cssmenu > ul > li.has-sub > a {
 
}
#cssmenu ul > li.has-sub > a:after {
  content: '';
  position: absolute;
  right: 5px;
  top: 17.5px;
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #9d9fff;
  background: -webkit-linear-gradient(top, #9d9fff 0%, #9d9fff 25%, #9d9fff 50%, #9d9fff 75%, #9d9fff 100%);
  background: -ms-linear-gradient(top, #9d9fff 0%, #9d9fff 25%, #9d9fff 50%, #9d9fff 75%, #9d9fff 100%);
  background: -moz-linear-gradient(top, #9d9fff 0%, #9d9fff 25%, #9d9fff 50%, #9d9fff 75%, #9d9fff 100%);
  background: -o-linear-gradient(top, #9d9fff 0%, #9d9fff 25%, #9d9fff 50%, #9d9fff 75%, #9d9fff 100%);
  background: linear-gradient(to bottom, #9d9fff 0%, #9d9fff 25%, #9d9fff 50%, #9d9fff 75%, #9d9fff 100%);
  box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #9d9fff;
  background-size: 36px 36px;
  background-position: 0 0;
  background-repeat: no-repeat;
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub:hover > a:after {
  background-position: 0 -18px;
}
#cssmenu ul > li.has-sub > a:before {
  content: '';
  position: absolute;
  right: 11px;
  top: 25.5px;
  display: block;
  width: 0;
  height: 0;
  border: 3px solid transparent;
  border-top-color: #9d9fff;
  z-index: 99;
}
#cssmenu ul > li.has-sub:hover > a:before {
  border-top-color: #9d9fff;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
  opacity: 0;
  -webkit-transition: top .2s ease, opacity .2s ease;
  -moz-transition: top .2s ease, opacity .2s ease;
  -ms-transition: top .2s ease, opacity .2s ease;
  -o-transition: top .2s ease, opacity .2s ease;
  transition: top .2s ease, opacity .2s ease;
}
#cssmenu > ul > li > ul {
  top: 91px;
  padding-top: 8px;
  border-radius: 5px;
}
#cssmenu > ul > li:hover > ul {
  left: auto;
  top: 51px;
  opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
  right: 0;
}
#cssmenu ul ul ul {
  top: 40px;
}
#cssmenu ul ul > li:hover > ul {
  top: 0;
  left: 178px;
  padding-left: 10px;
  opacity: 1;
}
#cssmenu.align-right ul ul > li:hover > ul {
  left: auto;
  right: 178px;
  padding-left: 0;
  padding-right: 10px;
  opacity: 1;
}
#cssmenu ul ul li a {
  width: 180px;
  padding: 12px 25px;
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  color: #000000;
  text-decoration: none;
  background: #9d9fff;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li > a:hover,
#cssmenu ul ul li.active > a {
  color: #cae5fd;
}
#cssmenu ul ul li:first-child > a {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  box-shadow: inset 0 2px 2px #9d9fff;
}
#cssmenu ul ul li:last-child > a {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: inset 0 -3px 0 #9d9fff, inset 0 -3px 3px #9d9fff, 0 1px 1px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.13);
}
#cssmenu ul ul > li.has-sub > a:after {
  right: 12px;
  top: 9.5px;
  background: #9d9fff;
  background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
  background-size: 36px 36px;
  background-position: 0 0;
  background-repeat: no-repeat;
}
#cssmenu.align-right ul ul > li.has-sub > a:after {
  right: auto;
  left: 12px;
}
#cssmenu ul ul > li.has-sub:hover > a:after {
  background-position: 0 -18px;
}
#cssmenu ul ul > li.has-sub > a:before {
  top: 15.5px;
  right: 16px;
  border-top-color: transparent;
  border-left-color: #ffffff;
}
#cssmenu.align-right ul ul > li.has-sub > a:before {
  top: 15.5px;
  right: auto;
  left: 16px;
  border-top-color: transparent;
  border-right-color: #ffffff;
  border-left-color: transparent;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
  border-top-color: transparent;
  border-left-color: #2babde;
}
#cssmenu.align-right ul ul > li.has-sub:hover > a:before {
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: #9d9fff;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    width: 100%;
  }
  #cssmenu ul,
  #cssmenu ul ul,
  #cssmenu ul ul ul,
  #cssmenu > ul,
  #cssmenu.align-center > ul,
  #cssmenu > ul > li > ul,
  #cssmenu > ul > li:hover > ul,
  #cssmenu ul ul li:hover > ul,
  #cssmenu ul ul ul li:hover > ul,
  #cssmenu.align-right ul ul,
  #cssmenu.align-right ul ul li:hover > ul,
  #cssmenu.align-right ul ul ul li:hover > ul {
    position: relative;
    left: 0;
    right: auto;
    top: 0;
    width: 100%;
    display: none;
    padding: 0;
    opacity: 1;
    text-align: left;
  }
  #cssmenu ul li {
    width: 100%;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
  }
  #cssmenu > ul > li > a,
  #cssmenu ul ul li a,
  #cssmenu ul ul li:first-child > a,
  #cssmenu ul ul li:last-child > a {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
  #cssmenu ul li a {
    padding-left: 12.5px;
  }
  #cssmenu ul ul li a {
    padding: 14px 25px 14px 27.5px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 42.5px;
  }
  #cssmenu ul ul ul ul li a {
    padding-left: 57.5px;
  }
  #cssmenu > ul > li.has-sub > a:after,
  #cssmenu > ul > li.has-sub > a:before,
  #cssmenu ul ul li.has-sub > a:after,
  #cssmenu ul ul li.has-sub > a:before {
    display: none;
  }
  #cssmenu #menu-button {
    position: relative;
    display: block;
    padding: 20px;
    padding-left: 12.5px;
    cursor: pointer;
    font-size: 13px;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  #cssmenu .submenu-button {
    position: absolute;
    right: 0;
    display: block;
    width: 53px;
    height: 53px;
    border-left: 1px solid rgba(120, 120, 120, 0.2);
    z-index: 10;
    cursor: pointer;
  }
  #cssmenu ul ul .submenu-button {
    height: 41px;
  }
  #cssmenu ul .submenu-button:after,
  #cssmenu #menu-button:after {
    content: '';
    position: absolute;
    right: 12.5px;
    top: 12.5px;
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 15px;
    background: #9d9fff;
    background: -webkit-linear-gradient(top, #9d9fff 0%, #9d9fff 25%, #9d9fff 50%, #9d9fff 75%, #9d9fff 100%);
    background: -ms-linear-gradient(top, #9d9fff 0%, #9d9fff 25%, #9d9fff 50%, #9d9fff 75%, #9d9fff 100%);
    background: -moz-linear-gradient(top, #9d9fff 0%, #9d9fff 25%, #9d9fff 50%, #9d9fff 75%, #9d9fff 100%);
    background: -o-linear-gradient(top, #9d9fff 0%, #9d9fff 25%, #9d9fff 50%, #9d9fff 75%, #9d9fff 100%);
    background: linear-gradient(to bottom, #9d9fff 0%, #9d9fff 25%, #9d9fff 50%, #9d9fff 75%, #9d9fff 100%);
    box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
    background-size: 56px 56px;
    background-position: 0 0;
    background-repeat: no-repeat;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -ms-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
  }
  #cssmenu ul .submenu-button.submenu-opened:after,
  #cssmenu #menu-button.menu-opened:after {
    background-position: 0 -28px;
  }
  #cssmenu ul ul .submenu-button:after {
    top: 6.5px;
  }
  #cssmenu #menu-button:before,
  #cssmenu .submenu-button:before {
    content: '';
    position: absolute;
    right: 22.5px;
    top: 25.5px;
    display: block;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top-color: #ffffff;
    z-index: 99;
  }
  #cssmenu ul ul .submenu-button:before {
    top: 19.5px;
  }
  #cssmenu #menu-button.menu-opened:before,
  #cssmenu .submenu-button.submenu-opened:before {
    border-top-color: #9d9fff;
  }
}

Mille merci à celui qui pourra m'aider à virer ce détail qui fait un peu crado :/

Afficher la suite

A voir également:

Probleme css, un detail qui gene
Enlever le soulignement d'un lien css ✓ - Forum Webmastering
Diskpart detail disk - Guide
CSS/Comment enlever couleur liens ? ✓ - Forum CSS
Css exposant ✓ - Forum CSS
Comment voir les gens qui ont vu notre profil instagram - Guide

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Bonjour,

Ce qui serait pas mal pour commencer, c'est d'utiliser les outils de debogage de ton navigateur internet ( par exemple FireBug pour FireFox ) et d'examiner ce "cercle" pour savoir quelle ID .. quelle CLASS .. il utilise afin de pouvoir recentrer nos recherches dans le css.....

Par exemple, avec FireBug, voici ce que je peux avoir en faisant un clic droit sur une élément de cette page:

Réponse 2 / 4

telliak Messages postés 3668 Date d'inscription Statut Membre Dernière intervention 882

Salut,
La difficulté c'est de faire d'une partie d'un cerveau humain un navigateur... autrement dit, pas facile de t'aider avec la liste du code, qu'il faudrait avoir en totalité et installer pour l'analyser.
Ton code n'est pas en ligne ?

Réponse 3 / 4

Julian_Assange Messages postés 450 Date d'inscription Statut Membre Dernière intervention 176

Merci a vous deux pour votre interessement au sujet.

Ben il est en ligne mais le site est fermé pour l'instant, et il faut pour avori accés à cette page est inscrit, connecté, etc, etc.

Bon ben je vous ai écouté et j'ai installé firebug.

Voici ce que j'obtiens sur le bouton avec element genant "mon reseau":

<li class="active has-sub">
<span class="submenu-button"></span>
<a href="#">Mon réseau</a>
<ul>
</li>
<li class="active has-sub">
<li class="active has-sub">
</ul>

Mais dans le css y'en a plusieurs:

#cssmenu > ul > li.has-sub > a {
 
}
#cssmenu ul > li.has-sub > a:after {
  content: '';
  position: absolute;
  right: 5px;
  top: 17.5px;
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #9d9fff;
  background: -webkit-linear-gradient(top, #9d9fff 0%, #9d9fff 25%, #9d9fff 50%, #9d9fff 75%, #9d9fff 100%);
  background: -ms-linear-gradient(top, #9d9fff 0%, #9d9fff 25%, #9d9fff 50%, #9d9fff 75%, #9d9fff 100%);
  background: -moz-linear-gradient(top, #9d9fff 0%, #9d9fff 25%, #9d9fff 50%, #9d9fff 75%, #9d9fff 100%);
  background: -o-linear-gradient(top, #9d9fff 0%, #9d9fff 25%, #9d9fff 50%, #9d9fff 75%, #9d9fff 100%);
  background: linear-gradient(to bottom, #9d9fff 0%, #9d9fff 25%, #9d9fff 50%, #9d9fff 75%, #9d9fff 100%);
  box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #9d9fff;
  background-size: 36px 36px;
  background-position: 0 0;
  background-repeat: no-repeat;
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub:hover > a:after {
  background-position: 0 -18px;
}
#cssmenu ul > li.has-sub > a:before {
  content: '';
  position: absolute;
  right: 11px;
  top: 25.5px;
  display: block;
  width: 0;
  height: 0;
  border: 3px solid transparent;
  border-top-color: #9d9fff;
  z-index: 99;
}
#cssmenu ul > li.has-sub:hover > a:before {
  border-top-color: #9d9fff;
}



#cssmenu ul ul > li.has-sub > a:after {
  right: 12px;
  top: 9.5px;
  background: #9d9fff;
  background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
  box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
  background-size: 36px 36px;
  background-position: 0 0;
  background-repeat: no-repeat;
}
#cssmenu.align-right ul ul > li.has-sub > a:after {
  right: auto;
  left: 12px;
}
#cssmenu ul ul > li.has-sub:hover > a:after {
  background-position: 0 -18px;
}
#cssmenu ul ul > li.has-sub > a:before {
  top: 15.5px;
  right: 16px;
  border-top-color: transparent;
  border-left-color: #ffffff;
}
#cssmenu.align-right ul ul > li.has-sub > a:before {
  top: 15.5px;
  right: auto;
  left: 16px;
  border-top-color: transparent;
  border-right-color: #ffffff;
  border-left-color: transparent;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
  border-top-color: transparent;
  border-left-color: #2babde;
}
#cssmenu.align-right ul ul > li.has-sub:hover > a:before {
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: #9d9fff;
}

Réponse 4 / 4

Julian_Assange Messages postés 450 Date d'inscription Statut Membre Dernière intervention 176

Bon et bien grace a votre conseil de firebug, j'ai trouvé, il faut supprimer :

box-shadow: 0 -1px 1px #209ed0 inset, 0 2px 1px #9d9fff inset;

Je n'avais pas vu le tableau de droite sur l'element inspecté.

Merci messieurs pour votre aimable aide!

Discussions similaires

problème reconnaissance url liste iptv avec smartiptv

comment trouver l'url de IPTV ?

Problème IPTV SMARTER

Problème IPTV smarter Pro

Enlever le soulignement sous les liens en HTML/CSS

Votre réponse

Discussions similaires