我有一个标题和菜单栏,我已经修复留在页面的顶部,所以当有人在页面上滚动或菜单和标题在手边。问题与固定菜单
我的问题是关于页面的内容/正文。我尝试过使用绝对定位从顶部向下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>
"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."
</div>
<div class="spacer">
</div>
<div class="column_left_tmpl">"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."
</div>
</div>
<div id="right_container">
<div class="column_right_tmpl">
<div class="title">Title</div>
"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."
</div>
</div>
</div>
<div>
<?php include_once "pages/footer.php" ?>
</div>
不,我有完整的文档类型,HTML,身体等标签,我只是没有包括他们,因为我认为它会重复和假设,:/ – Nathan
同意,但有趣的方面是,如果你打开你的网站在Opera或FF中,然后选择“查看源代码”它不会显示它们。我认为这可能与正文中的'style'标记有关。请参阅我的更新。 (在IE的“查看源代码”中,你可以看到你的文档类型和html等) – Bazzz
该修复工作的大部分,除了我有一个150px的边缘整个事情,我只是希望它在顶部虽然。 – Nathan