CODEWITHSUNDEEP
cssheaderfooter
Isaac
Isaac

Reputation: 89

centralizing a message below the header in CSS

I have a header, which is united for all pages and I'm calling it in everypage, below the header I want to apply css style on a message, something like in the picture, but why the message is being localized behind the header, is something that couldn't understand.. I wanted something like, a header at the top, footer at the bottom, and in the center of the page a centralized message with css..

here are the pic and the code.

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

and the php code is something like this:

{include file="header.tpl"}

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

{$MSG}

</div>
</div>



{include file="footer.tpl"}

This is one question, the other, is how can I force the footer to be at the end of the page? I know I'm using the position:fixed; command, but I coudn't find a correct way to keep it the the end just like here at this forum!!

Upvotes: 0

Views: 101

Answers (3)

Mx.
Mx.

Reputation: 3665

Here's a working version of your code 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>

Upvotes: 1

Lilly
Lilly

Reputation: 121

add the following:


    #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;
    }

you can also add the elements position: relative;
just as you need it

Upvotes: 0

Ecnelis
Ecnelis

Reputation: 55

Try adding z-index: 1 or more, like 999, to #reg_msg

#reg_msg {
z-index: 999;
}

But this might not be it... Maybe clear on main_container?

#main_container {
clear: both;
}

And the footer... Can you show us the whole page?

Upvotes: 0

Related Questions