2011-08-28 114 views
1

我有一个标题和菜单栏,我已经修复留在页面的顶部,所以当有人在页面上滚动或菜单和标题在手边。问题与固定菜单

我的问题是关于页面的内容/正文。我尝试过使用绝对定位从顶部向下150像素(菜单和标题为125像素),并且我希望页面顶部的两个像素之间的距离为25像素。

但是,它位于页面的左侧,但我希望它以流畅的方式居中。

我也试着给出一个150px的顶部边距,但是由于某种原因没有工作。

我怎样才能水平居中它,但垂直顶部至少有150px?

这是一些代码。

如果您需要更直观的东西,您可以在我的测试网站http://sunnahmatch.com上看看现在发生了什么。

编辑我有垂直间距向下。现在,如果我能弄清楚如何居中呢? :/

<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> 

回答

1

没有什么不对您的CSS,您的文档只是缺少一个DOCTYPE。将 <!DOCTYPE html>添加到文档的顶部。或者用于XHTML 1.1的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

另外一个建议是,包裹整个事情的html标签为好,并把style标签的head标签内

那么你会像这样结束:

<!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> 

您在head标记之外有一个style元素。首先把它放在头标签里面。然后更改为body_container的CSS:删除position:absolute并将边距更改为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%; 
} 
+0

不,我有完整的文档类型,HTML,身体等标签,我只是没有包括他们,因为我认为它会重复和假设,:/ – Nathan

+0

同意,但有趣的方面是,如果你打开你的网站在Opera或FF中,然后选择“查看源代码”它不会显示它们。我认为这可能与正文中的'style'标记有关。请参阅我的更新。 (在IE的“查看源代码”中,你可以看到你的文档类型和html等) – Bazzz

+0

该修复工作的大部分,除了我有一个150px的边缘整个事情,我只是希望它在顶部虽然。 – Nathan

1

你可以尝试一个特定的宽度设置为您DIV并设置利润率左保证金右自动。这会自动以div为中心。

请试试看本教程,它正在查看同样的问题。 Centering a DIV

+0

这将不能用流体股利?我的内容宽度为70%,如果可能,我个人喜欢保留它 – Nathan

+0

Bazzz在他的回答中使用的差不多:* margin:150px auto 0 auto; *
这意味着* margin-top:150px;保证金右:自动;边距:0; margin-left:auto; *所以是的,它会工作:) – GEMI

+0

哦真棒,我明白了,它顺时针,右上角左下角,这是很好的知道! – Nathan

0

....和<html><head><title>

想过使用验证服务?

+0

我使用w3c验证,显然我应该在完成页面之前使用它。 – Nathan