Besoin d'aide pour mon site!
Bonjour,
J'ai un probleme de CSS!!!!
2jours que j'essaye de placer mon menu sous forme d'icone...
Quelqu'un pourrais me dire pourquoi ca ne marche pas?
Voici mon code:\
html
<body>
<ul id="menu">
<li id="menu1"><a href=""><img src="images/menu/home.png" alt="Home" border="0" width="131" height="75" id="menu1" /></a></li>
<li id="menu2"><a href=""><img src="images/menu/about.png" alt="About me" border="0" width="160" height="75" id="menu5" /></a></li>
<li id="menu3"><a href=""><img src="images/menu/book.png" alt="Portfolio" border="0" width="160" height="75" id="menu3" /></a></li>
<li id="menu4"><a href=""><img src="images/menu/contact.png" alt="Contact" border="0" width="117" height="75" id="menu4" /></a></li>
</ul>
<div id="conteneur">
<div id="header">
</div>
<div id="contain"></div>
<div id="footer">
</div>
</div>
</body>
CSS
ul {
padding: 0px ;
margin: 0px 0 ;
text-align: center;
width: 700px;
}
#menu li {
display: inline;
left: 294px;
top: 200px;
position: relative;
z-index: 2;
}
#menu li a:link, #menu li a:visited {
display: block;
float:left;
text-decoration: none;
text-align: center;
}
#menu1 :hover {background: url(images/menu_o/home_o.png) top left no-repeat;}
#menu2 :hover {background: url(images/menu_o/about_o.png) top left no-repeat;}
#menu3 :hover {background: url(images/menu_o/book_o.png) top left no-repeat;}
#menu4 :hover {background: url(images/menu_o/contact_o.png) top left no-repeat;}
</style>
J'ai un probleme de CSS!!!!
2jours que j'essaye de placer mon menu sous forme d'icone...
Quelqu'un pourrais me dire pourquoi ca ne marche pas?
Voici mon code:\
html
<body>
<ul id="menu">
<li id="menu1"><a href=""><img src="images/menu/home.png" alt="Home" border="0" width="131" height="75" id="menu1" /></a></li>
<li id="menu2"><a href=""><img src="images/menu/about.png" alt="About me" border="0" width="160" height="75" id="menu5" /></a></li>
<li id="menu3"><a href=""><img src="images/menu/book.png" alt="Portfolio" border="0" width="160" height="75" id="menu3" /></a></li>
<li id="menu4"><a href=""><img src="images/menu/contact.png" alt="Contact" border="0" width="117" height="75" id="menu4" /></a></li>
</ul>
<div id="conteneur">
<div id="header">
</div>
<div id="contain"></div>
<div id="footer">
</div>
</div>
</body>
CSS
ul {
padding: 0px ;
margin: 0px 0 ;
text-align: center;
width: 700px;
}
#menu li {
display: inline;
left: 294px;
top: 200px;
position: relative;
z-index: 2;
}
#menu li a:link, #menu li a:visited {
display: block;
float:left;
text-decoration: none;
text-align: center;
}
#menu1 :hover {background: url(images/menu_o/home_o.png) top left no-repeat;}
#menu2 :hover {background: url(images/menu_o/about_o.png) top left no-repeat;}
#menu3 :hover {background: url(images/menu_o/book_o.png) top left no-repeat;}
#menu4 :hover {background: url(images/menu_o/contact_o.png) top left no-repeat;}
</style>
Configuration: Windows XP Firefox 3.0.16
