HTML TUTORIAL PART 44
PROBLEM:
LOOK AT THE FOLLOWING:
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>
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