CSS Position Properties
Content
* Position Properties
* Static Positioning
* Fixed Positioning
* Relative Positioning
* Absolute Positioning
* Design page layout
* Other Common Properties
* Creating icon on Title
Position Properties
* The CSS positioning properties allow you to position an element
* Static positioning
* Fixed positioning
* Relative positioning
* Absolute positioning
Static Positioning
* HTML elements are positioned static by default
* A static positioned element is always positioned according to the normal flow of the page
* Static positioned elements are not affected by the top, bottom, left, and right properties
Fixed Positioning
* An element with fixed position is positioned relative to the browser window
* It will not move even if the window is scrolled
Example
<html>
<head>
<title> Fixed Position</title>
<style type="text/css">
div { width:300px; height:300px;}
#d1 {background-color:lightgreen;}
#d2 {background-color:lightblue;}
#d3 {background-color:orange;}
#d4 {background-color:pink;}
#d5 {background-color:gray;}
#d6
{
background-color:red;
position:fixed;
top:100px;
left:50%;
}
</style>
</head>
<body>
<div id="d1">
1st DIVISION
</div>
<div id="d2">
2nd DIVISION
</div>
<div id="d3">
3rd DIVISION
</div>
<div id="d4">
4th DIVISION
</div>
<div id="d5">
5th DIVISION
</div>
<div id="d6">
6th DIVISION<br/>
This is fixed
</div>
</body>
</html>
Relative Positioning
* A relative positioned element is positioned relative to its normal position
Example
<html>
<head>
<title> Relative Position</title>
<style type="text/css">
div { width:300px; height:300px;}
#d1 {background-color:lightgreen;}
#d2
{
background-color:lightblue;
position:relative;
left:50px;
top:100px;
}
#d3 {background-color:orange;}
#d4 {background-color:pink;}
#d5 {background-color:gray;}
#d6
{
background-color:red;
position:fixed;
top:100px;
left:50%;
}
</style>
</head>
<body>
<div id="d1">
1st DIVISION
</div>
<div id="d2">
2nd DIVISION<br/>
This is positioned 50px from left and <br/>
100px from top relative to its normal position
</div>
<div id="d3">
3rd DIVISION
</div>
<div id="d4">
4th DIVISION
</div>
<div id="d5">
5th DIVISION
</div>
<div id="d6">
6th DIVISION<br/>
This is fixed
</div>
</body>
</html>
Absolute Positioning
* An absolute position element is positioned relative to the first parent element that has a position other than static.
Example
<html>
<head>
<title> Absolute Position</title>
<style type="text/css">
div { width:300px; height:300px;}
#d1 {background-color:lightgreen;}
#d2
{
background-color:lightblue;
position:relative;
left:50px;
top:100px;
}
#d3 {background-color:orange;}
#d4 {background-color:pink;}
#d5
{
background-color:gray;
width:800px;
position:relative;
top:10px;
left:10px;
}
#d5 #d51
{
background-color:khaki;
width:750px;
height:200px;
position:absolute;
top:50px;
left:25px;
}
#d5 #d51 #d511
{
background-color:maroon;
width:700px;
height:50px;
position:absolute;
top:20px;
left:25px;
color:white;
}
#d6
{
background-color:red;
position:fixed;
top:100px;
left:50%;
}
</style>
</head>
<body>
<div id="d1">
1st DIVISION
</div>
<div id="d2">
2nd DIVISION<br/>
This is positioned 50px from left and <br/>
100px from top relative to its normal position
</div>
<div id="d3">
3rd DIVISION
</div>
<div id="d4">
4th DIVISION
</div>
<div id="d5">
5th DIVISION
<div id="d51">
5.1 DIVISION
<div id="d511">
5.1.1 DIVISION
</div>
</div>
</div>
<div id="d6">
6th DIVISION<br/>
This is fixed
</div>
</body>
</html>
Define Page Layout
* Page layout is the part of graphic design that deals in the arrangement of visual elements on a page
* For a web page, page layout is important to design so that
* Contents should appear at the right places
* Content should be organized and doesn’t look messy
* Generally website pages follow the same layout.
* Here is one example of layout
Example
<html>
<head>
<title> Layout 1</title>
<style type="text/css">
body
{
background-color:lightcyan;
}
#main_container
{
width:90%;
height:100%;
margin:auto;
padding:0px;
margin-top:0px;
background-color:lightgreen;
position:relative;
top:0px;
}
#top_container
{
background-color:olive;
width:100%;
height:50px;
position:absolute;
top:0px;
}
#second_top_container
{
background-color:purple;
width:80%;
height:200px;
position:absolute;
top:50px;
left:100px;
}
#mid_container
{
position:absolute;
top:250px;
width:100%;
min-height:400px;
background-color:green;
}
#mid_left_container
{
position:absolute;
top:0px;
width:20%;
min-height:400px;
background-color:khaki;
}
#mid_right_container
{
position:absolute;
left:20%;
top:0px;
width:80%;
min-height:400px;
background-color:maroon;
}
</style>
</head>
<body>
<div id="main_container">
main_container
<div id="top_container">
top_container
Place for site title, menu and welcome message
</div>
<div id="second_top_container">
Second_top_container
Place for Banner
</div>
<div id="mid_container">
<div id="mid_left_container">
Place for links
</div>
<div id="mid_right_container">
Primary content
</div>
</div>
</div>
</body>
</html>
Other common properties
Width : It specifies the width of the element.
Height: It specifies the height of the element
Display: display property allows to make an element block, inline, as a table cell etc
Padding: padding value is gap between inner boundary and content
Margin: it is a space leaving outside the element boundary
Opacity: it sets the transparency level of an HTML element. Minimum value is 0 and maximum value is 1.
Creating icon on title
Small icon near the title in the title bar can be added with the following code:
* <link rel="shortcut icon" type="image/x-icon" href="scaicon.jpg" />
Here scaicon.jpg is an image file, you can replace it with any of your image. Image size should be edited to 32x32 or 16 x 16 pixels.
<<Prev Home Next>>
Saturday, July 1, 2017
CSS Position Properties
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment