Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    81
    Thanks
    11
    Thanked 1 Time in 1 Post

    i need help with php header and footer

    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?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,859
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Does anyone have any ideas of how to get setup the header and footer php?
    Please post the code in your header and footer and a link to your page.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Sep 2008
    Location
    Mexabet.biz
    Posts
    89
    Thanks
    12
    Thanked 0 Times in 0 Posts
    This will give you a clue:

    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta name="keywords" content="" /> 
    <meta name="description" content="" />
    
    </head>
    
    <body>
    <div class="outerwrapper">
    <?php
    // Display the page header
    include('header.php');
    ?>
    Your content goes here.
    <?php
    // Display the page footer
    include('footer.php');
    ?>
    </div>
    </body>
    </html>
    I hope it helps.
    Last edited by mexabet; 10-22-2009 at 12:22 PM. Reason: changed the header and footer from .tpl to .php

  • #4
    New Coder
    Join Date
    Dec 2008
    Posts
    81
    Thanks
    11
    Thanked 1 Time in 1 Post
    I am running all the test on my laptop but in the meanwhile I will look for a free webhost so I can show you the result of I am what I am getting.

    But in the meanwhile, will I need to enter the <html><body></body></html> tags again in my content page when I have already but that code in my header and footer?

    One other thing is that the body of website is set 60% in CSS and the container that contains everything is set to 100% in CSS because I didnt want my website to be stretched or shrinked on various screen sizes.

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by misheck View Post
    I am running all the test on my laptop but in the meanwhile I will look for a free webhost so I can show you the result of I am what I am getting.

    But in the meanwhile, will I need to enter the <html><body></body></html> tags again in my content page when I have already but that code in my header and footer?

    One other thing is that the body of website is set 60% in CSS and the container that contains everything is set to 100% in CSS because I didnt want my website to be stretched or shrinked on various screen sizes.
    No, you will only need to use the doctype, head, and opening body tags in the header. Likewise you will only need to use the closing body and html tags in the footer. When PHP includes build a page it's just like stacking blocks as a child. One on top of the other builds the page and becomes one document.

    I'm not sure what you are asking about with regard to your body and container widths though. If you are asking about whether that is a problem when using PHP includes then the answer is no. The CSS will be applied to the entire document as though it were a single static HTML file. Or were you asking something else?


    ALSO, see freehostia.com for decent and completely free web hosting. It supports PHP and MySQL.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #6
    New Coder
    Join Date
    Dec 2008
    Posts
    81
    Thanks
    11
    Thanked 1 Time in 1 Post
    I think my problem is more of a css problem than php but because I am using php for the header and footer I have posted it here. I have posted the code but I have not included the content php but thats where I am getting problems once I put in div tags for the 4 columns I will have on my site.

    here is the css file
    Code:
    /*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:
    Code:
    <!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>
    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">
     &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.
    Last edited by misheck; 10-22-2009 at 01:57 PM.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,859
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Hi misheck, if you are trying to get some help, you'd need to post your entire code or a link to your page would be much better, which may save a lot of time from either end.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New Coder
    Join Date
    Dec 2008
    Posts
    81
    Thanks
    11
    Thanked 1 Time in 1 Post
    here is the a smaller content page that I am using for testing

    Code:
    <?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");?>

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,859
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    here is the a smaller content page that I am using for testing
    Whatever you are doing in the serverside code, the final parsed html output(taken from browser's view source option) should be a complete valid document.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #10
    New Coder
    Join Date
    Dec 2008
    Posts
    81
    Thanks
    11
    Thanked 1 Time in 1 Post
    I had skipped copying the top part of the header but I have done that now. This is what I had skipped
    Code:
    <!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:

  • #11
    New Coder
    Join Date
    Dec 2008
    Posts
    81
    Thanks
    11
    Thanked 1 Time in 1 Post
    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?

  • #12
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    One is not necessarily "better" than the other, they are just different. It's like comparing a hammer and a screwdriver. I tend to use an ID in a few key main page component places (wrapper, header, navigation, content, and footer). I also occassionally use them in a few other key places that I know will be unique to a page.

    One thing to note though is that ID's should only appear once on any given page. If you are styling something that appears multiple times in a page then a class is the appropriate choice (or at least a unique ID).
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #13
    New Coder
    Join Date
    Dec 2008
    Posts
    81
    Thanks
    11
    Thanked 1 Time in 1 Post
    I have tried to start over again but I am still getting an error. I am still on a one page before I move over to cutting and pasting everything to create the header.php and footer.php. This is working ok in IE8 but its not working in firefox, here is the link to the test site here

    here is the new code for index page. I have not yet fully utilised all the id tags because I need to keep everything simple for assistance.
    Code:
    <html>
    <link rel="stylesheet" href="styles/style2.css" type="text/css" />
    <body>
    <div id="container">
       <div id="header">
       <p id="header_left">
    									<a id="header_links" href="">Sign in</a> |
    									<a id="header_links" href="">Register</a>
    							</p>
    				<p id="header_right">
    						Go to:
    							<select id="header_select">
    								<option value="Africa">Africa</option>
    								<option value="Worldwide">Worldwide</option>
    								<option value="UK">UK</option>
    								<option value="Zimbabwe">Zimbabwe</option>
    								<option value="Nigeria">Nigeria</option>
    								<option value="Kenya">Kenya</option>
    								<option value="Zambia">Zambia</option>
    								<option value="Gambia">Gambia</option>
    								<option value="Ghana">Ghana</option>
    
    							</select>
    					<input type="submit" value="Go"/>
    				</p>
    						<br />
    				<p>&nbsp;&nbsp;</p>
    <hr id="hr_type1"/>
    		<a href="" id="logo"><big>Shout Africa</big></a>
    <hr id="hr_type1"/>
    						<p id="header_left">
    								<a href="" id="header_links">News</a> |
    								<a href="" id="header_links">Politics</a> |
    								<a href="" id="header_links">Sports</a> |
    								<a href="" id="header_links">Entertainment</a> |
    								<a href="" id="header_links">Gallery</a> |
    								<a href="" id="header_links">TV</a> |
    								<a href="" id="header_links">Music</a> |
    								<a href="" id="header_links">Videos</a>
    						</p>
    </div>
       
       
       <div id="body">
       
       </div>
       <div id="footer">
       <hr id="hr_type1"/>
    						<a href="" id="footer_links">Worldwide</a> |
    						<a href="" id="footer_links">Africa</a> |
    						<a href="" id="footer_links">UK</a> |
    						<a href="" id="footer_links">Zimbabwe</a> |
    						<a href="" id="footer_links">Ghana</a> |
    						<a href="" id="footer_links">Nigeria</a> |
    						<a href="" id="footer_links">Kenya</a> |
    						<a href="" id="footer_links">Zambia</a> |
    						<a href="" id="footer_links">Gambia</a>
                    <br />
                    		<a href="" id="footer_links">Submit Story </a> |
                    		<a href="" id="footer_links">Contact us </a> |
                    		<a href="" id="footer_links">Careers </a> |
                    		<a href="" id="footer_links">Advertising </a> |
                    		<a href="" id="footer_links">Competitions </a> 
        		   <br />
    <span id="copyrights">&copy;2009 Copyrights reserved. Designed and Influenced by Smartymatic and Misheck</span>
       </div>
    </div>
    </body>
    </html>
    Here is the CSS file

    Code:
    html,
    body {
       margin:0;
       padding:0;
       min-height: 100%;
    }
    #container {
       min-height:100%;
       position:relative;
    }
    #header {
       background:#ff0;
       padding:10px;
    }
    #body {
       padding:10px;
       padding-bottom:60px;   /* Height of the footer */
    }
    #footer {
       position:absolute;
       bottom:0;
       width:100%;
       height:60px;   /* Height of the footer */
       background:#6cf;
    }
    #hr_type1 {
    	color: #696; 
    	background-color: #f00; 
    	height: 1px; 
    	border-bottom: 0px;
    	}

  • #14
    New Coder
    Join Date
    Dec 2008
    Posts
    81
    Thanks
    11
    Thanked 1 Time in 1 Post
    I was using too many ID tags so I have started everything again and removed the unneccessary tags. I am still new to CSS and I skipped that whole chapter coz I was interested in php but I have had to back track.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •