codescracker


css

CSS Create Frames



« Previous Tutorial Next Tutorial »


Frames refer to elements that are used to divide a Web page into separate parts or portions. Dividing a Web page into frames enables you to display additional content or multiple documents in a single Web page.

Earlier, frames were created using the FRAME element provided by HTML; however, this method has now become absolute due to various reasons, such as problem in bookmarking the page or lack of proper support on Web browser.

CSS Create Frame Example

Nowadays, frames can be created using various properties of CSS, as shown in the following source code :

<html>
<head>

<style>
  #frame {
	  position: absolute;
	  top: 10px;
	  bottom: 0px;
	  right: 10px;
	  width: 200px;
	  height: 200px;
	  background-color: black;
	  color: white;
}
</style>

</head>
<body>

<div id="frame">This is a frame of 200px width and 200px height.</div>

</body>
</html>

It will display the following output:

css creating frames

In the preceding example, we have used a DIV element to be displayed as a frame in a Web page. We have also specified the position of a frame using the position, top, bottom, and right properties.


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test