Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2349 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Divers problèmes de CSS avec une barre de menu...

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Divers problèmes de CSS avec une barre de menu...

n°1822625
orion51
Posté le 05-12-2008 à 18:51:07  profilanswer
 

Salut tout le monde,
je suis en train de faire mon site, seulement j'ai 2 ou 3 petits problème à cause de ma barre de menus...
- premier truc :
je veux mettre ma largeur d'élément de menu à minimum 80px, et maximum 120px jusque là pas de soucis, mais là ou j'ai un problème, c'est que mon texte se superpose à ma flèche de déroulement de mon menu... ( -= Bravo-Sierra =- vous pouvez voir mon souci ici)
en fait je pensais mettre ma largeur d'élément en auto + 10 ou 20px mais je n'y arrive pas et je ne sais pas si c'est possible...
 
- et deuxièmement :
je voudrais mettre mes menu déroulant en transparent, et je n'y arrive pas non plus... comment faire ?
 
voici mon code CSS :

Code :
  1. @charset "UTF-8";
  3. /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
  4. /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
  5. /*******************************************************************************
  6. LAYOUT INFORMATION: describes box model, positioning, z-order
  7. *******************************************************************************/
  8. /* Le récipient extérieur de la barre de menu, une boîte automatique de largeur sans margin ou padding */
  9. ul.MenuBarHorizontal
  10. {
  11.     margin: 0;
  12.     padding: 0;
  13.     list-style-type: none;
  14.     font-family: Verdana, Arial, Helvetica, sans-serif;
  15.     font-size: 12px;
  16.     cursor: default;
  17.     width: 600px;
  18. }
  19. /* Placez la barre de menu active avec cette classe, plaçant actuellement le z-index pour adapter au bogue de rendu d'IE: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
  20. ul.MenuBarActive
  21. {
  22.     z-index: 1000;
  23. }
  24. /* Les récipients d'article de menu, enfants de position relative à ce récipient et ont une largeur fixe */
  25. ul.MenuBarHorizontal li
  26. {
  27.     margin: 0;
  28.     padding: 0;
  29.     list-style-type: none;
  30.     position: relative;
  31.     text-align: left;
  32.     cursor: pointer;
  33.     float: left;
  34.     width: auto+10px;
  35.     min-width: 80px;
  36.     max-width: 120px;
  37. }
  38. /* Les sous-menus devraient apparaître au-dessous de leur parent (top : 0) avec un z-index plus élevé, mais ils sont initialement du côté gauche de l'écran */
  39. ul.MenuBarHorizontal ul
  40. {
  41.     margin: 0;
  42.     padding: 0;
  43.     list-style-type: none;
  44.     z-index: 1020;
  45.     cursor: default;
  46.     position: absolute;
  47.     left: -1000em;
  48. }
  49. /* Le sous-menu qui montre avec la désignation de classe MenuBarSubmenuVisible, nous réglons à gauche en auto donc il vient sur l'écran au-dessous de son article de menu parental */
  50. ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
  51. {
  52.     left: auto;
  53. }
  54. /* Menu item containers are same fixed width as parent */
  55. ul.MenuBarHorizontal ul li
  56. {
  57.     float: none;
  58.     background-color: transparent;
  59. }
  60. /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
  61. ul.MenuBarHorizontal ul ul
  62. {
  63.     position: absolute;
  64.     margin: -5% 0 0 95%;
  65. }
  66. /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
  67. ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
  68. {
  69.     left: auto;
  70.     top: 0;
  71. }
  73. /*******************************************************************************
  75. DESIGN INFORMATION: describes color scheme, borders, fonts
  77. *******************************************************************************/
  79. /* Submenu containers have borders on all sides */
  80. ul.MenuBarHorizontal ul
  81. {
  82.     border: 1px solid;
  83.     border-color:#CCCCCC;
  84. }
  85. /* Menu items are a light gray block with padding and no text decoration */
  86. ul.MenuBarHorizontal a
  87. {
  88.     display: block;
  89.     cursor: pointer;
  90.     background-color: #FDF2DB;
  91.     padding: 0.5em 0.75em;
  92.     color: #FF9900;
  93.     text-decoration: none;
  94. }
  95. /* Menu items that have mouse over or focus have a blue background and white text */
  96. ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
  97. {
  98.     background-color: #FF9900;
  99.     color: #FFFFFF;
  100. }
  101. /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
  102. ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
  103. {
  104.     background-color: #FF9900;
  105.     color: #FFFFFF;
  106. }
  108. /*******************************************************************************
  110. SUBMENU INDICATION: styles if there is a submenu under a given menu item
  112. *******************************************************************************/
  114. /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
  115. ul.MenuBarHorizontal a.MenuBarItemSubmenu
  116. {
  117.     background-image: url(SpryMenuBarDown.gif);
  118.     background-repeat: no-repeat;
  119.     background-position: 95% 50%;
  120. }
  121. /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
  122. ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
  123. {
  124.     background-image: url(SpryMenuBarRight.gif);
  125.     background-repeat: no-repeat;
  126.     background-position: 95% 50%;
  127. }
  128. /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
  129. ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
  130. {
  131.     background-image: url(SpryMenuBarDownHover.gif);
  132.     background-repeat: no-repeat;
  133.     background-position: 95% 50%;
  134. }
  135. /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
  136. ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
  137. {
  138.     background-image: url(SpryMenuBarRightHover.gif);
  139.     background-repeat: no-repeat;
  140.     background-position: 95% 50%;
  141. }
  143. /*******************************************************************************
  145. BROWSER HACKS: the hacks below should not be changed unless you are an expert
  147. *******************************************************************************/
  149. /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
  150. ul.MenuBarHorizontal iframe
  151. {
  152.     position: absolute;
  153.     z-index: 1010;
  154. }
  155. /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
  156. @media screen, projection
  157. {
  158.     ul.MenuBarHorizontal li.MenuBarItemIE
  159.     {
  160.         display: inline;
  161.         float: left;
  162.         background: #FFFFFF;
  163.     }
  164. }


 
