issue with fixed menu_问答_开发者_运维开发者技术经验分享

I have a header and menu bar that I have fixed to stay at the top of the page, so when ever someone scrolls on the page or something the menu and header are right there at hand.

My question is in regards to the content/body of the page. I have tried using absolute positioning coming down 150 px from the top (the menu and header are 125px), and I want 25px between the two at the top of the page.

However, it instead positions to the left side of the page, but I want it to be centered in a fluid manner.

I have also tried just giving a top margin of 150px, but that didn't work for开发者_JAVA百科 some reason.

How can I center it horizontally, but have it at least 150px from the top vertically?

Here is some of the code.

If you need something even more visual, you can look on my test site http://sunnahmatch.com for what's going on right now.

EDIT I have the vertical spacing down. Now if I could just figure out how to center it? :/

<style type="text/css">
body{
    margin:0;
    background-color:#333;
    }
#body_container{
    position:absolute;
    top:150px;
    padding:15px;
    margin:0 auto;
    width:70%;
    }
#left_container{
    float: left;
    width: 63%;
    padding:5px;
    margin-right:15px;
    background-color:#069;
    -moz-border-radius-topleft: 15px 15px;
    -moz-border-radius-bottomright: 15px 15px;
    border-top-left-radius: 15px 15px;
    border-bottom-right-radius: 15px 15px;
    }
#right_container{
    float:left;
    width: 31%;
    padding:5px;
    background-color:#069;
    -moz-border-radius-topleft: 15px 15px;
    -moz-border-radius-bottomright: 15px 15px;
    border-top-left-radius: 15px 15px;
    border-bottom-right-radius: 15px 15px;
    }
.column_left_tmpl{
    background-color:#FFF;
    padding:10px;
    -moz-border-radius-topleft: 10px 10px;
    -moz-border-radius-bottomright: 10px 10px;
    border-top-left-radius: 10px 10px;
    border-bottom-right-radius: 10px 10px;
    font-family: GeosansLight;
    font-size: 16px;
    }
.column_right_tmpl{
    background-color:#FFF;
    padding:8px;
    -moz-border-radius-topleft: 10px 10px;
    -moz-border-radius-bottomright: 10px 10px;
    border-top-left-radius: 10px 10px;
    border-bottom-right-radius: 10px 10px;
    font-family: GeosansLight;
    font-size: 16px;#59C169
    }
.title {
    width:100% auto;
    padding-top:5px;
    margin-bottom:5px;
    -moz-border-radius-topleft: 5px 5px;
    -moz-border-radius-bottomright: 5px 5px;
    border-top-left-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
    font-family: Arial, Gadget, sans-serif;
    font-size:22px;
    color:#333;
    font-weight: bold;
    }
.spacer{
    height:5px;
    }
#menu_container{
    margin:0;
    position:fixed;
    top:0;
    left:0;}    
</style>

<body>
<div id="menu_container">
<?php include_once "pages/header.php" ?>
</div>
<div id="body_container">
    <div id="left_container">
      <div class="column_left_tmpl">
        <div class="title">Title</div>
      &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot;
        </div>
        <div class="spacer">
        </div>
    <div class="column_left_tmpl">&quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot;
    </div>   
    </div>
    <div id="right_container">
      <div class="column_right_tmpl">
        <div class="title">Title</div>
      &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot;
        </div>
    </div>
</div>
<div>
<?php include_once "pages/footer.php" ?>
</div>

There is nothing wrong with your CSS, your document is just missing a Doctype. Add <!DOCTYPE html> to the top of your document. Or <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> for XHTML 1.1.

An additional advice is to wrap the whole thing in a html tag as well, and put the style tag inside a head tag

So you'll end up with something like this:

<!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"> <head> <style type="text/css"> /* more stuff here */ <div> </div> </body> </html>

You have a style element outside the head tag. Start with putting that inside the head tag. Then change the CSS for body_container: remove position:absolute and change the margin to margin: 150px auto 0 auto;.

#body_container{
 /* position:absolute; */ /* removed */
 top:150px;
 padding:15px;
 /*margin:0 auto;*/
 margin: 150px auto 0 auto; /* changed */
 width:70%;
}

You could try setting a specific width to your div and set margin-left and margin-right to auto. This will automatically center that div.

Try following this tutorial, it is looking at the same problem. Centering a DIV

.... and <html> and <head> and <title>

Thought about using a validation service?