Friday, May 23, 2014

HTML TUTORIAL PART 44

HTML TUTORIAL PART 44

PROBLEM:
LOOK AT THE FOLLOWING:

This is a heading with no position

This heading is moved left according to its normal position

This heading is moved right according to its normal position

Relative positioning moves an element RELATIVE to its original position.
The style "left:-20px" subtracts 20 pixels from the element's original left position.
The style "left:20px" adds 20 pixels to the element's original left position.

SOLVED:
THE CODE BELOW MADE THE HTML TIP:

<!DOCTYPE html>
<html>
<head>
<style>
h2.pos_left
{
position:relative;
left:-20px;
}

h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>

<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>
<p>Relative positioning moves an element RELATIVE to its original position.</p>
<p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>
<p>The style "left:20px" adds 20 pixels to the element's original left position.</p>
</body>

</html>

No comments:

Post a Comment