List of Topics

SfC Home > Web Design >

Simple Tab Navigation

by Ron Kurtus (updated 21 December 2022)

Many websites use tabs above the content area for navigation to other pages and sections. A simple version is seen in the School for Champions website.

The first things to do is to define a design scheme for the tabs.

A tab container DIV ID tag is placed in the page HTML between the header DIV tag and main content DIV. A simple list is coded in HTML Then the CSS used for the page defines the tabs, colors, and borders.

Questions you may have include:

This lesson will answer those questions.

Scheme for tabs

A DIV container for the tabs is placed below the header and above the main content DIVs.

The CSS code defines the tabs size, colors, and borders.

For the design, I set the tabs colored gray with black text. The active tab will be white. The background of the tab container is same as page background. Each tab has a border that is the same color as the content border, except for the bottom of the active tab, which is white.

HTML code for tabs

The HTML code for the tabs is very simple. The <div id="tab_container"> code follows the <div id="header"> ... </div> code and precedes the <div id="container"> ... </div> code.

<div id="tab_container">

<ul id="tab_menu">
<li><a class="active" href="this_page.htm">Lesson</a></li>
<li><a href="mini-quiz_this_page.htm">Mini-Quiz</a></li>
<li><a href="feedback.cfm?tab=this_page">Feedback Comments</a></li>


CSS code

The code in the cascading style sheet (CSS) for the page defines position, size, margins, colors and borders for the tabs. Certain items are explaed as notes.

Tab container

#tab_container {
position: relative;
width:1000px; /* width of page container */
margin:0 auto;
padding: 0px;
background-color:#FFFADD; / * color of page background - light yellow */
border-bottom-color:#FFF; /* color of page - white */

Tab menu

#tab_menu {
border-bottom: 1px solid #003300; /* same as border of main container */
margin: 12px 0px 0px 0px;
padding: 0px;
z-index: 1; /* stack order of items */
padding-left: 10px;

List definitions

#tab_menu li {
display: inline;
overflow: hidden;
list-style-type: none;

Tabs including active

#tab_menu a, {
color: #000; /* black text for all tabs */
background: #CCC; /* gray background of tabs */
font: bold 1em Arial, sans-serif;
border: 2px solid #003300; /* same as border of main container */
padding: 2px 5px 0px 5px;
margin: 0;
text-decoration: none;

Active tab

#tab_menu {
background: #FFF; /* white background of active tab */
border-bottom: 2px solid #FFF; /* white bottom border of active tab */


The first things to do to add tabs above the content area for navigation is to define a design scheme for the tabs.

Add a tab container DIV ID tag between the header DIV tag and main content DIV. A simple list is coded in HTML Then use CSS for the page to define the tabs, colors, and borders.

Seek improvement

Resources and references

Ron Kurtus' Credentials


Web Design Resources


(Notice: The School for Champions may earn commissions from book purchases)

Top-rated books on Website Design

Students and researchers

The Web address of this page is:

Please include it as a link on your website or as a reference in your report, document, or thesis.

Copyright © Restrictions

Where are you now?

School for Champions

Web Design topics

Simple Tab Navigation

Web Design topics




Content with HTML

Format with CSS



Responsive websites


Also see

Let's make the world a better place

Be the best that you can be.

Use your knowledge and skills to help others succeed.

Don't be wasteful; protect our environment.

You CAN influence the world.

Live Your Life as a Champion:

Take care of your health

Seek knowledge and gain skills

Do excellent work

Be valuable to others

Have utmost character

Be a Champion!

The School for Champions helps you become the type of person who can be called a Champion.