css位置问题

时间:2011-09-16 08:36:25

标签: css

早上好,    我有一个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 */

1 个答案:

答案 0 :(得分:0)

要将页脚保持在正确的位置,只需更改div#main_footer样式,修改这些行:

    position: fixed;
/*    top: 100%;*/

查看结果: http://jsfiddle.net/JVrf5/3/