28173 sujets

CSS et mise en forme, CSS3

Menu multicolore

Bonjour. C'est mon premier post ici et le fait qu'il concerne directement la résolution d'un problème ne me mets pas trop a l'aise mais bon, ça seras mon tour d'aider les autres dans l'avenir Smiley smile

J'essaye de créer une menu multicolore pour les différentes partie qui le compose. Une image vite fait pour donner une aperçu de ce que je veux faire: http://img49.imageshack.us/img49/8425/menuuk2.gif

Code HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="menu_alsa2.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="menu">

<ul>
<li id="menu_element1"><a href="#">ELEMENT1<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="#" title="A_SUB1">A_SUB1</a></li>
	<li><a href="#" title="A_SUB2">A_SUB2</a></li>
	<li><a href="#" title="A_SUB3">A_SUB3</a></li>
	<li><a href="#" title="A_SUB4">A_SUB4</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="menu_element2"><a href="#">ELEMENT2<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="#" title="B_SUB1">B_SUB1</a></li>
	<li><a href="#" title="B_SUB2">B_SUB2</a></li>
	<li><a href="#" title="B_SUB3">B_SUB3</a></li>
	<li><a href="#" title="B_SUB4">B_SUB4</a></li>
	<li><a href="#" title="B_SUB5">B_SUB5</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul>
</div>
</body>
</html>


CSS:
#menu_element1{
font: bold normal 11px Verdana, Helvetica, Arial, sans-serif;
text-decoration: none;
color: red;!important}

#menu_element2 ul{
font: bold normal 11px Verdana, Helvetica, Arial, sans-serif;
text-decoration: none;
color: blue;!important}

.menu {
width:auto;
font-size:0.85em;
position:relative;
z-index:100;
}
/* supprime le puces bordures et padding par defaut */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:150px;
}
/* float de la list pour le mettre en horizontal et controler le positionement du drop down avec le positionement relative */
.menu li {
float:left;
width:150px;
position:relative;
}
/* styler les liens du 1er niveau */
.menu a, .menu a:visited {
display:block;
width:139px; 
height:30px; 
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background: white; 
padding-left:10px;
font: bold normal 10px Verdana, Helvetica, Arial, sans-serif;
text-decoration: none;}

/* IE5.5 hack pour le box model*/
* html .menu a, * html .menu a:visited {
width:150px;
w\idth:139px;
}

/* styler le background du 2eme niveau SUB */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#fff9da;

}
/* style le hover du 2eme niveau SUB */
.menu ul ul a.drop:hover{
background:#c9ba65;
}
.menu ul ul :hover > a.drop {
background:#c9ba65 url(../../graphics/drop.gif) bottom right no-repeat;
}

/* cacher le subleveles et les positioner pour qu'ils prends pas d'espaces */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0; 
width:150px;
}

/* autre hack pour IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px;
}


/* styler les SUBS 2eme niveau */
.menu ul ul a, .menu ul ul a:visited {
background:#fff9da; 
height:auto; 
line-height:1em; 
padding:5px 10px; 
width:129px

/* hack pour IE5.5 */
}
* html .menu ul ul a{
width:150px;
w\idth:129px;
}


/* styler le hover du 1er niveau */
.menu a:hover, .menu ul ul a:hover{
background:#fff9da;
}
.menu :hover > a, .menu ul ul :hover > a {
background:#fff9da;
}

/* afficher le 2eme niveau SUBS on hover du 1er niveau */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible; 
}


Pour bien séparer les propriétés "primaires" (positionnement, taille etc) avec les couleurs j'ai donné des ID aux Elements du 1er niveau pour leur assigner ses propriétés couleur mais malgré ça rien change.

Flasheur de formation je fait mes premiers pass dans le monde du CSS donc toute aide sera bienvenue.
J'ai déjà vu qu'on peux arriver a des tels fins un utilisent du JS mais je veux bien rester uniquement sur du CSS pur

merci
Tun0x
Modifié par Tunox (03 Jun 2007 - 16:36)
Salut,

bon j'ai regardé Smiley bawling ben tu n'utilises pas les hacks et les commentaires conditionnels a la petite cuillère toi. Smiley lol

sinon pour rajouter de la couleur a tes éléments j'ai coloré les <a>

#menu_element1{
font: bold normal 11px Verdana, Helvetica, Arial, sans-serif;
text-decoration: none;
color: red;!important}

#menu_element1 a{
color:red;
}


toi tu colorais le texte autre que les liens.

bon je te conseille quand même de te limiter soit aux commentaires conditionnels ( de loin preferable ) soit aux hacks...( quoi que penses a ceux qui vont te relire ).

pascal
Sujet clos
Aller à