CODEWITHSUNDEEP
csshtml
Edoardo Moreni
Edoardo Moreni

Reputation: 408

including footer.php and header.php

I have created a top bar and a bottom bar for my website's index. I have isolated both of them in two files, the header.php, which controls the top bar and the footer.php, which controls the bottom bar.

In the index there is no problem, but if I create a new page like about.php, and I include the two php files, the top and bottom bar are moved to the right by 10px (or something like that).

In this case the page is larger, because there is this tiny blank space to the left, before the beginning of the two bars.

Here are the two files:

Header.php

<style>
.blue { background-color: #039; width: 100%; height: 15%; position: absolute; top: 0px; } 
html, body { width: 650px; background-color:#F5F5F5;}
</style>

<div class="blue">
    <h1 style="text-align: center; color:#FFFFCC ;font-family:"Times New Roman",Times,serif;">My Website</h1>
</div>

Footer.php

<ul id="figo">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>


<style> 
#figo {background-color: #039; position:absolute; bottom:0px; width:100%;}
ul{
  list-style-type:none;
  margin:0;
  padding:0;
  overflow:hidden;
}

li{
  float:right;
}

a{
  display:block;
  width:90px;
  color:#FFFFCC;

}
</style>

INDEX.PHP Here I post the index.php

-

 <html> 

   <head> <title> About </title> </head> 

   <body> 



   <? include 'header.php'; ?>

   <?include 'footer.php'; ?>


   </body> 

   </html>

Upvotes: 1

Views: 13842

Answers (3)

tylerlindell
tylerlindell

Reputation: 1563

The reason your getting the padding on the left is because you have <html> on both your header.php as well as the page you are loading the header file on.

Additionally, it would be a better practice to put header and footer into a higher level folder within your server. Then reference that file with 

Include("../../header.php");

The styles being within one or two style sheets is the best way to accomplish styling as well. You would need to refer to nodes in you document by parent class and class or IDs. That would allow you to get different styles on different pages but have one style sheet.

<div class='parent'>
    <div class='child'>
         //do stuff
    </div>
</div>

Then style with

<style type='text/css'>
    .parent .child{
        cool:stuff;
    }
</style>

And finally, make sure the style only shows up within the <head> of the page:-)

Upvotes: 0

Highway of Life
Highway of Life

Reputation: 24311

The <style></style> tags should only go into the <head></head> portion of a document. You want to avoid having any inline styles as well. Better than using <style></style>, you should put all the styles that are to be used by all of your pages into a single stylesheet.

I would implement a wrapper (container) and give that your page width and position relative, this will align your footer menu to the bottom of that block (assuming that's what you're trying to achieve). If not, drop the position from the container.

With all of these changes, the structure would look something like this. Keep in mind this is a very archaic design, but it should help get you started. header.php:

<!DOCTYPE html>
<html>
<head>
<title><?php echo $title; ?></title>
...
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
...
</head>
<body>
<div id="container">
    <div class="blue" id="header">
        <h1>Header Content</h1>
    </div>

index.php/about.php/whatever.php...

<?php
$title = 'My About Page';
include('header.php');
?>
    <div>Your page contents</div>
<?php include('footer.php'); ?>

footer.php:

    <div id="footer">
        <ul id="figo">
            <li><a href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>
        </ul>
    </div>
</div><!-- end "container" -->
</body>
</html>

/css/stylesheet.css:

body {
    background-color: #F5F5F5;
    margin: 0;
    padding: 0;
}

#container {
    position: relative;
    width: 650px;
}

.blue {
    background-color: #039;
    height: 15%;
}

#figo {
    background-color: #039;
    position: absolute;
    bottom: 0px;
    margin: 0;
    padding: 0;
    width: 100%;
}

#figo ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#figo li {
    float: right;
}

#figo a {
    display: block;
    width: 90px;
    color: #FFFFCC;
}

Upvotes: 1

benesch
benesch

Reputation: 5269

Kill the position: absolute on your .blue top bar. You don't need it; since it's at the top of your HTML, it'll be at the top of the page. [The space is probably the result of the default padding on the body.] Try CSS like this:

html, body { background-color:#F5F5F5; margin: 0; padding: 0; }
.blue { background-color: #039; height: 15%; }

To be sure, though, we'd need to see index.php and footer.php.

Why are you setting a width on the html and body elements? That's a little funky. If you want a 600px-wide content area with a gray background, create a wrapper div and apply the background to that:

#wrap { background: #f5f5f5; width: 600px; }

<body>
    <div id="wrap">
    <?php require "header.php"; ?>
    content here
    <?php require "footer.php"; ?>
    </div>
</body>

Also, style elements should be placed as children of the head element. Or, better yet, in an external stylesheet, so you separate presentation from content.

Upvotes: 0

Related Questions