Header.php does not work

Question

phphp 14 Junior Poster in Training

7 Years Ago

Sir, I have this header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <link rel="stylesheet" href="css/css3menu1.css" type="text/css" /> 

    <style type="text/css"> 
        #header1 { 
            width: 100%; 
            color: #FFC; 
            background-image: url(images/header.gif); 
            font-size: 28px; 
            font-weight: bold; 
            font-style: oblique; 
            text-align: left; 
            padding: 5px; 
            position: fixed; 
        } 
        #header1 img { 
            vertical-align: middle; 
        } 
        .userbox { 
            float: right; 
            width: 300px; 
            height: auto; 
            padding: 7px; 
            overflow: hidden; 
            margin-right: 2px; 
            margin-top: 0; 
            text-align: center; 
            color: #666; 
            font-size: 16px; 
            font-weight: bold; 
            line-height: 20px; 
            border: 0px solid red; 
        } 
        .userpic { 
            float: right; 
            width: 80px; 
            padding-top: 2px; 
            overflow: hidden; 
            margin-right: 1px; 
            margin-top: -1px; 
            text-align: left; 
            color: #666; 
            font-size: 16px; 
            font-weight: bold; 
            line-height: 10px; 
            border: 0px solid red; 
        } 

    </style> 
</head> 

<body> 
    <div id="header1"> 
        <a href="index.php"> 
            <img src="images/new_icon11.gif" height="55" width="45" hspace="10" title="Go to Home" />
        </a> 
        eAccounts 

    </div> 
</body> 

</html>

and this is sample.php

<?php

$error_reporting = E_ALL;
session_start();
include_once("includes/connectsql.php");
include_once("includes/header.php");

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Trial Balance</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="-1" />

    <style type="text/css">
        html {
            overflow: auto;
            margin: 0;
            height: 100%;
            min-height: 100%;
        }
        #container {
            min-height: 100%;
            position: relative;
            background-color: #FFF;
            padding: 10px;
            width: 100%;
            border-radius: 5px;
            overflow: hidden;
        }
        #content {
            width: 85%;
            height: auto;
            border-color: #e3eeff;
            background-color: #F2FBFF;
            margin-top: 2px;
            text-align: left;
            border: 0px solid #06F;
            overflow-y: auto;
            margin: 0 auto;
            padding: 30px;
            box-shadow: 0px 0px 10px 10px #CCCCFF;
            margin-top: 20px;
            margin-bottom: 20px;
        }
    </style>

</head>

<body>

    <div id="container">This is Container Div
        <div id="content">This is Content Div
        </div>
    </div>
</body>

</html>

when I run sample.php it looks like this

HEADER IS NOT SHOWING
I think the problem is in these codes (header.php)

 #header1 { 
            width: 100%; 
            color: #FFC; 
            background-image: url(images/header.gif); 
            font-size: 28px; 
            font-weight: bold; 
            font-style: oblique; 
            text-align: left; 
            padding: 5px; 
            position: fixed; 
        }

when I remove

  position: fixed;

then Header is showing like this

What I am doing wrong?
So how to make my HEADER FIXED?

Please

html-css php

3 Contributors
7 Replies
350 Views
1 Day Discussion Span
Latest Post 7 Years Ago Latest Post by gentlemedia

diafol

7 Years Ago

Another common approach is to make a basic index.php page and do something like:

include "..includes/header.php";
include "..includes/getcontent.php";
include "..includes/footer.php";

The getcontent.php file check for a page querystring parameter and grabs content accordingly. $_GET['page']

gentlemedia 803 Master Poster

7 Years Ago

Try to give it a z-index, because it might behind the #container div which has a min-height of 100% and a white background color. This might be covering the header.

#header1 { 
    width: 100%; 
    font-size: 28px; 
    font-weight: bold; 
    font-style: oblique; 
    position: fixed;
    z-index: 100;
}

Just to be sure I set a z-index of 100, but 1 or 2 should be enough as well.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

diafol · Answer 1 · 2016-12-17T20:53:24+00:00

