22. Displaying Positioning and Floating an Element

Working with the display property
<!DOCTYPE HTML>
<HEAD>
<TITLE>display</TITLE>
<STYLE type="text/css">
p{
display:inline;
}

span{
display:block;
}

h1{
display:none;
}
</STYLE>
</HEAD>
<BODY>
<H2>Hello all</H2>
<P>This is </P>
<P>my paragraph</P>
<H2>Hello all</H2>
<SPAN>This is </SPAN>
<SPAN>my paragraph</SPAN>
<H1>Hello World</H1>
</BODY>
</HTML>

display property using javascript

<!DOCTYPE HTML>

<HEAD>

<TITLE>display</TITLE>

display:inline;

}

</STYLE>

</HEAD>

<BODY>

<H1> Changing the display Property Using JavaScript</H1>

<H2>Hello all</H2>

<P Id="display">Changing the display</P>

<P Id="display">property of my paragraph</P>

<INPUT Type="button" onclick="document.getElementById('display').style.display='block';

" value="display:block">

<INPUT Type="button" onclick="document.getElementById('display').style.display='inline';

" value="display:inline">

</BODY>

</HTML>

Working with the visibility property

the visibility property decides whether the element should be visible or hidden

<!DOCTYPE HTML>

<HEAD>

<TITLE>visibility</TITLE>

<STYLE>

.visible {

visibility: visible;

}

.hidden {

visibility: hidden;

}

</STYLE>

</HEAD>

<BODY>

<H1> Working with visibility Property </H1>

<P class="hidden">My paragraph is hidden</P>

<P class="visible">My paragraph is visible</P>

The first paragraph is hidden and the second paragraph is visible

</BODY>

</HTML>

visibility property using javascipt

<!DOCTYPE HTML>

<HEAD>

<TITLE>visibility</TITLE>

<STYLE>

.visible {

visibility:visible;

}

.hidden {

visibility:hidden;

}

</STYLE>

</HEAD>

<BODY>

<H1>Changing the visibility Property Using JavaScript</H1>

<H2 id="hide">Hello World!</H2>

Click this button to change the visibility property of the H2 to hidden:<BR/>

<INPUT Type="submit" onclick="document.getElementById('hide').style.visibility='hidden';

</BODY>

</HTML>

Hiding an Element

hide elements using both the display and visibility properties

<!DOCTYPE HTML>

<HEAD>

<TITLE>display and visibility</TITLE>

h2{

display:none;

}

h3{

visibility:hidden;

}

</STYLE>

</HEAD>

<BODY>

<H1>Hiding Elements using display and visibility Properties</H1>

<P>my paragraph 1</P>

<H2>Hello World</H2>

<P>my paragraph 2</P>

<H3>Hello world</H3>

<P>my paragraph 3</P>

</BODY>

</HTML>

Setting Fixed Position of an Element

fixed value of the position property that fixes the position of an element with respect to the rest of the web content.

<!DOCTYPE HTML>

<HEAD>

<TITLE>fixedposition</TITLE>

.pos_fixed{

position:fixed;

bottom:10px;

right:5px;

}

</STYLE>

</HEAD>

<BODY>

<H1> Fixing the Position of the content </H1>

<P> In this Web page, we have fixed the position of the feedback image to the bottom right corner of the Page. The image remain fixed at this position even if you scroll the page.</P>

<P> We are at the bottom of the Web page and the image, showing an arrow, displays at the same position of the page.</P>

</BODY>

</HTML>

Setting Relative position of an element

relatively position an element by setting the value of the position property to relative

<!DOCTYPE HTML>

<HEAD>

<TITLE>relative</TITLE>

.pos_left{

position:relative;

left:-20px;

}

.pos_right{

position:relative;

left:20px;

}

</STYLE>

</HEAD>

<BODY>

<H1>Showing Relative Position of the Text </H1>

<P>Normal positioning</P>

<P class="pos_left">paragraph is moved 20 px left w.r.t. the normal positioning</p>

<P class="pos_right">paragraph is moved 20 px right w.r.t. the normal positioning</P>

</BODY>

</HTML>

Setting Absolute Position of an Element

the absolute value of the position property makes the position of an element absolute with respect to the rest of the web content.

<!DOCTYPE HTML>

<HEAD>

<TITLE>Absolute Positioning</TITLE>

.absolute{

position:absolute;

left:100px;

top:150px;

}

.absolute2{

position:absolute;

left:10px;

top:50px;

}

</STYLE>

</HEAD>

<BODY>

<H1 class="absolute">This is a heading with an absolute position</h1>

<P>

This is my paragraph<BR/>

</P>

</BODY>

</HTML>

Overlapping of Elements

Z-index, which overlaps the content of two elements

this property specifies a stack order that positions one element over another.

<!DOCTYPE HTML>

<HEAD>

<TITLE>overlapping</TITLE>

position:absolute;

left:0px;

top:0px;

z-index:-1;

}

</STYLE>

</HEAD>

<BODY>

<H1 style="color:red";>This is a heading</H1>

<P>

My paragraph<BR/>

</P>

<H2 style="color:red";>Because the paragraph has a z-index of -1, it will be placed behind the text.</H2>

</BODY>

</HTML>

the p element is placed beneath the two heading elements h1 and h2.

the content of h1 and h2 elements is overlapped on the content of the p element.

Floating an Element to the right

element can be floated to the right of a webpage by assigning a right value to the float property

<!DOCTYPE HTML>

<HEAD>

<TITLE>float to the right</TITLE>

.foo1{

float:right;

}

</STYLE>

</HEAD>

<BODY>

<H1>Floating an Element to Right </H1>

<P>

My paragraph. My paragraph. My paragraph. My paragraph.

</P>

</BODY>

</HTML>

Floating an Element to the left

element can be floated to the left of a webpage by assigning a left value to the float property

<!DOCTYPE HTML>

<HEAD>

<TITLE>float to left</TITLE>

.foo1{

float:left;

}

</STYLE>

</HEAD>

<BODY>

<P>

<H1>Floating an Element to Left </H1>

My paragraph. My paragraph. My paragraph. My paragraph.

</P>

</BODY>

</HTML>

Turning-off Float

you can disable the floating effect of an html element by using css property, clear.

clear property uses the left value to disable the effect of left floated element and

right value to disable the effect of right floated element.

<!DOCTYPE HTML>

<HEAD>

<TITLE>clear</TITLE>

.off{

clear:both;

}

</STYLE>

</HEAD>

<BODY>

<H1>Turning off Floating of the Element </H1>

<P>

My paragraph. My paragraph. My paragraph. My paragraph.

</P>

</BODY>

</HTML>

an IMG element is set as left floated by using th float property

then, clear property is used to disable this effect.

float using javascript

<!DOCTYPE HTML>

<HEAD>

<TITLE>float</TITLE>

.float{

clear:both;

}

</STYLE>

</HEAD>

<BODY>

<H1>Floating an Element Using JavaScript </H1>

<P>

My paragraph. My paragraph. My paragraph. My paragraph.

</P>

</BODY>

</HTML>

Pages

22. Displaying Positioning and Floating an Element

No comments:

My Favorite Books

Books

HTML Programs

HTML Basic

JavaScript