Html tutorials session 8 :
Division Positioning and Formatting :
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position of the property is set. They also work differently depending on the positioning method. There are five position properties in DIV elements namely, static, relative, absolute, fixed, and inherit. For easy usage, only three properties are used namely, absolute, relative, and fixed. Positioning can be applied to any block element. The default position for a block element (DIV) is static. Table 8.5 shows the various values that can be used in DIV element to position elements.
Value Description
static Positions the element in order, as they appear in the document flow. It is the default value.
absolute Positions the element relative to its first position.
fixed Positions the element relative to the browser window.
relative Positions the element relative to its normal position.
inherit Positions the element with respect the value that is inherited from the parent element.
Code Snippet 15:
.lCard{
width: 100px;
height:100px;
background-color:blue;
padding: 6px;
position:fixed;
left:450px;
top:100px;
}
.rCard{
width: 100px;
background-color:red;
padding: 7px;
position:relative;
top:93px;
left:300px;
}
.bCard{
width: 100px;
height:100px;
background-color:green;
padding: 6px;
position:absolute;
left:310px;
bottom:320px;
}
Code Snippet 16:
<body>
<div class=”rCard”>
</div>
<div class=”bCard”>
</div>
<div class=”lCard”>
</div>
</body>
Multiple columns are created by using the <div> tag and CSS is used to format the divisions. Divisions can be formatted by using the same character, paragraph, and page formatting styles. In the Code Snippet, CSS is used to format each DIV.
No comments:
Post a Comment