ps34
ps34

Reputation: 183

Footer does not show up at the end of the page

I'm creating a webpage that contains tables that pull data from mysql database. When I want to add a footer, footer does not show up at the bottom of the page. I've tried html's regular footer class, bootstrap footer, sticky footer but none of them worked. I've also tried all position values. Even though I write random stuff at the bottom of the code, before the body closing tag, it still shows it at the beginning.

You can see the page from: http://sagtekin.com/letseat/donat.php

Thank you very much for your help.

Edit: Code is below:

    <!DOCTYPE html>
<html>

<head>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="text/html;charset=iso-8859-9" http-equiv="content-type">
<meta content="text/html;charset=windows-1254" http-equiv="content-type">
<meta content="text/html;charset=x-mac-turkish" http-equiv="content-type">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"></script>
<link href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.indigo-pink.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="css/w3.css" rel="stylesheet" />
<title>Let's Eat - Donatello Pizza</title>
<style>
body {
    background: url(background/bg-03.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: 'Roboto', sans-serif;
}
#infoCard {
    background: #FAFAFA;
    margin-top: 100px;
}
#header {
    position: fixed;
    width: 100%;
    z-index: 1;
    box-shadow: 0px 0px 10px 6px rgba(101, 94, 94, 0.75);
    -moz-box-shadow: 0px 0px 10px 6px rgba(101, 94, 94, 0.75);
    -webkit-box-shadow: 0px 0px 10px 6px rgba(101, 94, 94, 0.75);
}
div {
    border-radius: 5px;
}
</style>
</head>

<body>

<header id="header" class="w3-container w3-teal">
    <h1><b>LET'S EAT</b></h1>
</header>
<div class="w3-responsive">
    <div class="w3-third  w3-container">
    </div>
    <div class="w3-third w3-container">
        <div id="infoCard" class="w3-card-16">
            <header class="w3-container w3-teal">
                <h1>Donatello Pizza</h1>
            </header>
            <p style="color: #4CAF50; text-align: center; margin-top: 10px; font-size: large; vertical-align: middle;">
            <b>OPEN</b></p>
            <hr />
            <div>
                <p id="textDisplay" style="text-align: center">Hover your mouse 
                over the buttons.</p>
            </div>
            <hr />
            <div class="btn-group btn-group-justified">
                <a class="btn btn-primary" href="tel:05338643695" onmouseout="resetText()" onmouseover="changeTextTurkcell()">
                Turkcell</a>
                <a class="btn btn-primary" href="tel:05488643695" onmouseout="resetText()" onmouseover="changeTextTelsim()">
                Telsim</a>
                <a class="btn btn-primary" href="tel:03927147083" onmouseout="resetText()" onmouseover="changeTextLandLine()">
                Landline</a>
                <script>

                        function changeTextTurkcell()
                        {
                            document.getElementById("textDisplay").innerHTML="<b>0533 864 3695</b>";
                        }

                        function changeTextTelsim()
                        {
                            document.getElementById("textDisplay").innerHTML="<b>0548 864 3695</b>";
                        }

                        function changeTextLandLine()
                        {
                            document.getElementById("textDisplay").innerHTML="<b>0392 714 7083</b>";
                        }

                        function resetText()
                        {
                            document.getElementById("textDisplay").innerHTML="Hover your mouse over the buttons.";
                        }

                      </script>
            </div>
        </div>
    </div>
    <div class="w3-third w3-container">
    </div>
</div>
<div class="w3-quarter w3-container">
</div>
<div class="w3-half w3-container">
    <div class="w3-responsive w3-card-16" style="margin-top: 50px; background-color: #FAFAFA">
        <header class="w3-container w3-pink">
            <h3>Breakfast</h3>
        </header>
        <table class="table">
        <!--Table contents-->   
        </table>
    </div>
    <div class="w3-responsive w3-card-16" style="margin-top: 30px; background-color: #FAFAFA">
        <header class="w3-container w3-pink">
            <h3>Pizzas</h3>
        </header>
        <table class="table">
        <!--Table contents-->   
        </table>
    </div>
    <div class="w3-responsive w3-card-16" style="margin-top: 30px; background-color: #FAFAFA">
        <header class="w3-container w3-pink">
            <h3>Chicken</h3>
        </header>
        <table class="table">
        <!--Table contents-->   
        </table>
    </div>
    <div class="w3-responsive w3-card-16" style="margin-top: 30px; background-color: #FAFAFA">
        <header class="w3-container w3-pink">
            <h3>Pasta</h3>
        </header>
        <table class="table">
        <!--Table contents-->   
        </table>
    </div>
    <div class="w3-responsive w3-card-16" style="margin-top: 30px; background-color: #FAFAFA">
        <header class="w3-container w3-pink">
            <h3>Other</h3>
        </header>
        <table class="table">
        <!--Table contents-->   
        </table>
    </div>
    <div class="w3-quarter w3-container">
    </div>
</div>
<!--<div class="w3-container w3-teal" style="position:absolute;  bottom:0px;">
    <h5>LET'S EAT</h5>
    <p>&copy; 2015 Poyraz Sagtekin.</p>
    </div>-->ergkjlhkjgekjhjkhjwhwjhgwhgwhgwkhgrlgrwhjlhkjgwhr

</body>

</html>

Upvotes: 1

Views: 298

Answers (2)

DirtyBit
DirtyBit

Reputation: 16772

Extension to @Samuels answer, you must put that in a <div> or a <footer> tag and then style it by simply using clear: both; or you could add more to it like position: fixed; bottom: 0; line-height: 15px; the list could go on and on.

Upvotes: 1

Samuel Cook
Samuel Cook

Reputation: 16828

I isolated what I presumed to be your footer code which was a string of letters like:

ergkjlhkjgekjhjkhjwhwjhgwhgwhgwkhgrlgrwhjlhkjgwhr

I wrapped that in a div with the following styles and it appeared at the bottom of the page:

<div style="clear:both;">
    ergkjlhkjgekjhjkhjwhwjhgwhgwhgwkhgrlgrwhjlhkjgwhr
</div>

It appears you just need to clear your previous element to "force" your footer to the bottom of the page.

Upvotes: 2

Related Questions