Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP

Mayur Pande
PLUS
Mayur Pande
Courses Plus Student 11,711 Points
Posted by Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Sticky footer working on about and contact page

My sticky footer is working on the about and contact page. However in the index page it just seems to be risen of the bottom a bit. I have used the css calc function as I could not get the flexbox to work without affecting other code. A link to my site.

here is the index file code;

<?php 
$section = "portfolio";
include("inc/header.php");
?>

        <section>
            <div class="showreel-container">
                <iframe src="https://player.vimeo.com/video/148640837?title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>
        </section>
            <div id="controls" id="Controls">

                <button class="filter" data-filter="all">All</button>
                <button class="filter" data-filter=".documentaries">Documentary</button>
                <button class="filter" data-filter=".commercial">Commercial</button>
                <button class="filter" data-filter=".charity">Charity/NGO/Commisions</button>
                <button class="filter" data-filter=".music">Music</button>
                <button class="filter" data-filter=".drama">Drama</button>

            </div>



            <div id="Container" class="container">

            <div class="mix documentaries">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "1"){
                        echo '<div class="imgWrap">
                                <a href="portfolio.php?id='.$doc["id"].'">
                                <img src="img/OneLongJourneyThumb.jpg" alt="One Long Journey Thumbnail"/>
                                <p class="text1">This image looks super neat.</p>
                                </a>
                             </div>';
                    }
                }
            ?>
            </div>
            <div class="mix documentaries">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "2"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/britishbornchinese.jpg" alt="British Born Chinese Thumbnail"/></a>';
                    }
                }
            ?>
            </div>
            <div class="mix documentaries">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "3"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/savingancoatshostpital.jpg" alt="Saving Ancoats Hospital Thumbnail"/></a>';
                    }
                }
            ?>
            </div>
            <div class="mix documentaries">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "4"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/leavinglondonbehind.jpg" alt="Leaving London Behind Thumbnail"/></a>';
                    }
                }
            ?>
            </div>
            <div class="mix documentaries">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "5"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/ersccommisions.jpg" alt="ERSC Comissions Thumbnail"/></a>';
                    }
                }
            ?>
            </div>
            <div class="mix commercial">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "6"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/fitbit.jpg" alt="Fitbit Thumbnail"/></a>';
                    }
                }
            ?>
            </div>
            <div class="mix commercial">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "7"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/stubhub.jpg" alt="Stubhub Thumbnail"/></a>';
                    }
                }
            ?>
            </div>
            <div class="mix charity">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "8"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/capturingstudent.jpg" alt="Capturing The Student Experience Thumbnail"/></a>';
                    }
                }
            ?>
            </div>

            <div class="mix charity">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "9"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/missionstatement.jpg" alt="Mission Statement - The Elders Thumbnail"/></a>';
                    }
                }
            ?>
            </div>

            <div class="mix charity">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "10"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/worldleaders.jpg" alt="World Leaders Thumbnail"/></a>';
                    }
                }
            ?>
            </div>

            <div class="mix charity">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "11"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/israelandpalestine.jpg" alt="Israel and Palestine Thumbnail"/></a>';
                    }
                }
            ?>
            </div>

            <div class="mix charity">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "12"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/kidscompanykidness.jpg" alt="Kids Company Kindness Thumbnail"/></a>';
                    }
                }
            ?>
            </div>

            <div class="mix music">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "13"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/LittleUnsaidThumb.png" alt="Little Unsaid Thumbnail"/></a>';
                    }
                }
            ?>
            </div>

            <div class="mix music">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "14"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/bollywoodbrassband.jpg" alt="Bollywood Brass Band Thumbnail"/></a>';
                    }
                }
            ?>
            </div>

            <div class="mix drama">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "15"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/frenchkissing.jpg" alt="French Kissing Thumbnail"/></a>';
                    }
                }
            ?>
            </div>


            <div class="gap"></div>
            <div class="gap"></div>

        </div>

               </section>


    </div>

    </div><!-- end wrapper -->
    </div><!-- end wrap -->

    <?php include("inc/footer.php") ?>;

here is the footer file code;

<footer class="main-footer">
        <div class="footer-left">
            <span>Website designed by <a href="http://www.mayurpande.com/">Mayur Pande</a></span>
        </div>

        <div class="footer-inner">
            <p>&copy All rites reserved Tom Turner </p>
        </div>

        <div class="footer-right">
            <ul>
                <li><a href="mailto:tom@allritesreversed.co.uk"><img src="img/email_circle.png" /></a></li>
                <li><a href="https://vimeo.com/user6107855"><img src="img/vimeo_circle.png"/></a></li>
                <li><a href="tel:07930543665"><img src="img/phone_circle.png"/></a></li>
            <ul>
        </div>
    </footer>


      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
      <script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
      <script type="text/javascript" src="js/main.js"></script>
      <script type="text/javascript" src="js/responsivemenu.js"></script>
  </body>
</html>

and here is the css;

/***********************
web fonts
/***********************/
@font-face{
    font-family: 'U.S. 101';
    src: url('../fonts/US101.ttf') format('truetype');

}


/************************
GENERAL
************************/
*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html{
  position:relative;
  min-height: 100%;
}
body{
    font-family: proxima-nova, sans-serif;


}



#wrapper {
    display:flex;
    flex-direction:column;
    max-width: 940px;
    min-width: 280px;
    margin: 0 auto;
}




a {
   text-decoration: none;
}

img{
  max-width: 100%; 
}


h3{
  margin: 0 0 1em 0;

}


/************************
HEADING
************************/

header{
  float:left;/*useful for desktop layout*/
  margin: 0 0 15px 0; 
  padding: 5px 0 0 0;
  height: 300px;
  background: linear-gradient(#fff,transparent 30%),
        linear-gradient(0deg, #fff,transparent),
        #fff url('../img/header.jpg') no-repeat center;
  background-size: cover;
  width: 100%;
}

header h1,h2{

  font-family: 'U.S. 101',sans-serif;
}


#logo{
  text-align: center;
  margin: 0;
}

header h1{

  margin-top: 120px;
  margin-bottom: 10px;
  font-weight: bold;
  letter-spacing: 18px;
  font-size: 2.5em;
  line-height: 1em;
}
header h2{

  top:-200px;
  padding-top:-200px;
  font-weight: bold;
  letter-spacing: 5px;
  padding-right:5px;
  font-size:1em;
}

/************************
NAVIGATION
************************/

nav{
  font-family: 'U.S. 101',sans-serif;
  text-align: center;
  padding: 10px 0;
  margin: 30px 0 20px 0;
  letter-spacing:3px;
}

nav ul{
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li{
  display: inline-block;
}

nav a{
  font-weight: 800;
  padding: 15px 10px;

}

nav a:hover{
  text-shadow: 0px 0px 20px #fff;
}



/************************
FOOTER
************************/

.main-footer {
    display:flex;
    flex-direction: column;
    background: #d9e4ea;
    margin-top: 30px;
    align-items: center;
    justify-content: center;
    padding:10px 0;
}

.footer-right ul{
    list-style:none;
    text-align:center;
    padding:0;
    margin:0;
}

.footer-right li{
    display:inline-block;
    width:20%;
    padding:5px;


}

.footer-right li img {
 width: 80%; 
}










/************************
PAGE: PORTFOLIO
************************/



.showreel-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
}




/* Your styles for the iframe */
.showreel-container iframe {

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

button{
  font-family: 'Helvetica Neue', arial, sans-serif;
}

#controls{
  padding: 2%;
/*  background: #333;*/
  background: #fff;
  color: #aaa;
  margin-left: 140px;

}

label{
  font-weight: 300;
  margin: 0 .4em 0 0;
}

button{
  display: inline-block;
  padding: .4em .8em;
  background: #666;
  border: 0;
  color: #ddd;
  font-size: 16px;
  font-weight: 300;
  border-radius: 4px;
  cursor: pointer;
}

button:hover{
   background: #68b8c4;
}

button.active{
  background: #68b8c4;
}

button:focus{
  outline: 0 none;
}

button + label{
  margin-left: 1em;
}

.container{

  padding: 2% 2% 0;
  text-align: justify;
  font-size: 0.1px;
/*  background: #68b8c4;*/
  background: #fff;


  -webkit-backface-visibility: hidden;
}



.container:after{
  content: '';
  display: inline-block;
  width: 100%;
}

.container .mix,
.container .gap{
  display: inline-block;
  width: 49%;
}

.container .mix{
  text-align: left;
  /*background: #03899c;
  margin-bottom: 2%;*/
  display: none;
}

.container .mix.category-1{
  border-top: 2px solid limegreen;
}

.container .mix.category-2{
  border-top: 2px solid yellow;
}

.container .mix:after{
  content: attr(data-myorder);
  color: white;
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
  padding: 4% 6%;
  font-weight: 700;
}

.container .mix:before{
  content: '';
  display: inline-block;
  /*padding-top: 60%;*/
}

.container .mix img {
  padding: 3px;
  max-width: 100%;

}



/***********************
PAGE: item
***********************/
#h {
    font-family: 'U.S. 101',sans-serif;
    margin-top:0;
    text-align:center;
    letter-spacing:5px;
    font-size: 1.75em;
    margin-bottom: 40px;
}

.docs {

    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
}



/* Your styles for the iframe */
.docs iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;

}

.docsImage img {
    position:relative;
    width:100%;
}

#role{
    text-align:center;
    font-size: 0.9em;
}


#prod_desc{
    text-align:center;
    font-size: 0.9em;
}



/************************
PAGE: ABOUT
************************/

.primaryCol img{
   width:100%;
   margin: 0 auto;
   top: -20px !important;
   margin-right:10px;
}

.secondaryCol h3{
  font-family: 'U.S. 101',sans-serif;
  letter-spacing:1px;
  margin-top:20px !important;
  margin:0 auto;
  width:80%;
}

.secondaryCol p{
  margin:0 auto;
  width:80%;
  padding: 7px 0;
  font-size:0.9em;
}

.secondaryCol dl{
    width:80%;
    font-size:0.9em;
    margin: 0 auto;

}

/************************
PAGE: CONTACT
************************/
#contactContainer{
    display:flex;
    min-height:25vh;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    margin-top:20px;

}



#details h3{
    font-family: 'U.S. 101',sans-serif;
    letter-spacing:1px;
    text-align:center;
}

#details p{
    text-align:center;
}

.contact-info{
    margin-left: 60px;
}


.contact-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;

}

.contact-info a {

    display: block;
    min-height: 20px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding: 0 0 0 30px;
    margin: 0 0 10px;
}



.contact-info li.phone a {
   background-image: url('../img/phone.png');
}

.contact-info li.mail a {
   background-image: url('../img/mail.png');
}

.contact-info li.vimeo a {
   background-image: url('../img/vimeo.png');
}




/************************
COLOURS
************************/

/* site body */
body{
   background-color: #fff;
   color: #999;
}


/* logo text */
h1,h2{
  color: #222;
}


/* links */
a {
  color: red; 
}

/* colour for nav link */
nav a, nav a:visited {
  color: #222;
}

/* selected nav link colour */
nav a.selected, nav a:hover{
  color: #666;
}

2 Answers

louiecamacho
louiecamacho
10,980 Points
louiecamacho
louiecamacho
10,980 Points

In your index file, at the very end right before the 

</body>

<?php include("inc/footer.php") ?>;

needs to be like this

<?php include("inc/footer.php") ?>
louiecamacho
louiecamacho
10,980 Points
louiecamacho
louiecamacho
10,980 Points

You have a ";" after your last script tag.

Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points
Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

thanks have amended that, but it still seems to not push the footer down.