Basics
Creating a Document
Head and Body Elements
Formatting Text
Creating Lists
Embedding Images
URLs Explained
Linking to Documents
Creating Tables
Forms Form Basics
Input and Textarea
Select Lists
Frames Framesets
The Frame Element
Nested Framesets
Targetting Frames
Inline Frames
Tips and Tricks Meta Tags
Transition Effects
HTML Generators Create a Document
Create a List
Create a Table
HTML
Basics
Implementing CSS
CSS Syntax
Pseudo Classes/Elements
CSS Classes
CSS Properties Font Properties
Color and Background
Text Properties
Border Properties
Margins and Padding
Size and Position
Tips and Tricks Menu Buttons
Special Effects
CSS
Basics
Running a Script
Variables
Expressions and Operators
Objects.Properties.Methods
The Date Object
Strings
Regular Expressions
Defining RegExp Patterns
Branches and Conditions
Loops
Arrays Array Basics
Array Methods
Sorting Arrays

User-Defined Functions
Cookies
Windows
Frames
Tips and Tricks Image Replacement
Using Includes
Form Validation
Debugging
JavaScript
Basics
Creating a Script
Running a Script
Variables
Expressions and Operators
Strings Strings Basics
Strings and Substrings
Replacing Substrings
Regular Expressions
Branches and Conditions
Loops
Arrays Array Basics
Array Functions
Sorting Arrays
User-Defined Functions
Include and Require
Uploading Files
File Functions
Session Variables
Tips and Tricks Page Templates
Form Reply Scripts
Form Validation
JavaScript to PHP
PHP
Basics
Create and Drop
Show and Describe
Insert, Update and Delete
Querying
Join Queries
Functions
Table Locking
PHP/MySQL Functions Accessing a Database
Querying with PHP
Create and Drop with PHP
Insert and Update with PHP
Frequently Used Functions MySQL
Basics
Layout and Navigation
Page Content Style
Web Page Copy
Graphics and Animation
HTML Forms
Accessibility
Legal Requirements
MySQL
HTMLBasicsCreating a DocumentHead and Body ElementsFormatting TextCreating ListsEmbedding ImagesURLs ExplainedLinking to DocumentsCreating TablesForms - BasicsInput and TextareaSelect ListsFramesetsThe Frame ElementHTML Frames - Nested FramesetsNested FramesetsTargeting FramesInline Frames

Home > HTML > Frames - Nested Framesetsprinter version

HTML Frames - Nested Framesets

HTML framesets may be contained within other framesets i.e. nested. If the typical frame layout of a header frame with logo, side frame with navigation and right frame with content is wanted then nesting is required.

Taking the example above, the easiest way to think about it is that the window will first be divided into two panes. A narrow top pane for the logo and a broad bottom pane that is further divided into two panes.

So to achieve this will require...

  1. A <frameset> element that divides the window into two rows.
  2. A <frame> element to load in the page containing the logo.
  3. A <frameset element> that divides the lower pane into two columns.
  4. A <frame> element to load in the page containing the navigation.
  5. A <frame> element to load in the page containing the content.
  6. A </frameset> tag to close the inner <frameset> element.
  7. A </frameset> tag to close the outer <frameset> element.



A 3 Frame Example of a Nested Frameset
<html>
<head>
</head>
<frameset rows="20%,80%">
    <frame src="logo.htm">
    <frameset cols="20%,80%">
        <frame src="navigation.htm">
        <frame src="content.htm">
    </frameset>
</frameset>
</html>


The code above will produce a frameset like the one shown below.

A nested frameset


An Alternative Implementation of a Nested Frameset

In the example above the inner frameset was created directly within the outer frameset but an alterative is where the inner frameset is created within another document then loaded into a frame within the outer frameset.

The HTML for the Outer Frameset
<html>
<head>
</head>
<frameset rows="20%,80%">
    <frame src="logo.htm">
    <frame src="more_frames.htm">
</frameset>
</html>


The HTML Within Document "more_frames.htm"
<html>
<head>
</head>
<frameset cols="20%,80%">
    <frame src="navigation.htm">
    <frame src="content.htm">
</frameset>
</html>


This second example will produce the same result as the first but with one difference. All frames are said to be children of whatever parent contains them.

In the first example the inner frameset is the child of the browser window. In the second example the inner frameset is the child of the parent frame that loaded it in.

The issue of child and parent makes a difference when the <target> attribute is used and is covered in Targeting Frames.

Previous - Frames frame element Previous - Frames - Frame Element     Next - Targeting Frames Next - Frames targetting frames


Privacy | Terms | Contact | Links | Sitemap | RSS Feeds RSS and JavaScript Feeds
©2010 www.webdesignworkmate.co.uk all rights reserved 
Design and Production by smallbizonline website design © 2000-2010
Valid HTML 4.01! Level Double-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0Valid CSS!
Tips and TricksMeta TagsTransition EffectsHTML GeneratorsCreate a DocumentCreate a ListCreate a Table
Got any HTML Tips?
Send me your tip and if it's suitable I'll put it on the site, credit it to you and add a link back to your site.
Recommended Reading
html_and_xhtml

html and xhtml complete reference

learning web design beginners 

guide