Your pages are not right. You are including a page and then supplying another page. Have a look at the page source in the browser and you'll see the mess. I assume it's going to look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <link rel="stylesheet" href="css/css3menu1.css" type="text/css" /> 
    <style type="text/css"> 
        #header1 { 
            width: 100%; 
            color: #FFC; 
            background-image: url(images/header.gif); 
            font-size: 28px; 
            font-weight: bold; 
            font-style: oblique; 
            text-align: left; 
            padding: 5px; 
            position: fixed; 
        } 
        #header1 img { 
            vertical-align: middle; 
        } 
        .userbox { 
            float: right; 
            width: 300px; 
            height: auto; 
            padding: 7px; 
            overflow: hidden; 
            margin-right: 2px; 
            margin-top: 0; 
            text-align: center; 
            color: #666; 
            font-size: 16px; 
            font-weight: bold; 
            line-height: 20px; 
            border: 0px solid red; 
        } 
        .userpic { 
            float: right; 
            width: 80px; 
            padding-top: 2px; 
            overflow: hidden; 
            margin-right: 1px; 
            margin-top: -1px; 
            text-align: left; 
            color: #666; 
            font-size: 16px; 
            font-weight: bold; 
            line-height: 10px; 
            border: 0px solid red; 
        } 
    </style> 
</head> 
<body> 
    <div id="header1"> 
        <a href="index.php"> 
            <img src="images/new_icon11.gif" height="55" width="45" hspace="10" title="Go to Home" />
        </a> 
        eAccounts 
    </div> 
</body> 
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Trial Balance</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="-1" />
    <style type="text/css">
        html {
            overflow: auto;
            margin: 0;
            height: 100%;
            min-height: 100%;
        }
        #container {
            min-height: 100%;
            position: relative;
            background-color: #FFF;
            padding: 10px;
            width: 100%;
            border-radius: 5px;
            overflow: hidden;
        }
        #content {
            width: 85%;
            height: auto;
            border-color: #e3eeff;
            background-color: #F2FBFF;
            margin-top: 2px;
            text-align: left;
            border: 0px solid #06F;
            overflow-y: auto;
            margin: 0 auto;
            padding: 30px;
            box-shadow: 0px 0px 10px 10px #CCCCFF;
            margin-top: 20px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="container">This is Container Div
        <div id="content">This is Content Div
        </div>
    </div>
</body>
</html>

Why have you got html, head, body tags in a header.php which is going to be included in a page that also has html, head, body tags? You need to strip off those tags and include the header.php in the bdy section of sample.php. In addition, take out any styling and external file (css) references from header.php and place them in a different file, e.g. common.php and include that in the sample.php head section. You may also have issues from styling collisions from different files and style tags.

phphp 14 Junior Poster in Training · Answer 2 · 2016-12-18T06:55:09+00:00

Thanks for helping

Thanks, now header.php is like this

  <style type="text/css"> 
    #header1 { 
        width: 100%; 
        font-size: 28px; 
        font-weight: bold; 
        font-style: oblique; 
        position: fixed; 
    } 
    #header1 span { 
        position: absolute; 
        top: 9px; 
        left: 5px; 
        color: #FFC; 
    } 
    #header1 img { 
        vertical-align: middle; 
    } 
    .userbox { 
        float: right; 
        width: 300px; 
        height: auto; 
        padding: 7px; 
        overflow: hidden; 
        margin-right: 2px; 
        margin-top: 0; 
        text-align: center; 
        color: #666; 
        font-size: 16px; 
        font-weight: bold; 
        line-height: 20px; 
        border: 0px solid red; 
    } 
    .userpic { 
        float: right; 
        width: 80px; 
        padding-top: 2px; 
        overflow: hidden; 
        margin-right: 1px; 
        margin-top: -1px; 
        text-align: left; 
        color: #666; 
        font-size: 16px; 
        font-weight: bold; 
        line-height: 10px; 
        border: 0px solid red; 
    } 
</style> 

    <div id="header1"> 
        <a href="index.php"> 
            <img src="images/new_icon11.gif" height="55" width="45" hspace="10" title="Go to Home" />
        </a> 
eAccounts  

        <div class="userpic"> 

            <?php $query="SELECT image FROM u_login where email = '" .$_SESSION[ 'email']. "'"; 
             $result=sqlsrv_query($con,$query)or die ( "Error". sqlsrv_errors($con)) ; 

               while($res=sqlsrv_fetch_array($result)) 
                { 
                    echo "<img border=\"0\" width=\"55\" height=\"55\" src=\"" ,"upload/".$res['image']."\">"; 
                 } 
            ?> 
        </div> 

       </div>

