I have designed a header and footer for my site and they seem to be ok when they are running individually ( I have a header.php and footer.php) but when I try to run then using a content page with the includes for both files and a few colums in the content page the footer just aligns itself under the shortest column or sometimes on top of all the columns. I think thats because I have set the CSS to place the footer at 100% of the page so it places at the bottom of the page before you scroll down the page which will be good when I have a few lines of comment on a page.

I dont know how I should do my div tags because I have put my opening div tag for the whole website on top of the header.php and closed it at the very end of the footer.php. Does anyone have any ideas of how to get setup the header and footer php?

    misheck;10931708 wrote:

    I have designed a header and footer for my site and they seem to be ok when they are running individually ( I have a header.php and footer.php) but when I try to run then using a content page with the includes for both files and a few colums in the content page the footer just aligns itself under the shortest column or sometimes on top of all the columns. I think thats because I have set the CSS to place the footer at 100% of the page so it places at the bottom of the page before you scroll down the page which will be good when I have a few lines of comment on a page.

    I dont know how I should do my div tags because I have put my opening div tag for the whole website on top of the header.php and closed it at the very end of the footer.php. Does anyone have any ideas of how to get setup the header and footer php?

    What do you have in each of these files?

      here is the css file

      /*Start of header */
a:link { color: #696; text-decoration: none; background-color: transparent; } 
a:visited { color: #699; text-decoration: none; background-color: transparent; } 
a:hover { color: #c93; text-decoration: underline; background-color: transparent;background-color: #99FF66; } 
a:active { color: #900; text-decoration: underline; background-color: transparent; }

p.left {float: left;}
p.right{float: right; color:#696 ;}
a.logo:link {font-size: x-large; color: green;font-weight: bold; text-decoration: none;}
a.logo:visited {font-size: x-large; color: green;font-weight: bold; text-decoration: none;}
a.logo:hover {font-size: x-large; color: green;font-weight: bold; text-decoration: none;background-color: ;}
a.logo:active {font-size: x-large; color: green;font-weight: bold; text-decoration: none;}
select.header {color: #696;}
input.header {color: #696;}
hr.header {color: #696;background-color: #f00;height: 1px; border-bottom: 0px; border-top: 0px;}

/*End of header */


/*Here is the body tag formatting 
Beginning of body*/
body {width: 60%; margin-left: auto; margin-right: auto;height: 100%; }


/*Beginning of main division */
#main_topleft {width: 40%;
 background-color: #99FF66 ; 
 float: left;}
/*End of main division */



/*Beginning of middle division */

#middle {width: 15%;float: left; background-color: #66FFCC;}
/*End of middle division */



/*Beginning of main top right division */
#main_topright{width: 30%; float: left; background-color: #FFCC00;}
/*End of main top right division */



/*Beginning of advert division */
#advert {width: 15%;float: right; background-color: #FFFF00;}

/*End of main advert division */



/*Beginning of footer */


#footer {position: absolute;bottom: 0;width: inherit; padding-top: 3px; }
hr.footer { color: #696;background-color: #f00;height: 1px;}
p.footer {text-align: center; }
span.footer {color: red;}

      here is the footer and header
      Go to:

      <!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" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="misheck" />
	<link rel="stylesheet" href="style/style.css" type="text/css" />

<title>Welcome to Shout-Africa</title>
</head>
<body>
<div id="header">

<p class="left"><a href="">Sign in</a> | <a href="">Register</a></p> 
<p class="right">
Go to:
<select class="header"><option value="Zimbabwe" >Zimbabwe</option><option value="Ghana">Ghana</option>
<option value="Nigeria">Nigeria</option>
<option value="Kenya">Kenya</option>
<option value="Zambia">Zambia</option>
<option value="Gambia">Gambia</option>
</select>
<input type="submit" value="Go" class="header"/></p><br />
<p>&nbsp;</p>
<hr  class="header"/>
<a href="" class="logo">Shout-Africa</a>

<hr class="header"/>
<p class="left">
<a href="">News</a> |
<a href="">Politics</a> |
<a href="">Sports</a> |
<a href="">Entertainment</a> |
<a href="">Gallery<a> |
<a href="">TV</a> |
<a href="">Music</a>
</p>
</div>
[B]footer[/B]
<a href="">Worldwide</a> |
<a href="">Africa</a> |
<a href="">UK</a> |
<a href="">Zimbabwe</a> |
<a href="">Ghana</a> |
<a href="">Nigeria</a> |
<a href="">Kenya</a> |
<a href="">Zambia</a> |
<a href="">Gambia</a> 

<br />
<a href="">Submit Story</a> |
<a href="">Contact Us</a> |
<a href="">Careers</a> |
<a href="">Advertising</a> |
<a href="">Competitions</a>
<br />
<span class="footer">
 &copy;Copyrights Reserved. Site Influenced and designed by Smartymatic and Misheck
 </span> 
</p>
</div>
</div>

</body>
</html>

      This works ok on its own but the moment I put div tags inside my container for the colums I need it places the footer under the shortest column.

      I had forgotten to add the html doc type. also here is the content page

      <?php include("header.php");?>
<div id="main_topleft">Main Division top left</div>
<div id="middle">This a middle div to contain featured items</div>
<div id="main_topright">This top right for videos etc</div>
<div id="advert">This is an advert column</div>
<?php include("footer.php");?>

        Well, first of all, you need to work on the CSS because it's definitely not doing what you want it to do, but besides that, you have a #footer element in your css file, which currently isn't being used. So I wrapped your footer in a div with the footer id.

        Second, you should put your link lists in unordered lists.

        Third, google three column css layouts or something.

        Anyway, here's what I did, and it did something you might want (note, all of these files are in the same directory):

        index.php:

        <?php include('header.php'); ?>
    <div id="main_topleft">Main Division top left</div>
    <div id="middle">This a middle div to contain featured items</div>
    <div id="main_topright">This top right for videos etc</div>
    <div id="advert">This is an advert column</div>
<?php include('footer.php'); ?>

        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" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="misheck" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <title>
      Welcome to Shout-Africa
    </title>
  </head>
  <body>
    <div id="header">
      <p class="left">
        <a href="">Sign in</a> | <a href="">Register</a>
      </p>
      <p class="right">
        Go to: <select class="header">
          <option value="Zimbabwe">
            Zimbabwe
          </option>
          <option value="Ghana">
            Ghana
          </option>
          <option value="Nigeria">
            Nigeria
          </option>
          <option value="Kenya">
            Kenya
          </option>
          <option value="Zambia">
            Zambia
          </option>
          <option value="Gambia">
            Gambia
          </option>
        </select> <input type="submit" value="Go" class="header" />
      </p><br />
      <hr class="header" />
      <a href="" class="logo">Shout-Africa</a>
      <hr class="header" />
      <p class="left">
        <a href="">News</a> | <a href="">Politics</a> | <a href="">Sports</a> |
        <a href="">Entertainment</a> | <a href="">Gallery</a> | <a href="">TV</a> | <a href="">Music</a>
      </p>
    </div>

        footer.php:

        <div id="footer">
      <a href="">Worldwide</a> | <a href="">Africa</a> | <a href="">UK</a> |
      <a href="">Zimbabwe</a> | <a href="">Ghana</a> | <a href="">Nigeria</a> | <a href="">Kenya</a> |
      <a href="">Zambia</a> | <a href="">Gambia</a><br />
      <a href="">Submit Story</a> | <a href="">Contact Us</a> | <a href="">Careers</a> |
      <a href="">Advertising</a> | <a href="">Competitions</a><br />
      <span class="footer">Copyrights Reserved. Site Influenced and designed by Smartymatic and Misheck</span>
    </div>
  </body>
</html>

        I didn't touch the CSS file, but you should 😛

          the elements seem rather messed-up -

          and there doesn't seem to be a div with the id of "footer" ...

          [edit] - that's just been said before me !

            I think attempting to repair this to work is the wrong approach and everything seems a bit messed up. What I will do for now is to design the whole page as one first and then cut-out the header.php and footer.php when everything is working ok.

            But one last thing is it better to use id for css than class?

              misheck;10931772 wrote:

              But one last thing is it better to use id for css than class?

              Use IDs for static elements, like your footer and your header. Use classes for properties that will be repeated.

                Thanks I will start on a new header and footer soon.

                  My problem was I using too many ID tags and I did not have to repeat them or use them I dont have a lot of knowledge of CSS .

                    jaql;10931773 wrote:

                    Use IDs for static elements, like your footer and your header. Use classes for properties that will be repeated.

                    It's more of a preference than anything.

                      Write a Reply...