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

Marsh Posté le 05-12-2008 à 18:51:07

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 :

@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/*******************************************************************************
LAYOUT INFORMATION: describes box model, positioning, z-order
*******************************************************************************/
/* Le récipient extérieur de la barre de menu, une boîte automatique de largeur sans margin ou padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
cursor: default;
width: 600px;
}
/* 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 */
ul.MenuBarActive
{
z-index: 1000;
}
/* Les récipients d'article de menu, enfants de position relative à ce récipient et ont une largeur fixe */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
position: relative;
text-align: left;
cursor: pointer;
float: left;
width: auto+10px;
min-width: 80px;
max-width: 120px;
}
/* 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 */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
z-index: 1020;
cursor: default;
position: absolute;
left: -1000em;
}
/* 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 */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
float: none;
background-color: transparent;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
/*******************************************************************************
DESIGN INFORMATION: describes color scheme, borders, fonts
*******************************************************************************/
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 1px solid;
border-color:#CCCCCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #FDF2DB;
padding: 0.5em 0.75em;
color: #FF9900;
text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #FF9900;
color: #FFFFFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #FF9900;
color: #FFFFFF;
}
/*******************************************************************************
SUBMENU INDICATION: styles if there is a submenu under a given menu item
*******************************************************************************/
/* 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%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* 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%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* 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%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* 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%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/*******************************************************************************
BROWSER HACKS: the hacks below should not be changed unless you are an expert
*******************************************************************************/
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
float: left;
background: #FFFFFF;
}
}

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 ?

Reply

Marsh Posté le 05-12-2008 à 18:51:07

Reply

Marsh Posté le 05-12-2008 à 19:25:00

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

Message cité 1 fois

Reply

Marsh Posté le 05-12-2008 à 19:30:58

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

Reply

Marsh Posté le 05-12-2008 à 20:38:28

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

Reply

Marsh Posté le 05-12-2008 à 21:08:27

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 !

Reply

Marsh Posté le 05-12-2008 à 22:33:55

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 :

ul.MenuBarHorizontal ul li
{
float: none;
opacity: .80;
filter: alpha(opacity=80);
}

Reply

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

Sujets relatifs:

Leave a Replay