and sample.php is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <title>Trial Balance</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta http-equiv="Pragma" content="no-cache" /> 
    <meta http-equiv="Expires" content="-1" /> 

    <style type="text/css"> 

        html {  
            overflow: auto;  
            margin: 0;  
            height: 100%;  
            min-height: 100%;  
        }  
        #container {  
            min-height: 100%;  
            position: relative;  
            background-color: #FFF;  
            padding: 10px;  
            width: 100%;  
            border-radius: 5px;  
            overflow: hidden;  
        }  
        #content {  
            width: 85%;  
            height: auto;  
            border-color: #e3eeff;  
            background-color: #F2FBFF;  
            margin-top: 2px;  
            text-align: left;  
            border: 0px solid #06F;  
            overflow-y: auto;  
            margin: 0 auto;  
            padding: 30px;  
            box-shadow: 0px 0px 10px 10px #CCCCFF;  
            margin-top: 20px;  
            margin-bottom: 20px;  
        }  
    </style> 

</head> 

<body> 

<?php include_once("includes/header.php");?>  

    <div id="container">This is Container Div 
        <div id="content">This is Content Div 
        </div> 
    </div> 
</body> 

</html>

But there is still issues anywhere because HEADER is not displaying in sample.php as shown in image

Please

diafol · Answer 3 · 2016-12-18T09:21:37+00:00

Away till tues. Anybody else?

phphp 14 Junior Poster in Training · Answer 4 · 2016-12-18T14:26:40+00:00

Thanks I have added z-index:100; But now Container div is behind HEADER div shown in this image

What position should I apply to CONTAINER div to give a margin-top so it not show behind HEADER div?

These are codes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <style type="text/css">
        html {
            margin: 0;
            height: 100%;
            min-height: 100%;
            font-size: 28px;
            font-style: normal;
            font-variant: normal;
            font-weight: 500;
            line-height: 26.3999996185303px;
            color: #2793C7;
            text-align: center;
        }
        #header1 {
            position:fixed;
            width: 100%;
            height: 60px;
            line-height:60px;
            color: #FFC;
            background-color: silver;
            font-size: 28px;
            font-weight: bold;
            font-style: oblique;
            text-align: left;
            padding: 5px;
            left: 0;
            top: 0;
            z-index: 100;

        }
        #container {
            min-height: 100%;
            width: 95%;
            height: auto;
            margin: 10px;
            background-color:#B6EBC9;
            padding: 10px;
            border-radius: 5px;
            padding: 15px;
            border: 1px solid green;

        }
         #container p {
            color:red;
        }
        #content {
            width: 85%;
            height: auto;
            border-color: #e3eeff;
            background-color: #F2FBFF;
            text-align: left;
            border: 0px solid #06F;
            margin: 0 auto;
            padding: 30px;
            box-shadow: 0px 0px 10px 10px #CCCCFF;
        }

        #content p {
              color: brown;
        }

    </style>
</head>

<body>
    <div id="header1">This is Header Div</div>

    <div id="container"><p>This is Container Div</p>
        <div id="content">
            <p>This is Content Div</p>
            <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ipsum magna, et convallis sem. Nunc pulvinar magna vitae orci malesuada blandit. Proin ac purus dui. Suspendisse venenatis egestas egestas. Sed tincidunt diam et massa convallis et mollis enim malesuada. Nullam eget metus nunc, eget imperdiet urna. Quisque vehicula ipsum non sapien vulputate convallis quis quis ligula. Aenean gravida mollis blandit. Nullam lacus tortor, viverra a auctor ac, porta eget neque. Duis placerat mi metus, a gravida quam. Nam ut augue mauris, at dapibus quam. Pellentesque eu nunc enim. Proin facilisis, dolor nec sollicitudin mattis, sem velit mollis sem, sagittis sagittis libero ante id nunc. Nam congue, mauris non porttitor convallis, purus elit faucibus nunc, in mollis sem lorem eu tortor. Cras nec justo id libero fringilla placerat ac et leo. Mauris ac vehicula odio. Cras augue erat, sodales vel porttitor ut, scelerisque nec justo. Praesent vitae lorem erat. Suspendisse elementum tortor vitae diam venenatis eget fermentum lacus suscipit. Quisque varius vulputate tempus. Aliquam lacinia lacus vel ante sagittis vestibulum fringilla sem accumsan. Phasellus eget dictum ipsum. Sed sed aliquam nisi. Nam vitae tempus tellus. Vestibulum convallis tellus diam, sed posuere lectus. Nulla diam velit, tristique in dignissim quis, porta eu nulla. Quisque quis nisl urna, id adipiscing quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer justo nisi, sollicitudin vitae port
        </div>
    </div>

</body>

</html>

gentlemedia 803 Master Poster · Answer 5 · 2016-12-18T22:42:44+00:00

Give container a top margin of 60 px (the height of the header) and I'd recommend to take out the min-height: 100% and height: auto, because they don't make much sense in the way you have your mark-up.