Member Avatar for tenorjazz

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
  • 217 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by code739
Member Avatar for LastMitch

@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 because: grammer
commented: To Rectify what some retard did to LastMitch +0
Member Avatar for tenorjazz

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 -->
Member Avatar for tenorjazz

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

Makes sense changing it to .php.

THANKS!!!

Member Avatar for code739

Nice =)

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.