Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Mobile web template footer improvement

From Wiki
Jump to: navigation, search


Article Metadata
Tested with
Devices(s):  
Compatibility
Platform(s):  
Article
Keywords: Browsing, Mobile Web Templates
Created: aleksi.hanninen (17 Dec 2009)
Last edited: hamishwillee (24 Jun 2011)

Overview

This code snippet demonstrates how to improve the footer component of Nokia High-End Mobile Web Templates.

Mobile web templates improvement footer before after.png

The CSS definitions below add more padding to make it difficult to hit wrong links in devices with high pixel-density. Height is set to auto. Also the padding of an ul.nav-footer li element is set to allow it to push the final copyright notice little downwards when the nav-footer list li elements are on multiple lines as the ul.nav-footer div element is set originally to be 2em high.

You can download the component library from Nokia Developer.

Source: Relevant HTML components

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Footer and home link | Nokia High-End Mobile Web Templates | Code snippets</title>
<link href="resources/styles/reset.css" rel="stylesheet" type="text/css" />
<link href="resources/styles/baseStyles.css" rel="stylesheet" type="text/css" />
<!-- Some additional CSS definitions -->
<link href="styles/footerstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="header">
</div>
<div id="content">
<div class="home">
<a href="index.html">Home</a>
</div>
</div> <!-- content -->
<div id="footer">
<ul class="nav-footer">
<li class="first"><a href="http://forumnokia.mobi" >Nokia Developer</a></li>
<li><a href="http://forumnokia.mobi" >Link</a></li>
<li><a href="http://forumnokia.mobi" >Link</a></li>
<!-- ... -->
<li><a href="http://forumnokia.mobi" >Link</a></li>
<li class="last"><a href="http://forumnokia.mobi">Web Templates</a></li>
</ul>
<p>&copy; 2009 Nokia Developer</p>
</div>
</div>
</body>
</html>

Source: CSS

#footer {
padding-top: 1.2em;
height: auto;
}
 
ul.nav-footer li {
padding-bottom: 0.5em;
}

Postconditions

Now the #footer element has bigger margin and its height is not fixed.

See also

Supplementary material

This code snippet is part of a web page stub, which can be downloaded at File:Web templates footer improvement stub page.zip.

This page was last modified on 24 June 2011, at 09:17.
171 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×