Mobile web template footer improvement
Article Metadata
Tested with
Compatibility
Article
Overview
This code snippet demonstrates how to improve the footer component of Nokia High-End Mobile Web Templates.
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>© 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.
(no comments yet)