HTML5: <Footer> element

This entry is part 12 of 34 in the series HTML5

HTML5 provides a footer element but I tried a few browsers and the content under footer is not placed at the bottom of the page but immediately after the block of content above the footer.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com - HTML 5</title>
    <style>
        section {
            clear: both;
            border: 2px solid #000;
            padding: 1%;
            width: 60%;
        }
    </style>
</head>
<body>
<section>
    <article>
        <header>
            <h1><a href='#'>Rod Stewart</a></h1>

            <p>17.05.2014</p>
        </header>
        <p>Roderick David 'Rod' Stewart, CBE is a British rock singer-songwriter. Born and raised in London, he is of Scottish and English ancestry. Stewart is one of thebest-selling music artists of all time, having sold over 100 million records worldwide.</p>
    </article>
</section>

<footer>
    <small>© Copyright Codecrawl.com</small>
</footer>
</body>
</html>

 

 

 

jQuery Mobile: Navigation bar in the footer

This entry is part 53 of 73 in the series jQuery Mobile

We can also set the navigation in the footer.

We will still have the footer there and we will put the navigation bar right on top of the footer and they are both fixed.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'>
        <h1>Welcome To My Mobile App</h1>

    </div>

    <div data-role='content'>
        <p>You can put your content here...</p>
    </div>

    <div data-role='footer' data-position='fixed' style='overflow:hidden;'>
        <div data-role='navbar'>
            <ul>
                <li><a href='#'>One</a></li>
                <li><a href='#'>Two</a></li>
                <li><a href='#'>Three</a></li>
            </ul>
        </div>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div><!-- /footer -->
</div>

</body>
</html>
Try The Code

Notice that the navbar is under the footer division and the footer has a fixed data position.

jQuery Mobile: Fixed footer

This entry is part 9 of 73 in the series jQuery Mobile

Using our earlier example, we put a fixed footer on both of the pages.

Fixed footer can be added with the following markup:

<div data-role="footer" data-position="fixed">
	<h1>Fixed Footer!</h1>
</div>

On page one, the code will be as below:

<div data-role='page' id='pageone'>
    <div data-role='header'><h1>My Mobile App</h1></div>
    <div data-role='content'>
        <p>Your page one content here</p>
        <a href='#pagetwo' data-role='button'>Click Me</a>
    </div>
    <div data-role='footer' data-position="fixed">
	<h1>Fixed Footer!</h1>
</div>
Try The Code Fixed Footer Code Block
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page' id='pageone'>
    <div data-role='header'><h1>My Mobile App</h1></div>
    <div data-role='content'>
        <p>Your page one content here</p>
        <a href='#pagetwo' data-role='button'>Click Me</a>
    </div>
    <div data-role='footer' data-position='fixed'>
	<h1>Fixed Footer!</h1>
</div>
</div>
<div data-role='page' id='pagetwo'>
    <div data-role='header'><h1>My Mobile App</h1></div>
    <div data-role='content'>
        <p>You are at page two!</p>
        <a href='#pageone' data-role='button'>Go Back</a>
    </div>
    <div data-role='footer' data-position="fixed">
	<h1>Fixed Footer!</h1>
</div>
</div>

</body>
</html>