HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>hangout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="site">
<!-- header -->
<div id="header">
<div id="menu" align="center">
<ul>
<li><a href="index.html" class="btnHome active"> <img src="images/btn/spacer.gif" alt="" width="120" height="36"></a></li>
<li><a href="portfolio.html" class="btnPort"> <img src="images/btn/spacer.gif" alt="" width="120" height="36"></a></li>
<li><a href="#.html" class="btnVideos"> <img src="images/btn/spacer.gif" alt="" width="120" height="36"></a></li>
<li><a href="#.html" class="btnNews"> <img src="images/btn/spacer.gif" alt="" width="120" height="36"></a></li>
<li><a href="#.html" class="btnGallery"> <img src="images/btn/spacer.gif" alt="" width="120" height="36"></a></li>
<li><a href="#.html" class=" btncontacts"> <img src="images/btn/spacer.gif" alt="" width="120" height="36"></a></li>
<li><a href="#.html" class=" btnAbout"> <img src="images/btn/spacer.gif" alt="" width="120" height="36"></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin : 0;
padding : 0;
text-align : center;
}
html {
width : 100%;
height : 100%;
background-color : #222222;
}
body {
width : 100%;
height : 100%;
background: url('images/hdr-bg.gif') top left repeat-x;
}
#site {
width : 988px;
margin : 0 auto;
}
#header {
padding : 15px 0 15px 0;
width : 988px;
overflow : hidden;
position : relative;
}
#menu {
width : 988px;
height : 36px;
margin : 0;
padding : 0px 0 0 14px;
}
#menu ul {
overflow : hidden;
padding : 0 3px 0 0;
}
#menu li {
display : inline;
list-style-type : none;
}
#menu a {
display : block;
float : left;
}
.btnHome{background:url('images/btn/Home.png') top left no-repeat;}
.btnPort{background:url('images/btn/Port.png') top left no-repeat;}
.btnVideos{background:url('images/btn/Videos.png') top left no-repeat;}
.btnNews{background:url('images/btn/News.png') top left no-repeat;}
.btnContact{background:url('images/btn/mid.png') top left no-repeat;}
.btnGallery{background:url('images/btn/Gallery.png') top left no-repeat;}
.btncontacts{background:url('images/btn/contacts.png') top left no-repeat;}
.btnAbout{background:url('images/btn/About.png') top left no-repeat;}
#menu a:hover, .active {
background-position : bottom left;
}
嗨,我的菜单有 2 个问题。首先是集中菜单。我不能取出浮动左侧因为我的菜单不会是水平的。第二件事是 btn pics 似乎它们在 IE 中不粘在一起。顺便说一句,每个 btn***.png 的长度为 120px
将不胜感激您的帮助