Question

有人可以向我解释为什么我在页脚css中的图像不会显示为背景吗？我有一个小的无序列表作为导航菜单和页脚主要内容分别向左和向右浮动，我觉得他们是阻碍，但我认为他们的默认值将是透明的....任何提示，请？我是新手。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML       4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>title</title>
<style type="text/css" media="screen, print, projection">
body{
    background: #DAA520;
}
#wrap {
    width:1000px;
    margin:0 auto;
    background: white;
}
#alldivs{
}
#header{ 
    background: blue;
    height: 150px;
}
#nav{
    background: yellow;
    padding: 0px;
    margin: 0px;
    background:white repeat-x;
    width:100%;
    float:left;
    border: 1px solid #42432d;
    border-width:1px 0;
}
#nav li{
    display: inline;
    padding: 0px;
    margin: 0px;
}
#nav a:link,
#nav a:visited {
    color:#000;
    background:#FFFFF0;
    float:center;
    width:auto;
    border-right:1px solid #42432d;
    text-decoration:none;
    font:bold 1em/1em Arial, Helvetica, sans-serif;
    text-transform:uppercase;
}
#nav a:hover,
#nav a:focus {
    color:#fff;
    background:blue;
}
#main{
    background: white;
    float: left;
    width: 780px;
    padding: 10px;
}
#sidebar{
    background: gray;
    float: right;
    padding: 10px;
    width: 180px;
}
#footer{
    width: 1000px;
    height: 150px;
    clear: both;
    background-image:url(linktopicture.jpg);
}
#footernav li{
    display: inline;
}
#footernav a:link,
#footernav a:visited {
    color:gray;
    text-decoration:none;
    text-transform:uppercase;
    padding-left: 15px;
}
#footer ul{
    float: left;
    width: 500px;
    margin: 0px;
    padding-top: 35px;
    padding-bottom: 3px
    text-align: left;
}
#footercontent {
    width: 490px:
    float: right;
    text-align: right;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 0px;
}


</style> 
</head>



<body>
<br>
<div id="alldivs">
<div id ="wrap">
<div id="header"><img src="linktopicture" alt="text"/> </div>
<ul id="nav">
<li id="home"><a href="homelink">HOME</a></li>
<li id="services"><a href="serviceslink">SERVICES</a></li>
<li id="contact"><a href="linkcontact">CONTACT</a></li>
</ul>
<div id="main"><p>
main content

</p></div>
<div id="sidebar">sidebar space</div>
<div id="footer">
<ul id="footernav">
<li id="footernavhome"><a href="linkhome">HOME</a></li>
<li id="footernavservices"><a href="linkservices">SERVICES</a></li>
<li id="footernavcontact"><a href="linkcontact">CONTACT</a></li>
</ul>
<div id="footercontent">
<p>
blahh
</br>
blahhh

</p>
</div>
</div>
</div>
</div>



</body>
</html>

Answer 1

您需要在页脚中contain and clear your floats，这样才能显示背景。

以下是原始标记中过于简化的示例：

<div id="footer">
    <ul id="footernav">
        ...
    </ul>

    <div id="footercontent">
        ...
    </div>

    <!-- Here's the Magic -->
    <br style="clear: both; display: block;" />
</div>

有许多方法可以清除浮动元素，但可以说最常见且最容易实现的是clearfix approach - 或更新的高度推荐的 micro clearfix方法。

使用“clearfix”的一个例子将变为：

<div id="footer" class="clearfix">
    <ul id="footernav">
        ...
    </ul>

    <div id="footercontent">
        ...
    </div>      
</div>

Answer 2

如果您不想要完整休息，请添加：

<span class="cleaAll"></span>

对于RJB所说的html，请添加：

.clearAll {
display:block;
height:1px;
}

给你的css，希望它有所帮助。

如何在页脚元素中浮动其他元素时，如何向页脚添加背景图像？

2 个答案: