use php to add html header and footer section to a particular page -


i have 2 php pages called header.php , footer.php.they used add header , footer every page have. have include them every page.but problem when try add content in mid section goes directly under header section.what reason behaviour?

here in particular code h1 tag not visible.it goes under header portion.

index.php:

<?php    include('header.php'); ?>    <h1>this page</h1>  <?php    include('footer.php');  ?> 

header.php:

<html> <head> <style>   </style> </head> <body>  <div id='head'>    <span ><a href='#' id='top'>myphp</a></span>    <ul id='huls'>       <li><a href='#'>home</a></li>       <li><a href='#'>faq</a></li>       <li><a href='#'>log in</a></li>       <li><a href='#'>about us</a></li>    </ul> </div> 

footer.php:

<div id='footer'>    <div id='col1' class='fdiv'>        <ul>           <li><a href='#'>faq</a></li>           <li><a href='#'>faq</a></li>           <li><a href='#'>faq</a></li>           <li><a href='#'>faq</a></li>         </ul>     </div >        <div id='col2' class='fdiv'>        <ul>           <li><a href='#'>faq</a></li>           <li><a href='#'>faq</a></li>           <li><a href='#'>faq</a></li>           <li><a href='#'>faq</a></li>         </ul>     </div >        <div id='col3' class='fdiv'>        <ul>           <li><a href='#'>faq</a></li>           <li><a href='#'>faq</a></li>           <li><a href='#'>faq</a></li>           <li><a href='#'>faq</a></li>         </ul>     </div>        <div id='col4' class='fdiv'>        <ul>           <li><a href='#'>faq</a></li>           <li><a href='#'>faq</a></li>           <li><a href='#'>faq</a></li>           <li><a href='#'>faq</a></li>         </ul>     </div > </div> </body> </html> 

css:

   *{      margin:0px;      padding:0px;    }     span{        position:relative;        display:inline;        left:20px;        float:left;     }     #head{         position:absolute;         width:100%;         height:70px;         background:skyblue;         top:0px;         clear:both;     }     #huls li{        float:right;        margin-right:30px;        list-style-type:none;     }     #huls a{        font-size:23px;        color:white;        text-decoration:none;     }     span #top{        font-size:35px;        text-decoration:none;        color:white;      }        #footer{          width:100%;          height:170px;          position:absolute;          background:crimson;          bottom:10px;       }       .fdiv{           width:24%;          height:100%;          position:relative;          float:left;           text-align:center;        }       #footer a{         text-decoration:none;         color:white;         font-size:17px;       }       #footer li{         list-style-type:none;       } 

remove position:absolute; on #head , works.


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -