将页脚图像与内容区域对齐
[英]Aligning footer image to content area
问题描述
I'm trying to get my footer image to be aligned with the content area above it, but I'm not sure how. 
我正在尝试使页脚图像与其上方的内容区域对齐，但不确定如何。 I've browsed around and tried out various things such as adding clear:both but to no avail 我浏览并尝试了各种方法，例如添加clear：both但无济于事
http://dota-bravery.co.cc/ http://dota-bravery.co.cc/
As you can see the bottom is stuck to the left 如您所见，底部卡在左侧
Here's the code part with the footer: 这是带有页脚的代码部分：
#footer {
width: 680px;
height: 100px;
margin: 0 auto;
margin-top: -16px ! important;
padding: 30px 0 0 0;
background: url(http://i.imgur.com/q4neu.png) no-repeat;
}
#footer p {
margin: 0;
padding: 0 0 0 40px;
font-size: 77%;
color: #0F1720;
}
#footer a {
color: #0F1720;
}
I got the margin-top: -16px there because without it I got a space between content and footer which was fixed by this. 我得到了页边距的顶部：-16px，因为没有它，我在内容和页脚之间留了一个空格，这个空格是固定的。 Note that the footer was correctly aligned before I put the generator in. Ever since it's been on the left. 请注意，在放置生成器之前，页脚已正确对齐。因为它位于左侧。 In case it's helpful I'll also copypaste the rest: 如果有帮助，我还将其余部分复制粘贴：
<body>
<div id="wrapper">
<div id="header">
<h1>{%WebsiteName%}</h1>
<p>{%WebsiteSlogan%}</p>
</div>
<!-- end header -->
<div id="menu">
<h2>Menu</h2>
<ul>
<!--{%menu_start=1%}-->
<li><a href="{%menu_href%}">{%menu_display%}</a></li>
<!--{%menu_end=1%}-->
</ul>
</div>
<!-- end menu -->
<div id="page">
<div id="content">
<h1 class="title"><span> </span></h1>
<p>{%content%}</p>
</div>
<!-- end content -->
<div style="clear: both;"> </div>
</div>
<div id="footer"></div>
<!-- end footer --></div>
<div id="wrapper"></div>
<!-- end wrapper -->
</body>
</html>
3 个解决方案
解决方案1
0 2012-01-31 17:04:14
There's a few problems with your code. 您的代码有一些问题。
You have objects that share the same id (wrapper). 您有共享相同ID（包装）的对象。 That's not allowed. 那是不允许的。 Use classes if you want to apply styles to a few objects. 如果要将样式应用于几个对象，请使用类。
To fix your problem, you simply need to move your footer so that it is within the first wrapper div (it's outside at the moment, you're closing the wrapper div just before the fotter div - I've tested it, it fixes your problem). 要解决您的问题，您只需要移动页脚，使其位于第一个包装器div内（此刻在外面，您就在包装器div之前关闭包装器div-我已经对其进行了测试，它可以解决您的问题问题）。
Also, rename the second wrapper to something else. 另外，将第二个wrapper命名为其他名称。
解决方案2
0 2012-01-31 17:04:56
Center the footer: 将页脚居中：
#footer {
margin: 30px auto 0
}
Center the content 集中内容
#wrapper {
width: 680px;
}
You will need to add some additional CSS to fix the inside of the page (width vs padding errors) 您将需要添加一些其他CSS来修复页面内部（宽度与填充错误）
解决方案3
0 2012-01-31 17:06:55
This code needs to be seriously looked at. 此代码需要认真研究。 You have more than one <html> , <head> , and <body> tag. 您有多个<html> ， <head>和<body>标记。 Look like a full HTML page where only body content should be. 看起来像一个完整的HTML页面，仅包含正文内容。 your page is formatted like this - and without correcting that, no realistic trouble shooting can take place whatsoever. 您的页面的格式是这样的-如果不进行更正，则无法进行任何实际的故障排除。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
...
</head>
<body>
...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
...
</head>
<body onload="generator()">
...
</body>
</html>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.