在CSS中的标题下集中消息

时间：2014-09-17 10:32:04

标签： css header footer

我有一个标题，它对所有页面都是统一的，我在每个页面都调用它， 在标题下面我想在消息上应用css样式，如图中所示， 但为什么消息被置于标题后面，是一些无法理解的东西.. 我想要的东西，如顶部的标题，底部的页脚，以及页面中心的css集中消息..

这是图片和代码。

enter image description here 

html, body {
    margin: 0;
    padding: 0;
}

#header {
    width:100%;
    height:auto;
    text-align:center;
    float:left;
    background: #3fa46a;
}

#footer {
    background: #435a6b;
    width:100%;
    height:100px;
    text-align:center;
    color:white;
    font-family:Cambria;
    position:fixed;
    bottom:0;
}

#reg_msg {
margin:0 auto;
display:block;
width:500px;
height:100px;
padding:12px;
border:2px solid black;
border-radius:20px;
font-family:Verdana;
background-color: #EFF5FB;
box-shadow: 3px 3px 10px #888888;
}

#main_container {
    width:auto;
    height:auto;
    z-index:1;
    font-size:14px;
    display: block;
}

和PHP代码是这样的：

{include file="header.tpl"}

<div id="main_container">
<div id="reg_msg">

{$MSG}

</div>
</div>



{include file="footer.tpl"}

这是一个问题，另一个问题是我如何强制页脚位于页面的末尾？我知道我正在使用这个职位：固定;命令，但我找不到一个正确的方法来保持它的结束就像在这个论坛!!

3 个答案:

答案 0 :(得分：1)

这是您的代码的工作版本 的 DEMO 

html,
body { height: 100%; }

body {
  display: table;
  width: 100%;
}

.page-row {
  display: table-row;
  height: 1px;
}

.page-row-expanded { height: 100%; }


html, body {
    margin: 0;
    padding: 0;
}

header {
    background: #3fa46a;
}

header h1 {
  margin: 10px;
  display: block;
  text-align: center;
  background: #3fa46a;  
}

footer {
    background: #435a6b;
    margin:  10px;
}
footer p{
    margin:  10px;
}

#reg_msg_container{
    position: absolute;
    left: 50%;
}

#reg_msg {
  position: relative;
  left: -50%;
  width:500px;
  height:100px;
  border:2px solid black;
  border-radius:20px;
  font-family:Verdana;
  background-color: #EFF5FB;
  box-shadow: 3px 3px 10px #888888;
  padding: 10px;
}

<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<header class="page-row">
  <h1>Site Title</h1>
</header>

<main class="page-row page-row-expanded">
  <p>Page content goes here.</p>
  <div id="reg_msg_container">
    <div id="reg_msg">
     {$MSG}
    </div>
  </div>
</main>

<footer class="page-row">
  <p>Footer, blah blah blah.</p>
</footer>  


<!-- End your code here -->
</body>
</html>

答案 1 :(得分：0)

尝试将z-index：1或更多，如999，添加到#reg_msg 

#reg_msg {
z-index: 999;
}

但这可能不是它......也许在main_container上清楚了吗？

#main_container {
clear: both;
}

页脚...你能告诉我们整个页面吗？

答案 2 :(得分：0)

添加以下内容：


    #header {
        top: 0;
        position: absolute;
    }

    #main_container{
        position: absolute;
        margin-top: 10%;             /* or whatever your header is high */


    /* to make the footer stay at the bottom: */
    #footer{
        bottom: 0;
        position: absolute;
    }

你也可以添加元素位置：relative;
就像你需要它一样

相关问题
最新问题