×
Namespaces

Variants
Actions

Template for creating a simple CSS based tab layout

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Code Example
Source file: Media:PureCSS.zip
Article
Created: kamalakshan (31 Oct 2009)
Last edited: hamishwillee (07 May 2012)

Contents

Introduction

This article focuses on creating a simple CSS based layout. Since this layout does not make use of any background image or graphics it loads quickly compared to others with graphics.

Nokia 5700 XpressMusic.png Nokia N97.jpg Nokia 5700 XpressMusic 001.png

Preparing your HTML page

The first thing we need to do is provide a Document Type Declaration. In this example I have selected to use version 1.0.

Index.html:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

While constructing this demo page, I have used very simple HTML so it should work with most devices.

In the head section of the HTML, we declare the title of the page. The meta tag is used to specify the content type of the page. First we tell that the content is an HTML file and then inform the browser that we are using utf-8 encoding.

Next line is a link to the external .css file which we will be using for styling this document.

code:

<head>
<title>Pure CSS Tab Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles/Index.css" rel="stylesheet" type="text/css" media="handheld" />
</head>

Next comes the body of the html page. Here we have used the div tag to divide the body in to four sections namely header, navigation-tab, content, and footer. All these four logical sections are wrapped using another div section - "wrap". The div tag acts as a serious supporting structure, and once you've got those structures in place, you're going to be able to style them all in new and powerful ways.

code:

<body>
<div id="wrap">
<div id="header">
<h2>Pure CSS Tab Layout</h2>
</div>
<ul id="navigationtab">
<li><a class="current" href="SomeTabPageLink.html">Home</a></li>
<li><a href="http://SomeTabPageLink.html">Category</a></li>
<li><a href="http://SomeTabPageLink.html">Product</a></li>
</ul>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.
</p>
</div>
<div id="footer">
<p>&copy; 2009 Nokia Developer</p>
</div>
</div>
</body>
</html>

Inside the header section we specify the heading of the page. In this case "Pure CSS Tab Layout", where you can also have your company name or brand name.

The next section with "navigationtab" id is an unordered list, which contains three list elements in this case. You can add or remove these as required. All these list links to some other html page which can be opened on clicking the list.

Next is the content section, and thereafter comes the footer section of the page.

Note in the above sections we have used id attribute. For each element above we have specified an different id which would be used later to style the elements in css. Note that you can't have more than one element on a page with the same id.

Now we have our HTML page structure ready and can move on to style the same by creating a .css file which the html page links to in the head section.


index.css:

 /*
* BODY
*
*/

body {
background: transparent;
line-height: inherit;
font-size: 100%;
color: #333333;
font-weight: normal;
font-family: sans-serif;
}
/*removes horizontal overflow on certain devices*/
body div#wrap {
width: 100%;
overflow: hidden;
position: absolute;
left: 0;
padding: 0;
}
/*body required as early browsers don't understand p by itself */
body p {
margin-top: 0;
margin-bottom: 0;
padding: 0.2em 0.5em 0.4em 10px;
}
/*
* HEADER
*
*/

body div#header {
margin: 4px;
padding: 1px;
text-align: left;
border: 2px solid black;
font-weight: bold;
background: #D8D8D8;
}
/*
* NAVIGATION TAB
*
*/

body #navigationtab {
color: #000;
border-bottom: 2px solid black;
margin: 12px 4px 0px 4px;
padding: 0px;
padding-left: 10px
}
body #navigationtab li {
display: inline;
overflow: hidden;
}
body #navigationtab a, a.current {
font-weight: bold; /*Show Bold Font*/
border: 2px solid black;
padding: 2px 5px 0px 5px;
margin: 0;
text-decoration: none; /* used to avoid Underlining */
}
body #navigationtab a.current {
background: #ADC09F;
border-bottom: 3px solid #ADC09F; /* bottom line won't be visible*/
}
body #navigationtab a:hover {
background: #ADC09F; /* Background color to be shown on hover*/
}
body #navigationtab a:visited {
color: #006600; /* Color shown once the link is visited */
}
 
body #navigationtab a.current:hover {
background: transparent;
color: #ADC09F;
}
/*
* CONTENT
*
*/

body div#content {
margin: 0px 4px 0px 4px; /* Leave 4px gap from the left and right edge of the screen */
/* top right bottom left */
text-align: justify; /* Sets the content text alignment to justify */
background: #ADC09F; /* Background color of the content display area */
padding: 20px; /* Provides a padding of 20px */
border: 2px solid black; /* Draw a border around the content section with 2px*/
border-top: none; /* This removes the border drawn on the top side */
 
}
body div#content a {
text-decoration: none; /* Explicitly mentions that no text decoration is required */
color: #E8E9BE; /* Sets the color of the content text */
}
body div#content a:hover {
background: #898B5E;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
background: transparent;
}
/*
* FOOTER
*
*/

body div#footer {
margin: 4px; /* Leave a 4px marging from the top */
padding: 1px; /* Provides a 1px padding */
text-align: center;
background-color: #F6F6F6;
border: 2px solid black;
}

Testing

The above template was tested on Nokia 5700, Nokia 5800, N97 and N72. Also it has been validated and tested on ready.mobi. The overall rating was 5/5 and is completely compatible with most devices.

With only about 5.2k data downloading the page will open within 3.26 secs using GPRS and 1.26 secs on a 3G network.

Download

 *You can download the files here: Media:PureCSS.zip. 
 *Link to demo site.

Summary

The above example shows that one can design good looking websites with pure css without using any images. Due to the fact that no images are used in this template the page will be loaded quickly. The website was tested on a high end device. However, it should work fine with most mid and low end devices also.

  • Ready.mobi test results here
This page was last modified on 7 May 2012, at 05:22.
124 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.

×