CSS allow you to segregate the content of a Web page into different frames, which can appear on a web page in the form of a side bar header or footer. Note that the frames being a segregated content do not scroll when you scroll the Web page. There is no special property to create frames in CSS.
Now we create a web page named createframes.html to create a frames.
<!doctype html>
<head>
<title> Creating Frames using CSS</title>
<style type="text/css">
#frame{
position:absolute;
top:0px;
bottom:0px;
width:200px;
height:100px;
overflow:hidden;
background:black;
color:white;
}
#main{
position:fixed;
top:0px;
left:210px;
right:0;
bottom:0px;
overflow:auto;
}
</style>
</head>
<body>
<DIV id="frame">
<h1>This is the left frame</h1>
</DIV>
<DIV id="main">
<h1>Heading of the main content </h1>
<p>This is the creation of the frame.</p>
<img src="nature6.jpg" style="width:100%;height:100%;">
</DIV>
</body>
</html>
Here We have used two DIV elements. One is used as a frame in a Web page and another is used to display the main content.
The output of the Above web page is:
Now we create a web page named createframes.html to create a frames.
<!doctype html>
<head>
<title> Creating Frames using CSS</title>
<style type="text/css">
#frame{
position:absolute;
top:0px;
bottom:0px;
width:200px;
height:100px;
overflow:hidden;
background:black;
color:white;
}
#main{
position:fixed;
top:0px;
left:210px;
right:0;
bottom:0px;
overflow:auto;
}
</style>
</head>
<body>
<DIV id="frame">
<h1>This is the left frame</h1>
</DIV>
<DIV id="main">
<h1>Heading of the main content </h1>
<p>This is the creation of the frame.</p>
<img src="nature6.jpg" style="width:100%;height:100%;">
</DIV>
</body>
</html>
Here We have used two DIV elements. One is used as a frame in a Web page and another is used to display the main content.
The output of the Above web page is:
No comments:
Post a Comment