Today is . Page created 08/29/05, updated 04/08/07

Absolute PositioningAbsolute Positioning Div Tags GPS Exact Positioning

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">

This text is positioned by using the above tag</div>

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.
Tower Of Hanoi ]

*    If you do not know howto view a source code, it is quite simple.

  1. Top of browser window, select "View"

  2. A drop down box will appear with choices

  3. Select "Source" if you are using IE and "Page Source" if you are using Netscape and a notepad will open with the page's source code on it

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.

  •    left:228;    This is how many pixels your material will be positioned from the left margin of the page.

  • top:445;    This is how many pixels the material will be positioned from the top of the page

  • font:bold    This is for bold text and text only. It has no effect on anything but font. You can remove it it you do not want or add other font effects if so desired.

  • 12px    This designates the font size of your text material.

  • Verdana    This designates the font style being used.

  • Place Information Here</div>    This is where you put your information. Be sure it is before the closing </div> tag.

T his is another absolute positioning tag with more or different attributes.

<div id="title"style="position:absolute;visibility:visible;left:-250;top:-250;width:160px;height:20px;font:bold 20px Tahoma;text-align:center;">Text Goes Here</div>

  • id="title"    This designates the name of the particular divide tag

  • width:160px;    This designates how wide the positioning tag will be. Think of this attribute as a size attribute.

  • height:20px;    This designates how high the positioning tag will be. Think of this attribute as a size attribute.

  • Tahoma    Particular font style used within the positioning tag.

  • text-align:center;    This is the alignment of the text within the particular positioning tag.
        This is set to adhere to the confines of the defined height and width 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>
    <head>

    <title<Page Title Here</title>

    </head>
    <body bgcolor="#000000" text="#ba55dc" link="#fff8dc" alink="#fff8dc" vlink="#fff8dc">
    <basefont size="3">
    <div align="center">

    Example code is just below. Notice the above page positioning is <div align="center">

    <div id="footnote" style="position:absolute;left:228;top:445;font:bold 12px Verdana">Place Information Here</div>
    </div>
    <div align="left">

    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.

    On A Final Note     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,
    contact us ].

    Rate This Page ]  

    Talk Live To A Support Technician

    Search Our Site By Individual letter

    A ]  [ B ]  [ C ]  [ D ]  [ E ]  [ F ]  [ G ]  [ H ]  [ I ]  [ J-K ]  [ L ] 
    M ]  [ N-O ]  [ P-Q ]  [ R ]  [ S ]  [ T ]  [ U-V ]  [ W ]  [ X-Y-Z ] 

    Little Tips Directory

    Page 1  ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5  ] [ Page 6  ] [ Page 7  ]

    Index Page 1 ] [ Index Page 2 ] [ Index Page 3 ] [ Index Page 4 ] [ Index Page 5 ]
    Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ]
    Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ] [ Form Index ]
    2001 ] [ 2002 ] [ 2003 ] [ 2004 ] [ 2005 ] [ 2006 ] [ 2007 ]
    Disclaimer ]

    News Letter Archives ] [ Navigation Page ] [ Archives Of Published Material ]
    Link To Us ] [ Alphabet Index ] [ Feedback ] [ On Line Support ] [ FAQ ]
    Webmaster Utilities ] [ Casino ] [ Banner Exchange ] [  Advanced Site Search ]

    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-