Sujet Précédent Sujet Suivant

Probleme css, un detail qui gene

Résolu/Fermé
Julian_Assange Messages postés 450 Date d'inscription samedi 12 avril 2014 Statut Membre Dernière intervention 20 janvier 2016 - 21 janv. 2015 à 19:07
Julian_Assange Messages postés 450 Date d'inscription samedi 12 avril 2014 Statut Membre Dernière intervention 20 janvier 2016 - 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 :/



4 réponses

Réponse 1 / 4
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
21 janv. 2015 à 19:21
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:

1
Réponse 2 / 4
telliak Messages postés 3655 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 27 mars 2024 875
Modifié par telliak le 21/01/2015 à 21:44
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 ?
0
Réponse 3 / 4
Julian_Assange Messages postés 450 Date d'inscription samedi 12 avril 2014 Statut Membre Dernière intervention 20 janvier 2016 175
Modifié par Julian_Assange le 21/01/2015 à 22:31
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;
}
0
Réponse 4 / 4
Julian_Assange Messages postés 450 Date d'inscription samedi 12 avril 2014 Statut Membre Dernière intervention 20 janvier 2016 175
21 janv. 2015 à 22:36
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!
0

Discussions similaires

trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
[CSS] Mettre un objet au premier plan
Achillion -
tiran58 -

2 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse