Frame Attributes for CSS3

Mastering CSS3 - Part 1

Forward: In this part of the series, we look at frame attributes. In the past this topic will be treated under HTML.

By: Chrysanthus Date Published: 25 Jul 2012

Introduction

This is the first part of my series, Mastering CSS3. In this part of the series, we look at frame attributes. In the past this topic will be treated under HTML. However, frames deal more with presentation than with just the functioning of the HTML code. Frames deal with layout. That is why I have decided to treat this topic here.

Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.

Prerequisite
You should have completed the series, “HTML5 Basics”, “Mastering HTML5” and "CSS3 Basics". You can reach these three series at links below.

Browsers
You will have to use the latest version of your browser (we are today in 2011). I am using Mozilla Firefox Beta 10 and Opera 11. You need just one browser.

Order of Reading this Series
This series is made up of parts (short chapters). Some consecutive parts are related. If you are new to CSS, then read this series in the order given. If you are not new to CSS, then you can read this series in any order; however the consecutive parts should be read in the order given. Whether you are new to CSS or not I advice you to complete this series, as that will be taking you toward a professional in CSS programming.

HTML5 Basics
Mastering HTML5
CSS3 Basics

Frame Example Code
We saw the following frameset code in the tutorial, “HTML 5 Frames”:

<!DOCTYPE HTML>
<html>
<head>
    <title>Frame Example</title>
</head>
<frameset rows="15%, 70%, 15%">
    <frame src="header.htm">
    <frameset cols="20%, 60%, 20%">
        <frame src="left.htm">
        <frame src="center.htm">
        <frame src="right.htm">
    </frameset>
    <frame src="footer.htm">
</frameset>
</html>

Read through the above code. I will use this code to explain the frame attributes.

The rows and cols Attributes
The rows and cols attributes are used in the frameset start tag to partition the web page so that each partition should take a frame. The content of each frame is an HTML element (document). You can have a frameset element in the place of a frame for further partitioning. The unit of the rows and cols attribute can be pixel or percentage. I prefer the use of percentage. We saw the rows and cols attributes in the tutorial, “HTML 5 Frames”. So I will not explain them any further in this tutorial.

The src Attributes
The src attribute is for the frame element. Its value is the URL to the frame HTML document.

Experimenting
You will have to be experimenting what is said here in this tutorial.  Type (copy and paste) and save the above code with the name, frameset.htm . Type the following code and save it with the name, header.htm , in the same directory that you saved the frameset.htm file.

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
</head>
<body>
    The header frame.
</body>
</html>

Type the following code and save it with the name, left.htm , in the same directory that you saved the frameset.htm file.

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
</head>
<body>
    The left frame.
</body>
</html>

Type the following code and save it with the name, right.htm , in the same directory that you saved the frameset.htm file.

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
</head>
<body>
    The right frame.
</body>
</html>

Type the following code and save it with the name, center.htm , in the same directory that you saved the frameset.htm file.

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
</head>
<body>
    The center frame.
</body>
</html>

Type the following code and save it with the name, footer.htm , in the same directory that you saved the frameset.htm file.

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
</head>
<body>
    The footer frame.
</body>
</html>

Double click the frameset.htm file in the directory. In the displayed web page, you should see the different partitions and their HTML documents.

Frame Element Attributes
The rows and cols attribute are for the frameset element, while the src attribute is for the frame element. The following attributes are also for the frame element.

name
This attribute assigns a name to the current frame. This name may be used as the target of subsequent links (see later). So you can have something like,

    name= "header"

src
This has been explained above. For it, you can have something like,

    src= "http://www.somewebsite.com./dir1/file.htm"

noresize
This is a Boolean attribute. Look at the displayed frameset above at the browser, and verify that you can resize each frame by dragging the border. With this attribute, you will not be able to resize the particular frame. I do not advise you to design web pages, whose frames, users can resize; they will spoil your design. So a frame tag may be something like,

        <frame src="header.htm" noresize>

scrolling
The above frameset does not have scrollbars. Do you want scrollbars for your frame? It is simple to have that with the scrolling attribute. It can have the value, “auto”, “yes” or “no”.

auto: This value tells the browser to provide scrollbars for the frame, when necessary. This is the default value. So, for the above code, scrollbars would have developed in a frame if the html element for the frame had a lot of content.
yes: This value tells the browser to always provide scrollbars for the frame window, whether or not the body element has content.
no: This value tells the browser not to provide scrollbars for the frame window.

So, you can have something like,

    <frame src="header.htm" scrolling="yes">

frameborder
The value of this attribute can be 1 or 0 (zero). 1 means that the frame should have a border. 0 means that the frame should not have a border. 1 is the default value. Note, if a frame does not have a border and the adjoining frame has a border, then you would still see a border at the boundary between the no-border frame and the border frame. If you do not want borders for all the frames, you would type something like the following for all the frames.

<frame src="header.htm" frameborder="0">

marginwidth
This attribute specifies the amount of space to be left between the frame's borders in its left and right margins. The value must be greater than zero (in pixels). The default value depends on the browser.

marginheight
This attribute specifies the amount of space to be left between the frame's borders in its top and bottom margins. The value must be greater than zero (in pixels). The default value depends on the browser.

Unit in Pixels
If you would type your units in pixels for any of the above attributes, then you would type the number without px. px for pixel is used inside a CSS declaration in a style sheet rule set. When you want to quotes units in pixels in an html element attribute, you just type the number without px. All what I have taught you in this tutorial is on HTML and not CSS. However, I had to teach it here because it deals primarily with presentation (layout).

Time to take a break. We stop here and continue in the next part.

Chrys

Broad Network

Frame Attributes for CSS3

Mastering CSS3 - Part 1

Introduction

Related Links

Comments