| Free Tutorials |
| Internet |
 What is Internet |
| Internet Games |
| Learn TCP IP |
| HTML |
| Learn HTML |
| Learn DHTML |
| Learn CSS |
| Learn XML |
| Learn XHTML |
| Learn WML |
| Database |
| Learn Access |
| Learn Data-VB |
| Learn Oracle |
| Learn SQL |
| Programming |
| Learn ActiveX |
| Learn C++ |
| Learn CGI_Perl |
| Learn Interdev |
| Learn Java |
| Learn JavaScript |
| Learn Vbscript |
| Learn VisualBasic |
| Learn VC++ |
| Operating systems |
| Learn RedHat |
| Learn Unix |
| Learn Winnt |
Content on a Web page normally appears in the physical order in which it is coded in XHTML. In addition, elements can be floated to the left or right of the page with word wrap around them. You may, however, wish to have additional control over placement of page elements. You can, indeed, have precise pixel control over element positioning with the style properties listed
Positioning style properties. In order to be positioned precisely on the page, an element must be assigned a position property. Thereafter, the element can be placed at a precise pixel location using the accompanying left, top, and z-index properties. Relative Positioning Elements on a Web page normally appear at a location that is relative to surrounding elements on the page. That is, they are physically displayed in the order in which they are coded. This is the case with the following <h1> heading line. It appears next in order on the page because its coding appears next in order in this XHTML document. Preceding paragraph... <h1>Words in a Heading</h1> Following paragraph...
Preceding paragraph...
Words in a HeadingFollowing paragraph...A heading positioned relative to surrounding content. Normally, in-line text cannot be moved from its default position on the page. The built-in formatting given by the tag and its surrounding tags dictate where content is located. An <h1> tag always appears a double-space below a preceding paragraph and a double-space above a following paragraph. However, by assigning a position property to a tag, it can be repositioned with pixel precision up or down the page or across the page. In order to reposition the <h1> tag in the above example it can be assigned a position:relative style. Then, by applying the left and/or top property, it can be moved by a certain number of pixels from its original location. The following code repositions this heading by styling the tag with positioning properties.
<style>
h1 {position:relative; left:50px; top:-10px}
</style>
Preceding paragraph...
Words in a HeadingFollowing paragraph...A heading repositioned relative to its original location. With a position of relative, the tag can be repositioned relative to its original location. The left property gives the pixel distance by which the element is offset from its normal horizontal position; the top property gives the pixel distance by which the element is offset from its normal vertical position. In the above example, the heading is positioned +50 pixels from the left of its original location; it is positioned -30 pixels from the top of its original location. Notice that pixel directions can be positive or negative. A positive value for the left property moves the element to the right; a negative value moves it to the left. A positive value for the top property moves the element down the page, a negative value moves it up the page. In the following example each word in a sentence is packaged in a separate <span> container in order to style it separately. Each word then has its its top position offset relative to its normal vertical position across the line. All words are contained by a <div> tag to apply font sizing to the group of words. <div style="font-size:24pt"> <span style="position:relative; top:-15px">Words</span> <span style="position:relative; top:+10px">in</span> <span style="position:relative; top:-5px">a</span> <span style="position:relative; top:+5px">sentence.</span> </div>
Words
in
a
sentence.
Words positioned relative to their normal vertical alignment. Each <span> tag is positioned relative so that its top property can be applied. It is not necessary to position the words horizontally with a left property since <span> tags are, by default, positioned side by side across the line. Only the tops of the words are repositioned from their normal vertical alignment. By repositioning page elements you can create interesting overlap effects such as drop shadows, as shown by the coding below of two positioned <div> tags.
<style>
div#SILVER {font-family:impact; font-size:24pt; color:silver;
position:relative; top:45px; left:5px}
div#BLACK {font-family:impact; font-size:24pt; color:black;
position:relative}
</style>
<div id="SILVER">Drop Shadow</div>
<div id="BLACK">Drop Shadow</div>
Drop Shadow
Drop Shadow
Divisions positioned relative to create a drop shadow effect. This coding takes advantage of the fact that positioned elements are layered as they are added to a page. That is, subsequent elements appear on top of preceding elements as they are coded. This layering is usually not evident since most page elements are not explicitly positioned on top of one another. When elements are overlapped, though, you need to be conscious of this layering. This is the reason for coding the silver drop shadow before coding the black letters in the above example -- so that the black letters (coded last) appear on top of the silver drop shadow (coded first). Normally, <div> tags are displayed one after another down the page. Recall that the <div> tag causes a line break and positions its contents on the next line. In this example, the black words (coded last) originally appear below the silver words (coded first). Drop Shadow
Drop Shadow
Original positions of drop-shadow divisions. The silver division, then, needs to be repositioned +45 pixels from the top and +5 pixels from the left of its original position, placing it below and to the right of the black division. Alternately, the black words could be repositioned -45 pixels to the top and -5 pixels to the left of their original positions. Doing so, however, would place the words 5 pixels outside the left margin of the page. As you are repositioning page elements you will need to use trial-and-error methods to get the exact positioning you want. There is no easy way to know at a glance exactly how many positive or negative pixel offsets are needed for horizontal and vertical placements. Layering Elements As meantioned above, page elements are layered on top of one another as they are added to a Web page. However, you can explicitly change this layering of page elements by coding their z-index style properties. The z-index value is a relative measurement. Elements with larger numeric values appear on top of elements with lower values. Thus, an element with z-index:2 appears on top of an element with z-index:1; an element with z-index:20 appears on top of an element with z-index:10. The absolute value of z-index does not matter. All that matters are the relative z-index magnitudes assigned to a set of layered elements. The colored squares shown demonstrate various positions and layers. In this case, layering is given solely by the order in which the squares are coded -- those coded last appear on top of those coded previously.
<style>
.RED {position:relative; width:100px; height:100px; left:0px; top:0px;
background-color:red; border:solid 1px white; color:white;
text-align:right}
.GREEN {position:relative; width:100px; height:100px; left:-50px; top:25px;
background-color:green; border:solid 1px white; color:white;
text-align:right}
.BLUE {position:relative; width:100px; height:100px; left:-100px; top:50px;
background-color:blue; border:solid 1px white; color:white;
text-align:right}
</style>
<p>
<span class="RED">Red</span>
<span class="GREEN">Green</span>
<span class="BLUE">Blue</span>
</p>
Normal layering of page elements. The red square is coded first so it appears below the green square which is coded second which appears below the blue square which is coded last. Notice that these squares are produced with <span> tags that are given widths, heights, colors, background colors, and borders. No z-index settings are necessary to create this layering. However, the squares are given left and top stylings to offset them horizontally and vertically from their natural side-by-side positions to overlap them and make their layering visually evident. The above squares can have their layers reversed simply by assigning them z-index values. In the following code, the red square is assigned the largest value (bringing it to the top) and the blue square is assigned the smallest value (sending it to the bottom). The order of coding the <span> tags remains unchanged.
<style>
.RED {position:relative; width:100px; height:100px; left:0px; top:0px;
background-color:red; border:solid 1px white; color:white;
text-align:right; z-index:3}
.GREEN {position:relative; width:100px; height:100px; left:-50px; top:25px;
background-color:green; border:solid 1px white; color:white;
text-align:right; z-index:2}
.BLUE {position:relative; width:100px; height:100px; left:-100px; top:50px;
background-color:blue; border:solid 1px white; color:white;
text-align:right; z-index:1}
</style>
Red
Green
Blue
Reversed layering of page elements. Recall that absolute z-index values do not matter so long as the differences in magnitude are in proper relationship. The 3, 2, and 1 values used above could have been coded as 30, 20, and 10; or 300, 200, and 100; or 300, 20, and 1. The largest value is on top and the smallest value is on the bottom, irrespective of their absolute magnitudes. When using relative positioning there is not a lot of latitude
in moving elements from their normal vertical positions on the page. The reason is that
space is still reserved for the repositioned element at its original location
on the page, irrespective of the fact that it has been moved from that location. This can
cause excessive blank space to appear on the page as shown by the following example of a
repositioned paragraph.
Preceding paragraph.... Repositioned Paragraph Following paragraph.... Repositioned paragraph leaving excessive white space at original position. From its normal position the repositioned <p> tag is moved
25 pixels down the page. However, the original size and location of this tag is maintained
in the flow of page elements, occupied now by blank space where the tag would normally appear.
Not only that, any follow-on text maintains its position relative to the original location
of the repositioned <p> tag, thereby being nearly overwritten
by the moved text. As long as page elements are repositioned vertically within a reasonable number of pixels
from their original locations, the above spacing issues should not cause concern. As vertical
distances increase, however, blank space appears in the flow of page elements representing
abandoned space previously occupied by the repositioned element. You will probably need to
try various positionings to get page elements to appear in satisfactory relationships to
one another. Absolute Positioning Whereas position:relative positions a page element relative to
surrounding elements, position:absolute places an element
in relation to its container element. By default, the container element is the Web page
itself, the <body> tag. Therefore, elements are absolutely
positioned in relation to the top-left corner of the Web page and, importantly, are taken
out of the normal flow of page elements. The text layer of a page always has a z-index value of 0 (zero).
Therefore, the <span> tag is given a z-index
value of -1 value in order to layer the word beneath the text layer so that it does not
block out the text. When a page element is positioned absolute and is given
left and top property settings, it
is taken out of the normal flow of page elements. In the above example, the
<span> tag is removed from its normal physical location preceding the paragraph.
The paragraph, then, moves up to occupy the abandoned position of the
<span> tag. This means that it does not really matter where an element that
is positioned absolute is coded on the page. Irrespective of
where it is physically coded, it is still positioned in relation to the top-left corner of
the page. The only case where its coded position matters is when the element is positioned
only by its left (but not its top) property.
If it is not repositioned vertically, it stays in its coded position. Since it can be difficult to determine left and
top page positions relative to a lengthy, scrolling Web page, elements that are
positioned in relation to one another are often placed inside another container element.
This container element is positioned relative to maintain its
position within the flow of page elements; the contained elements are positioned
absolute inside the container. Thus, absolute
position measurements are made relative to the container rather than to the page.
The container becomes the easier-to-manage coordinate system within which contained elements
are precisely positioned. A good general solution to positioning page elements in relation to one another is Define and size a <div> tag to encompass the
positioned elements. Position the division relative, thus
locating it within the flow of page content. As content is added to or removed from
the page, this division still maintains its relative position between other page
elements. It moves up or down the page as page content changes. Place elements to be positioned inside the division, and position them
absolute. Thus, the left and
top distances for the positioned elements are always
measured from the top-left corner of the division. This "local" coordinate system
stays the same even if the division changes positions within the flow of page
elements. The division shown is positioned relative to
maintain its position among other XHTML elements on a page. It is displayed with a dotted
border to make it visible. The enclosed squares are positioned absolute,
with left and top positions measured from
the top-left corner of this division. Absolute positioning inside a container positioned relative. The advantage of using this strategy is that the container division can be moved to
any location on the page and its contained elements still maintain their absolute positions
within the division. It is not necessary to recalculate their positions since they are
always relative to the top-left corner of the container division. The following recode of a drop shadow uses the above strategy to simplify the previous
coding. Absolute positioning of elements inside a container positioned relative. An encompassing division (positioned relative within the flow of
page content) contains the two layered elements to be positioned. The container division is
given a dashed border to show its size and position. The words and shadow positions can be
easily determined by their distances from the top-left corner of this division. The words are
positioned at the very top-left corner of the division (left:0px; top:0px);
the shadow is offset 5 pixels from the words (left:+5px; top:+5px). The
words are given a z-index value larger than the shadow to layer them
on top. When enclosing positioned content inside a division you normally need to set the
width and height properties of the division. A positioned
division has a default width that spans the width of its container -- the width of the Web
page if its container element is the <body> tag. You may
wish to set the division width only large enough to enclose its contained elements as is
done for the above drop shadow effect. A positioned division also has a default
height of 0 pixels irrespective of its content. Therefore, you will need to set its
height large enough to reserve vertical page space for displaying
its enclosed content. The example shown below is a more elaborate use of positioning. It is a
mock-up of a newsletter using the above positioning strategy. Borders are shown around the
various elements to help visualize the layout. The entire newsletter is contained within a division that is sized 500 x 480 pixels and
positioned relative to fit within the flow of content on the page.
Inside this encompassing division are various other divisions positioned
absolute for exacting layout inside the container division. Shown below is an outline of the XHTML coding for the newsletter layout. No content has
yet been added to the newsletter; at this design stage it is just necessary to format its
layout. Content can be easily added once it is known where it goes. Note in particular
the positioning types and measurements for the various divisions. As you can see, it is possible to position page elements at exact pixel locations
on a Web page. It is a bit of trouble to determine pixel distances, but you can gain
precise control over the layout of a page and the exact positioning of its contents. |
||||||||||||||||||||
