Tabbed Content
3
27/04/2015 BrainJar.com: Tabs www.brainjar.com/css/tabs/ 1/3 See the demo page for the finished version of the code. Home | 1 | 2 | 3 Tabs In this example, we'll look at using CSS to build a tabbed display. One where the user can click on individual tabs to view different content within the same space. It will require a few lines of JavaScript to dynamically update the individual tabs but we'll cover that code later. For now, we'll look at building the display. Constructing the Display The Tabs The tabs consist of simple A tags using style classes designed to make them look like the little tabs found on file folders. Tab A Tab B Tab C Tab D The CSS and HTML code is shown below. Each tab is basically a small box with a border on three sides. div.tabArea { font-size: 80%; font-weight: bold; } a.tab { background-color: #f0f0f0; border: 1px solid #000000; border-bottom-width: 0px; padding: 2px 1em 2px 1em; text-decoration: none; } a.tab, a.tab:visited { color: #808080; } a.tab:hover { background-color: #d0d0d0; color: #606060; } ... <div class="tabArea"> <a class="tab">Tab A</a> <a class="tab">Tab B</a> <a class="tab">Tab C</a> <a class="tab">Tab D</a> </div> The outer DIV element provides a container for the tabs, its "tabArea" class setting a base font for them. The "tab" class creates a boxed look for the individual links while a :hover pseudo-class is used to highlight the tabs on mouseover. The Active Tab To make one tab stand out, we define a new style class named "activeTab" which can then be combined with the "tab" class on any link. a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited {
-
Upload
sukalyan-ghoshal -
Category
Documents
-
view
217 -
download
0
description
How to create tabbed cintent with HTML and CSS
Transcript of Tabbed Content
27/04/2015 BrainJar.com: Tabs
www.brainjar.com/css/tabs/ 1/3
See the demo page for thefinished version of the code.
Home | 1 | 2 | 3
Tabs
In this example, we'll look at using CSS to build a tabbeddisplay. One where the user can click on individual tabs toview different content within the same space.
It will require a few lines of JavaScript to dynamically update the individual tabs but we'llcover that code later. For now, we'll look at building the display.
Constructing the Display
The Tabs
The tabs consist of simple A tags using style classes designed to make them look like thelittle tabs found on file folders.
Tab A Tab B Tab C Tab D
The CSS and HTML code is shown below. Each tab is basically a small box with a borderon three sides.
div.tabArea {
font-size: 80%;
font-weight: bold;
}
a.tab {
background-color: #f0f0f0;
border: 1px solid #000000;
border-bottom-width: 0px;
padding: 2px 1em 2px 1em;
text-decoration: none;
}
a.tab, a.tab:visited {
color: #808080;
}
a.tab:hover {
background-color: #d0d0d0;
color: #606060;
}
...
<div class="tabArea">
<a class="tab">Tab A</a>
<a class="tab">Tab B</a>
<a class="tab">Tab C</a>
<a class="tab">Tab D</a>
</div>
The outer DIV element provides a container for the tabs, its "tabArea" class setting a basefont for them. The "tab" class creates a boxed look for the individual links while a :hover
pseudo-class is used to highlight the tabs on mouseover.
The Active Tab
To make one tab stand out, we define a new style class named "activeTab" which can thenbe combined with the "tab" class on any link.
a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited {
27/04/2015 BrainJar.com: Tabs
www.brainjar.com/css/tabs/ 2/3
background-color: #c0c0c0;
color: #000000;
}
Then the HTML code is updated to make one tab appear active by adding this class name tothe link tag.
You can assign multiple style classes to an element by separating the names withspaces in its CLASS attribute.
<div class="tabArea">
<a class="tab">Tab A</a>
<a class="tab">Tab B</a>
<a class="tab activeTab">Tab C</a>
<a class="tab">Tab D</a>
</div>
This produces the effect shown below.
Tab A Tab B Tab C Tab D
The Content Area
Next comes the area where the content for the tabs will be displayed. This will consist of anIFRAME inside of a DIV tag. A style class is defined for the outer DIV to make it match theactive tab's style.
div.tabMain {
background-color: #c0c0c0;
border: 1px solid #000000;
padding: 1em;
}
...
<div class="tabMain">
<iframe src="sample.html" marginheight="8" marginwidth="8"
frameborder="0"></iframe>
</div>
Note the result below.
Level 2 Header
Paragraph paragraph paragraph paragraphparagraph paragraph paragraph. Paragraphparagraph paragraph paragraph paragraphparagraph paragraph. Italic italic italic italicitalic italic italic italic italic. Paragraphparagraph paragraph paragraph paragraph
As you can see, this isn't quite right. The problem is that the IFRAME doesn't fill the DIVarea. The solution would be to give the inline frame a style setting of width:100%.
Unfortunately, this does not work in Internet Explorer. It makes the inline frame just a littletoo wide, apparently not accounting for the vertical scrollbar. The right-hand edge extendstoo far, overlapping its containing DIV.
To fix this, another DIV tag is used as a wrapper for the IFRAME tag. Both this tag and theinline frame are given a style width of 100%.
div.tabMain {
27/04/2015 BrainJar.com: Tabs
www.brainjar.com/css/tabs/ 3/3
BrainJar.com · ©1999-2015 by Mike Hall
background-color: #c0c0c0;
border: 1px solid #000000;
padding: 1em;
}
div.tabIframeWrapper {
width: 100%;
}
iframe.tabContent {
background-color: #c0c0c0;
border: 1px solid #000000;
width: 100%;
}
...
<div class="tabMain">
<div class="tabIframeWrapper">
<iframe class="tabContent" src="sample.html"
marginheight="8" marginwidth="8" frameborder="0"></iframe>
</div>
</div>
The inline frame is also given a border, to give it a more defined look. The result can be seenbelow.
Level 2 Header
Paragraph paragraph paragraph paragraph paragraph paragraph paragraph.Paragraph paragraph paragraph paragraph paragraph paragraph paragraph. Italicitalic italic italic italic italic italic italic italic. Paragraph paragraph paragraphparagraph paragraph paragraph paragraph. Paragraph paragraph paragraphparagraph paragraph paragraph paragraph.
Paragraph paragraph paragraph paragraph paragraph paragraph paragraph.
Much better. The next step is to put the tabs above this content area.
Next
Home | 1 | 2 | 3
