0

So I am learning HTML, CSS, PHP, and I am using php include to add the header & footer I can set the footer to a certain height for each page or set it invidually by creating separate stylesheets.

Is there a way to get the footer to appear under content for every page using php include? When the content is different lengths on each page?

Here is my footer code

HTML

<footer>
  <ul>
    <a href="../../page1.php">
      <li>page1</li>
    </a>
    <a href="../../page2.php">
      <li>page2</li>
    </a>
    <a href="../../page3.php">
      <li>page3</li>
    </a>
    <a href="../../page4.php">
      <li>page4</li>
    </a>
    <a href="../../page5.php">
      <li>page5</li>
    </a>
  </ul>
</footer>

CSS

footer {
  padding: 20px;
  margin-top: 450px;
  height: 1%;
  color: #ffffff;
  background-color: #30323D;
  text-align: center;
}

footer ul {
  margin-left: 0;
  padding: 0;
  list-style-type: none;
  float: left;
}

footer ul a {
  text-decoration: none;
  color: #fff
}

footer p {
  margin-top: 120px;
}

When using position absolute

LewisJames
  • 13
  • 8
  • Are you looking for a sticky footer that is pushed down when the content is shorter than the window height? This [SO answer](https://stackoverflow.com/questions/4575826/how-to-push-a-footer-to-the-bottom-of-page-when-content-is-short-or-missing) might help. – trevorp May 07 '18 at 18:51
  • I don't need one to move with user input just to move if I add any content – LewisJames May 07 '18 at 18:59
  • Not sure i understand. Your footer should appear under your content if you add your `include` under your content on each page. it should automatically be next as it is loaded after your content. Do you have an example of your problem? – Claire May 07 '18 at 19:01
  • it is at the bottem to my html but the content seems to run through posted an image link – LewisJames May 07 '18 at 19:12

3 Answers3

1

I have been able to fix the issue I was experiencing

Here is a JSFiddle

https://jsfiddle.net/lewisjames101/4h20Lwzm/

HTML
<div id="container">
<div id="header">My Header</div>
<div id="body">Small amount of content</div>
<div id="footer">My Footer</div>
</div>



CSS

html,
body {
margin:0;
padding:0;
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;
 }

Thank you for your input, it was helpful

LewisJames
  • 13
  • 8
  • Although you took away my precious points, that is a better solution. :) I remember thinking that you wanted the footer to be always below the content, not necessarily at the bottom of the page, like in your example. – Jos van Weesel May 26 '18 at 15:30
0

I think you want position: relative. this allows your footer to be positioned after all of the content on a page.

footer {
   position: relative;
   padding: 20px;
   color: #ffffff;
   background-color: #30323D;
   text-align: center;
}
bowl0stu
  • 352
  • 1
  • 12
0

Your footer should appear at the bottom of your page if it is written in to your HTML at the bottom. There should be no need for any special tricks to keep it there. I have removed the float:left declaration from your CSS, as well as the position:absolute declaration. No need for either of these.

https://jsfiddle.net/90cbe4km/1/

Your elements will always appear in the same order on your page as in your HTML as long as you don't move them around with CSS

Claire
  • 3,146
  • 6
  • 22
  • 37
  • the bottem of the page is like this

    test

    test

    test

    test

    And the test headers run under the footer

     – LewisJames May 07 '18 at 19:18
  • and what exactly is your problem? the footer is not being loaded onto the page? the footer is in the wrong spot? can you confirm your include is working properly? – Claire May 07 '18 at 19:20
  • the most helpful thing you can do on Stack Overflow is detail your issue and provide a working example in a jsFiddle – Claire May 07 '18 at 19:21
  • Its showing up, the content is running through the footer unless I put lot of margin or create a stylesheet for each page I can't use jsfiddle with php include can I? – LewisJames May 07 '18 at 19:24
  • A PHP include just takes HTML content from a php file and pastes it right into your page. just copy and paste your code from the include onto the page and it should run the exact same. then you can create a fiddle – Claire May 07 '18 at 19:30
  • updated fiddle: https://jsfiddle.net/90cbe4km/1/ I removed the absolute positioning (do not use for this purpose) and also the `float:left` declaration. Also no need for this. I have updated my answer, please accept as the correct answer if this works for you. The current accepted answer is misleading for future visitors. – Claire May 07 '18 at 20:42