merci d'avance de votre aide !
 
PS : je travaille sur dreamweaver CS, c'est d'ailleurs la barre de menu de dreamweaver que j'ai un peu modifiée ! par contre je ne sais pas à quoi sert le z-index ?

mood
Publicité
Posté le 05-12-2008 à 18:51:07  profilanswer
 

n°1822641
Profil sup​primé
Posté le 05-12-2008 à 19:25:00  answer
 

Spa les widgets Spry de dreamweaver çà ? [:haha klemton]

Message cité 1 fois
n°1822646
orion51
Posté le 05-12-2008 à 19:30:58  profilanswer
 


 
si si, je l'ai marqué ! mais je l'ai un peu modifié !
mais je n'arrive pas à faire ce que je veux...

n°1822697
J_D_
- EricShawn -
Posté le 05-12-2008 à 20:38:28  profilanswer
 

Le Z-index définit la position d'un élément sur l'axe Z.  
 
Plus la valeur donnée est grande, plus l'élément sera positionné devant les autres.

Message cité 1 fois
n°1822707
orion51
Posté le 05-12-2008 à 21:08:27  profilanswer
 

J_D_ a écrit :

Le Z-index définit la position d'un élément sur l'axe Z.  
 
Plus la valeur donnée est grande, plus l'élément sera positionné devant les autres.


ok merci pour l'info, j'avais compris l'axe des z, mais ça me paraissait bizarre ! lol je comprenais pas !

n°1822722
orion51
Posté le 05-12-2008 à 22:33:55  profilanswer
 

bon ! je viens de réussir à faire ma transparence pour les menu, faut juste que je toruve les bonnes couleurs et les bon réglages, mais j'ai toujours mon problème de taille d'élément...
pour la transparence, j'ai mis :  

Code :
  1. ul.MenuBarHorizontal ul li
  2. {
  3. float: none;
  4. opacity: .80;
  5. filter: alpha(opacity=80);
  6. }



Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Divers problèmes de CSS avec une barre de menu...

 

Sujets relatifs
Adapter menu à la taille de la police du joueurGénérer un menu pdf via perl PDF::API2
[EDIT après avoir bossé un peu] Retour sur le menu principalMenu déroulant influant sur un deuxième menu déroulant
Problèmes avec Joomla & phpMyAdminExternalInterface... problemes IE6
[HTML/Javascript/CSS] [resolu] spoiler une partie de tableau[résolu] Problème avec iframe et menu déroulant
Problème d'image d'arrière-plan en CSS[HTML/CSS] problème d'organisation - Résolu.
Plus de sujets relatifs à : Divers problèmes de CSS avec une barre de menu...

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.076 secondes

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)