0

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 つの問題があります。まず、メニューの集中化です。左のフロートを取り出すことができないので、メニューが水平になりません。2 つ目は、btn 写真が IE で互いにくっついていないように見えることです。ところで、各 btn***.png の長さは 120px です
。

4

1 に答える 1

0

で行うのは非常に簡単ですdisplay: inline-block;。

ul {text-align: center; font-size: 0;}
li {display: inline-block; vertical-align: top; *zoom: 1; *display: block; font-size: 12px;}
于 2012-09-08T19:19:50.797 に答える