早上好, 我有一个css代码让我发疯,因为我无法纠正它! 这是代码:
<div id="main_body">
<div class="left_panel round">
<div class="sub_left_panel round">
<table id="menu" width="100%" cellspacing="0" cellpadding="1">
<tr class="header"><td colspan="2">Main Menu</td></tr>
<tr class="sub_header"><td colspan="2">Links</td></tr>
<tr class="options"><td width="20"><img src="css/images/icons/house.png" /></td><td style="padding-left: 0;">Home Page</td></tr>
<tr class="options thelast"><td width="20"><img src="css/images/icons/email.png" /></td><td style="padding-left: 0;">Messages</td></tr>
<tr class="sub_header"><td colspan="2" style="font-weight: bold; padding-left: 5px;" bgcolor="#E2E2E2">Settings</td></tr>
<tr class="options"><td width="20"><img src="css/images/icons/wrench.png" /></td><td style="padding-left: 0;">Account Settings</td></tr>
<tr class="options thelast"><td width="20"><img src="images/16x16/privacy.png" /></td><td style="padding-left: 0;">Privacy Settings</td></tr>
<tr class="sub_header"><td colspan="2" style="font-weight: bold; padding-left: 5px;" bgcolor="#E2E2E2">Your Baggage</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/photo-album.gif" /></td><td style="padding-left: 0;">Photo Album(s)</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/drafts.gif" /></td><td style="padding-left: 0;">Drafts</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/music-beam-16.png" /></td><td style="padding-left: 0;">Music</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/video.gif" /></td><td style="padding-left: 0;">Videos</td></tr>
<tr class="options thelast"><td width="20" style="padding-left: 15px;"><img src="images/16x16/files.png" /></td><td style="padding-left: 0;">Files</td></tr>
</table>
</div>
</div>
<div class="left_panel round">
<div class="sub_left_panel round">
<table id="menu" width="100%" cellspacing="0" cellpadding="1">
<tr class="header"><td colspan="2">Main Menu</td></tr>
<tr class="sub_header"><td colspan="2">Links</td></tr>
<tr class="options"><td width="20"><img src="css/images/icons/house.png" /></td><td style="padding-left: 0;">Home Page</td></tr>
<tr class="options thelast"><td width="20"><img src="css/images/icons/email.png" /></td><td style="padding-left: 0;">Messages</td></tr>
<tr class="sub_header"><td colspan="2" style="font-weight: bold; padding-left: 5px;" bgcolor="#E2E2E2">Settings</td></tr>
<tr class="options"><td width="20"><img src="css/images/icons/wrench.png" /></td><td style="padding-left: 0;">Account Settings</td></tr>
<tr class="options thelast"><td width="20"><img src="images/16x16/privacy.png" /></td><td style="padding-left: 0;">Privacy Settings</td></tr>
<tr class="sub_header"><td colspan="2" style="font-weight: bold; padding-left: 5px;" bgcolor="#E2E2E2">Your Baggage</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/photo-album.gif" /></td><td style="padding-left: 0;">Photo Album(s)</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/drafts.gif" /></td><td style="padding-left: 0;">Drafts</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/music-beam-16.png" /></td><td style="padding-left: 0;">Music</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/video.gif" /></td><td style="padding-left: 0;">Videos</td></tr>
<tr class="options thelast"><td width="20" style="padding-left: 15px;"><img src="images/16x16/files.png" /></td><td style="padding-left: 0;">Files</td></tr>
</table>
</div>
</div>
<div class="left_panel round">
<div class="sub_left_panel round">
<table id="menu" width="100%" cellspacing="0" cellpadding="1">
<tr class="header"><td colspan="2">Main Menu</td></tr>
<tr class="sub_header"><td colspan="2">Links</td></tr>
<tr class="options"><td width="20"><img src="css/images/icons/house.png" /></td><td style="padding-left: 0;">Home Page</td></tr>
<tr class="options thelast"><td width="20"><img src="css/images/icons/email.png" /></td><td style="padding-left: 0;">Messages</td></tr>
<tr class="sub_header"><td colspan="2" style="font-weight: bold; padding-left: 5px;" bgcolor="#E2E2E2">Settings</td></tr>
<tr class="options"><td width="20"><img src="css/images/icons/wrench.png" /></td><td style="padding-left: 0;">Account Settings</td></tr>
<tr class="options thelast"><td width="20"><img src="images/16x16/privacy.png" /></td><td style="padding-left: 0;">Privacy Settings</td></tr>
<tr class="sub_header"><td colspan="2" style="font-weight: bold; padding-left: 5px;" bgcolor="#E2E2E2">Your Baggage</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/photo-album.gif" /></td><td style="padding-left: 0;">Photo Album(s)</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/drafts.gif" /></td><td style="padding-left: 0;">Drafts</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/music-beam-16.png" /></td><td style="padding-left: 0;">Music</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/video.gif" /></td><td style="padding-left: 0;">Videos</td></tr>
<tr class="options thelast"><td width="20" style="padding-left: 15px;"><img src="images/16x16/files.png" /></td><td style="padding-left: 0;">Files</td></tr>
</table>
</div>
</div>
</div>
这是主体代码。这是主体css代码
/* Start Mian Body */
div#main_body
{
width: 900px;
position: absolute;
padding-top: 100px;
z-index: -1;
}
div.left_panel
{
position: relative;
left: -10px;
width: 200px;
background: #0099CC;
padding-top: 5px;
padding-bottom: 7px;
padding-right: 7px;
padding-left: 5px;
border-radius: 5px;
margin-left: -5px;
margin-top: 10px;
}
div.sub_left_panel
{
position: relative;
width: 100%;
background: #ffffff;
border-radius: 5px;
border: 1px solid #c0c0c0;
padding: 0;
font-size: 8pt;
}
div.sub_left_panel table#menu
{
padding: 2px;
}
div.sub_left_panel table#menu tr.header td
{
text-align: center;
vertical-align: center;
background: #0099CC;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-weight: bold;
}
div.sub_left_panel table#menu tr.sub_header td
{
font-weight: bold;
padding-left: 5px;
background: #E2E2E2;
}
div.sub_left_panel table#menu tr.options td
{
border-bottom: 1px solid #c0c0c0;
padding-left: 15px;
}
div.sub_left_panel table#menu tr.options:hover td
{
background: #0099cc;
color: #ffffff;
cursor: pointer;
}
div.sub_left_panel table#menu tr.thelast td
{
border: none;
}
/* End Mian Body */
问题是:主体垂直沿着页面延伸,但主页脚DIV并没有位于它应该的位置,这是主页脚html代码
<div id="main_footer" class="round">
<center>
<a href="#">Home</a> -
<a href="#">About Developer</a> -
<a href="#">Follow me on Facebook</a> -
<a href="#">For programming orders : thekingofhackers2008@hotmail.com</a>
</center>
</div>
这是主要的页脚css代码:
/* Start Mian Footer */
div#main_footer
{
color: #ffffff;
background:#3B5998;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
width: 900px;
height: 5px;
position: absolute;
top: 100%;
bottom: 0;
padding-top: 5px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
font-size: 8pt;
}
div#main_footer a
{
color: #ffffff;
text-decoration: none;
}
/* End Main Footer */
答案 0 :(得分:0)
要将页脚保持在正确的位置,只需更改div#main_footer
样式,修改这些行:
position: fixed;
/* top: 100%;*/