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
Post a Comment