Css – positioning
The CSS positioning properties allow you to position an element. Elements can be positioned using the top, bottom, left, and right properties. There are four different positioning methods:
Static Positioning:
HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.
Fixed Positioning:
An element with fixed position is positioned relative to the browser window.It will not move even if the window is scrolled.
Relative Positioning:
A relative positioned element is positioned relative to its normal position.
Absolute Positioning:
An absolute position element is positioned relative to the first parent element that has a position other than static.
Example:39
<html><head>
<style>
h2.pos_left { position:relative; left:-20px; }
h2.pos_right { position:relative; left:20px; }
h3.pos_abs { position:absolute; left:100px; top:150px; }
</style></head>
<body>
<h3 class="pos_abs">This is a heading with an absolute position</h3>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is moved left 20 pixels</h2>
<h2 class="pos_right">This heading is started right 20 pixels</h2>
</body></html>
Example:40
Example(overflow.html):
<html><head>
<style>
div.scroll {
background-color:#00FFFF;
width:100px;
height:150px;
overflow:scroll; }
div.hidden {
background-color:#00FF00;
width:90px;
height:75px;
overflow:hidden; }
div {
background-color:yellow;
width:150px;
height:150px;
overflow:auto; }
</style> </head>
<body>
<p>overflow property specifies what to do if the content of an element exceeds the size of the element's box.</p>
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout.you can scroll for rest of the data. the default value is visible.</div>
<p>overflow:hidden</p>
<div class="hidden"> you cannot scroll the data.you can not see all data.</div>
<br>
<div>
You can use the overflow property when you want to have better control of the layout. Try to change the overflow property to: visible, hidden, scroll, or inherit and see what happens. The default value is visible.
</div>
</body></html>
Example:41
Example(cursor.html):
<html><body>
<p>different styles of cursors .move the cursor on each word.</p>
<span style="cursor:auto">auto</span>|<br><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body></html>
Example:42
Example(imageright.html):
<html><head>
<style>
img {
float:right;
border:1px solid red;
margin:0 0 15px 20px;
padding:15px; }
span {
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%; }
</style></head>
<body>
<p> <span>w</span>e have added an image with style <b>float:right</b>. the image will float to the right in the paragraph.</p>
<p>
<img src="d:\css\bomma.gif" width="95" height="84" />
A ‘ jungle-like mind ‘ doesn’t allow cosmic energy to enter into the body-system.
When the mind is like a forest, it becomes a great barrier ... it does not allow any cosmic energy to seep into the physical body.
The ‘ jungle-like mind ‘ is so very impermeable, so very ‘ solid ‘! However, when the ‘ solidlike mind ‘ becomes a ‘ liquid-like mind ‘ or a ‘ vapour-like mind ‘, there is so much more
porosity and the mind becomes that much more permeable … and ... the cosmic energyfloods into the physical body ... following the simple laws of natural physics ! </p>
</body></html>
Example:43
Example(imagefloat.html):
<html><head>
<style>
.thumbnail {
float:left;
width:110px;
height:90px;
margin:5px; }
.text_line {
clear:both;
margin-bottom:2px; }
</style></head>
<body>
<h3>Images</h3>
<p>Try resizing the window to see what happens when the images does not have enough room.</p>
<img class="thumbnail" src=d:/css/purple.GIF width="107" height="90">
<img class="thumbnail" src="d:/css/DON.GIF" width="107" height="80">
<img class="thumbnail" src="d:/css/FISH.GIF" width="116" height="90">
<img class="thumbnail" src="d:/css/THUNDER.GIF" width="120" height="90">
<h3 class="text_line">Second row</h3>
<img class="thumbnail" src="d:/css/bomma.GIF"" width="107" height="90">
<img class="thumbnail" src="d:/css/ANGEL.GIF"" width="107" height="80">
<img class="thumbnail" src="d:/css/COMPUTER.GIF"" width="116" height="90">
<img class="thumbnail" src="d:/css/COMPUTER2.GIF"" width="120" height="90">
</body></html>
Example:44
Example(homepage.html):
<html><head><style>
div.container {
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%; }
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:cc33cc;
clear:left; }
h1.header {
padding:0;
margin:0; }
div.left {
float:left;
width:160px;
margin:0;
padding:1em;}
div.content {
margin-left:190px;
border-left:1px solid gray;
padding:1em; }
</style></head>
<body>
<div class="container">
<div class="header"><h1 class="header">Medha computers</h1></div>
<div class="left"><p>"Medha computers established in 1995 to cater the IT needs of in and around naidupet with
latest skills ,updated materials.</p></div>
<div class="content">
<h2>naidupet pss</h2>
<p> Meditation is silencing the incessant chatter of the
restless mind! we..begin...wtih...the...breath! The process
of meditation is simple ."Close your eyes and be with your natural breath" .
Meditation silences the restless waves of mind, thereby preserving soul energy . leading the good health, peace of mind and wisdom of life.
Meditation done inside pyramid or underneath a pyramid, is called PYRAMID MEDITATION.</p>
<p>www.pssmovement.org: meditation for all.be
vegetarian,be a meditator</p></div>
<div class="footer">Copyright unreserved.spread meditation
to all.</div>
</div> </body></html>
No comments:
Post a Comment