0

Hi,

I'm trying to make a template page for my web site.

The main template will include a header section, a main body section and a footer section (not included in sample code). I want to make the header and footer sections separate html pages so I only need to maintain that code in one place. I'm including the header and footer using "php include". I'm linking in a style page in the main page.

The problem I am having is that the included php page doesn't seem to see the linked in style page, so all the styling for the "nav" is not working.

Any idea what I'm doing wrong???

THANKS!!!

(code included below)

template.php

<!DOCTYPE HTML>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="page.css" />

</head>

<body>


    <div id="pagecontainer" class="shadow"> <!-- BEGIN Page Container -->
        <?php include('header.html'); ?>    <!-- DISPLAY The header information -->    


    </div> <!-- END Page Container -->

</body>
</html>

header.html

    <div> <!-- START HEADER -->

        <div> <!-- START PAGE TITLE -->
            <img src="pageimages/main_title.png"/>


        </div> <!-- END TITLE -->

        <div id="nav"> <!-- START MENU NAV BAR -->
            <ul>
                <li>
                    <a href="page1.php">Home</a>
                </li>
                <li>
                    <a href="page2.php">Photo Galleries</a>
                </li>
                <li>
                    <a href="page3.php">Contact Us</a>
                </li>
            </ul>
        </div> <!-- END MENU NAV BAR -->


    </div> <!-- END HEADER -->

page.css

    html{
        font-family: helvetica, arial, sans-serif;
        color: rgb(230, 150, 50);
    }
    body{
        background-color: #C9BDA5;
    }

    #pagecontainer{
        margin: auto;
        width: 1024px;
        height:768px;
        background-image: url("pageimages/pagebackground.jpg");
    }

    .shadow {
        -moz-box-shadow:    3px 3px 15px 6px #555;
        -webkit-box-shadow: 3px 3px 15px 6px #555;
        box-shadow:         3px 3px 15px 6px #555;
    }


    #nav {
        height: 30px;
        width: 90%;
        margin-left: 50px;
        margin-bottom: 30px;
        background-color: #888;


    }
    #nav ul {
        margin: 0px;
        padding: 0px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1em;
        color: #FFF;
        line-height: 20px;
        white-space: nowrap;
        padding-left: 15px ;
        padding-top: 5px;
    }
    #nav li {
        list-style-type: none;
        display: inline;
        margin-left: 15px;
        padding: 2px;
    }
    #nav li a {
        text-decoration: none;
        color: #FFF;
    }
    #nav li a:link {
        color: #FFF;
    }
    #nav li a:visited {
        color: #FFF;
    }
    #nav li a:hover {
        font-weight: bold;
        color: #CCC;
        background-color: #666;
    }    
3
Contributors
4
Replies
6
Views
5 Years
Discussion Span
Last Post by code739
3

@tenorjazz

The problem I am having is that the included php page doesn't seem to see the linked in style page, so all the styling for the "nav" is not working.

You can't use html code in a include() command, it has to be php extension or it will not process the command.

<?php include('header.html'); ?>    <!-- DISPLAY The header information -->

You should rename it header.php

Instead of this

<?php include('header.html'); ?>    <!-- DISPLAY The header information --> 

it should be this:

<?php include('header.php'); ?>    <!-- DISPLAY The header information --> 

For your style:

Instead of this:

<link rel="stylesheet" href="page.css" />

it should be

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

Edited by LastMitch: grammer

Votes + Comments
To Rectify what some retard did to LastMitch
0

I added styling to my header include. Not very elegant, but it works except for the <a:link> <a:visited> <a:hover> stuff.

here's the code. (I tried to add this as a code block in my reply, but it didn't seem to work)

    <div> <!-- START HEADER -->

        <div> <!-- START PAGE TITLE -->
            <img src="pageimages/main_title.png"/>


        </div> <!-- END TITLE -->

    <!-- START MENU NAV BAR -->         
        <div style="
    height: 30px;
    width: 90%;
    margin-left: 50px;
    margin-bottom: 30px;
    background-color: #888;
    "> 

            <ul style="
        margin: 0px;
        padding: 0px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1em;
        color: #FFF;
        line-height: 20px;
        white-space: nowrap;
        padding-left: 15px ;
        padding-top: 5px;
        ">
                <li style="
        list-style-type: none;
        display: inline;
        margin-left: 15px;
        padding: 2px;
        ">
                    <a style="
            text-decoration: none;
            color: #FFF;"
           href="page1.php">Home</a>
                </li>
                 <li style="
        list-style-type: none;
        display: inline;
        margin-left: 15px;
        padding: 2px;
        ">
                    <a style="
            text-decoration: none;
            color: #FFF;"
           href="page2.php">Photo Galleries</a>
                </li>
                 <li style="
        list-style-type: none;
        display: inline;
        margin-left: 15px;
        padding: 2px;
        ">
                    <a style="
            text-decoration: none;
            color: #FFF;"
           href="page3.php">Contact Us</a>
                </li>
            </ul>
        </div> <!-- END MENU NAV BAR -->


    </div> <!-- END HEADER -->
0

LastMich - I did what you said, worked great and much more elegant that what I did.

Makes sense changing it to .php.

THANKS!!!

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.