1

At the moment, my footer (found here) is the same width as the wrapper. However, I'd like to get it so that it goes the full width of the page. The problem is, I can't seem to get it out of the wrapper. I would show you my index.php file, but it doesn't seem to display properly here.

To give you a brief overview, I am using the

<?php include("footer.html");?>

to call the footer into each of my pages, which are all PHP files. I am doing the same thing for the header as well.

If anyone has Google Chrome, with the Developer view (think it's a default extension, accessed with F12?) you'll see that the call is in the wrapper. If I drag the called footer_wrapper section and put it at the same level as the wrapper, by dragging it down to above the /body, it does exactly what I want, and expands the footer to cover the page. EDIT: It works fine there, but that's only in Developer mode in Chrome, so nothing is saved. The problem is, I don't know how to replicate that in the actual PHP file

I know that was a poor explanation, but I'm really not sure how to explain it properly!

Any help would be great!

EDIT - Here is my attempt at posting my index.php code: All the indents etc make it a look very messy, and for that I apologise. If you'd like to see the raw code for the index.php, footer.html and header.html, here's the download link

<?php $thisPage="Home";?>
<html>
<head>
<title>Multiverse: The MMO Development Platform</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
</html>

<?php include("header.html");?>

<html>
<div id="content">

 <h2>Homepage</h2>
 <br/>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend imperdiet magna a tempor. Maecenas eu vulputate turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce sit amet lorem sed dolor dignissim pulvinar. Sed mauris ipsum, interdum lobortis mattis sed, pellentesque id lacus. Sed sapien metus, dignissim in convallis eget, aliquet et nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus nunc risus, pulvinar in venenatis ultricies, mollis vel lectus.</p>
          <br/>
          <p>Suspendisse condimentum suscipit faucibus. Integer rutrum tincidunt neque sed sollicitudin. Donec pulvinar arcu id mauris luctus lacinia. Nam eu tempor  velit. Etiam molestie mattis dolor quis lobortis. Mauris mollis, risus at ultrices cursus, sem elit ultricies lectus, eu pretium urna magna a nisi. Maecenas nibh ante, fringilla quis sagittis non, vulputate eu urna. Cras ut turpis orci. Donec tempor bibendum neque. Curabitur ac augue id arcu consectetur adipiscing vestibulum non lorem. In ultrices aliquet augue, hendrerit scelerisque lorem interdum sit amet. Aliquam dictum ipsum varius nisl faucibus ultricies. Vivamus sollicitudin, ligula sed consequat suscipit, augue nulla placerat ante, eu tempus turpis ligula ut mauris.</p>
          <br/>
          <p>Praesent vehicula nisi in velit fringilla porttitor. Duis vulputate risus id sem fringilla auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer id placerat est. Mauris eu leo lacus. Maecenas nibh turpis, congue sed auctor mattis, vestibulum in dolor. Sed auctor commodo nunc. Donec varius posuere lorem, vel bibendum dui euismod vitae. Fusce nec accumsan leo. Maecenas et diam a eros adipiscing venenatis ac eget diam. Fusce semper massa sed eros fringilla sodales. Vestibulum a nibh velit, at adipiscing turpis. Maecenas quis nulla elit, a luctus nunc. Suspendisse nec risus vitae massa mattis adipiscing.</p>
          <br/>
          <p>Curabitur ultrices facilisis scelerisque. Vivamus varius ornare felis, et auctor lacus imperdiet ut. Vivamus vestibulum molestie tellus, eget pulvinar justo dignissim non. Fusce posuere orci vel ligula pretium tempor id sit amet ligula. Nam lectus sem, imperdiet a placerat et, pulvinar in diam. Suspendisse potenti. Nulla sit amet metus magna. Phasellus dapibus molestie mauris at tempus. Aliquam ac risus elit. Vivamus dapibus enim eu orci lobortis aliquam.</p>
          <br/>
          <p>Vivamus ullamcorper consectetur pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus eleifend nisi nec odio imperdiet molestie. Maecenas at nulla tortor, in condimentum lorem. Quisque aliquam tellus non velit varius fermentum. Vivamus sit amet nisi risus, sed sagittis risus. Duis dictum justo et diam vulputate egestas. Suspendisse vel lacus nibh, nec venenatis risus. Duis ac metus sapien, a sollicitudin mi. Vivamus elementum urna eget mauris laoreet hendrerit. Cras vestibulum rutrum nunc, et ultrices turpis congue in. Aliquam sed lorem ligula. Phasellus mollis erat in metus tincidunt pretium.</p>
          <br/>


  <h2>Image examples</h2>
  <p>&nbsp;</p>
  <div id="stock">
    <img src="images/stock.png" alt="Stock Images!" />&nbsp;&nbsp;&nbsp;<img src="images/stock.png" alt="Stock Images!" />
  </div>

<div id="featured_content">

        <div class="featured_block">
    <h3>Why Choose Multiverse?</h3>
    <div class="image" style="background-image:url(http://www.heroengine.com/wp-content/uploads/2011/10/Asset-Browser-Wireframes1.jpeg);"><a href="http://www.heroengine.com/heroengine/why-heroengine/"></a></div>
    <div class="text">
      <p>The Multiverse Platform, provides you with world building tools, renderer, integrated server architecture and an entire game’s worth of example code.</p>
    </div>
  </div>  
        <div class="featured_block">
    <h3>No Programming Required</h3>
    <div class="image" style="background-image:url(http://www.heroengine.com/wp-content/uploads/2011/10/Why-HeroCloud-IS-Right-For-You.jpg);"><a href="http://www.heroengine.com/herocloud/"></a></div>
    <div class="text">
      <p>You can actually make a functional MMO without programming knowledge. You only need to program when you want to make an advanced MMO.</p>
    </div>
  </div>  
        <div class="featured_block">
    <h3>Don't Spend A Cent</h3>
    <div class="image" style="background-image:url(http://www.heroengine.com/wp-content/uploads/2011/10/hfibhbcf.jpg);"><a href="http://www.heroengine.com/2011/10/failure-is-not-an-option-its-a-requirement-the-culture-of-testing-everything/"></a></div>
    <div class="text">
      <p>President and COO of HeroEngine, Neil Harris, discusses failure, it’s role in online game development and the culture of testing everything in his latest blog post.</p>
    </div>
  </div>  

</div>
</div>
<?php include("footer.html");?>
</html>
7
  • "it does exactly what I want, and expands the footer to cover the page."...so problem solved then? Jan 3, 2012 at 22:45
  • 1
    Yes, why don't you pull the footer out of the wrapper?
    – Ben D
    Jan 3, 2012 at 22:48
  • It does exactly what I want, but only in Developer mode in Chrome. It doesn't save to the file, so in the end, it will just reset when I refresh Jan 3, 2012 at 22:50
  • You can always style it with CSS positioning Jan 3, 2012 at 22:52
  • 1
    He's talking about dragging the "footer_wrap" element to the right place using Chrome's Web Inspector, which is obviously a one-time solution.
    – benesch
    Jan 3, 2012 at 22:52

3 Answers 3

1

I imagine index.php looks something like this?

<div id="wrapper">
    <?php include("header.html");?>
    <div id="content">
    <!-- generate content -->
    </div>
    <?php include("footer.html");?>
</div>

Change it so you include footer.html outside of the wrapper div:


Also, it looks like your includes (header.html, footer.html, etc.) are themselves full HTML documents. That is, they include <html> and <body> tags. This is Very Bad.

The final page the browser sees should have only one html element and one body element. These includes should not include anything but the actual HTML elements you want inserted at a given point.

For example, footer.html should look like this:

<div id="footer_wrap">
    <!-- code for footer -->
</div>

It's sometimes easier to use different file extensions for includes [.include, .tmpl, etc.] as a quick reminder that they aren't full HTML documents.


Fixed everything up for you. Download here. Basically, I removed the extraneous html and body tags from index.php, and closed the wrapper div at the start of footer.html instead of at the end. Which effectively "drags" it outside that wrapper div.

5
  • I've posted a link to the actual files (as they are so far, made some changes but hasn't made a difference) Jan 3, 2012 at 23:23
  • You're an absolute star, thank you very much! For some reason, I managed to not notice the wrapper call at the start, so obviously didn't close it properly. I won't make that mistake again, that's for sure! Thanks again :D Jan 3, 2012 at 23:40
  • @trist, no problem! It's so easy to lose the tag hierarchy with includes.
    – benesch
    Jan 3, 2012 at 23:42
  • True.. You mentioned using includes's - is it still html though? Jan 3, 2012 at 23:47
  • Absolutely. The file extension is entirely arbitrary. Besides putting the main script in a .php file (which makes Apache initially run the file through the PHP engine), any included file will automatically be parsed as HTML/PHP.
    – benesch
    Jan 3, 2012 at 23:49
1

Something up with your page, the body tag ends half way through the markup..

Anyways, go into the file and you want to move <?php include("footer.html");?> as close to the end of the document as possible and then set #footer width to 100%

1

The other answers here are correct: you need to pull the footer outside the wrapper and then make sure that in your stylesheets you have

#footer_wrap {width:100%;}

However, if you're desperate not to move the tag (if you have no access to the template files), you can use javascript or jquery to expand the footer once the page loads. But this is definitely an option of last resort.

3
  • With respect, I can't pull it outside the wrapper. That's the problem. As far down as I put the php call, it makes no difference Jan 3, 2012 at 23:04
  • How are you editing this template? Can you post the template code?
    – Ben D
    Jan 3, 2012 at 23:15
  • I've posted it above, and you can download the actual files from the top (index.php, footer.html and header.html) Jan 3, 2012 at 23:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.