Today is . Page created 08/29/05, updated 04/08/07
This text is positioned left:60, top:2100 and width:625px. It does not matter where within the <BODY> section of the document you place the code, the positioning attributes will override it. We have this code pasted just below our opening <BODY> tag. If we would to continue to place text within this tag, it would continue to drop down and go over the below text. In other words, this code makes the text "Static" or on top of everything else. You can view our source code which we marked very clearly to see where this code is and is nowhere near where it is located on the page itself. We had to compensate for the variations so it would be viewed as close to the same in both platforms.
<div id="example" style="position:absolute;left:270;top:70;font:bold 12px Verdana"> A
bsolute positioning div tags place your material in the exact position on the page that you want it. This can be an asset in certain situations that exact positioning is imperative. A perfect example of how this is used to its best advantage is within the game of "Tower Of Hanoi". If you grab the below link, it will give you access to the game where you can view the source code* to see all the positioning tags and how they are being used. * If you do not know howto view a source code, it is quite simple.
We have tested the code in IE7.0, Firefox2.0.0.3, Opera9.10, Netscape8.1.2 and AOL Explorer1.5. This script worked well in IE7.0 and AOL Explorer1.5. In all other platforms we observed that the positioning tags did not work as defined and positioned the text slightly differently causing an overlap on material. B elow we will show you a couple of absolute div tags and their attributes which we will define for you. <div id="footnote" style="position:absolute;left:228;top:445;font:bold 12px Verdana">Place Information Here</div> B elow we will define the different above attributes that you can reconfigure within the positioning tag.
T his is another absolute positioning tag with more or different attributes.
T he most important thing to REMEMBER is the positioning for left and top. As you can see in the above example, you can also use (-) negative numbers in your positioning. Do not get upset if you use numbers and you either have your text on top of or cannot see your material. This just means you need to change the positioning numbers until you are satisfied. Change the numbers until it is where you want it positioned. As you can see in the below, if the text would continue any further, it would be "Static" or on top of the other text not included within the positioning tag. N ext we will cover the use of the closing </div> tag at the end of the code. All material you want included within this code must be in front of or prior to this closing tag. If you want to change the page positioning (Say from center to left) after this material, the closed div tag </div> must again be used and then a new (open) div tag <div align="left"> for page positioning must be used. The closed </div> tag at the end of the code is just for the code, nothing else. If this sounds confusing, it really isn't. See below example. <html> A nd to answer your next question, the answer is "Yes", you can use graphics within the code. Just make the reconfigurations needed for a graphic. See the below example. <div id="example" style="position:absolute;left:450;top:300;"><img src="Path To Uploaded Image" border="0" width="?" height="?" alt="?"> </div> T he last thing to cover is the howto position around the prescribed set attributes within the code. As you can notice the above is nicely positioned between the two main paragraphs of text. This is done by the use of break <BR> tags. If you view the source code, scroll down to the section you see (7) seven <BR> tags, (We marked it very well) one on top of each other and notice how we made use of those tags. The absolute position also depends on the size of the window you are viewing the material. For example on a 17 inch monitor with the page fully opened it may appear correct but on a 19 inch monitor it may overlap. The best case senario would be for absolute positioning to be located within a defined size such as a window that opens to certain dimensions or a width and height defined table. Then the absolute positioning would always be a constant. This too is very well documented within our "Source" code. W
e hope our tutorial was easy to follow and we covered everything in detail. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there,
|
If you are part of the ever growing number of webmasters who enjoy
sharing your knowledge with others on web design, join The
Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today
This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.
Copyright © Consigliere Ltd., All Rights Reserved. 2001-