Submit Tutorial

spacer
Newsletter

spacer
RSS
spacer
Submit Tutorial

spacer
website promotion banner
Free Stock Images
  • Create A Free Account
  • Download High-Res Stock Images For Free
  • +5 Million Images
Your Ad Here
Introduction to the Fundamentals of Dreamweaver
by Vecpix.com
Script Tags in HTML
by Kyscorp.com
Advanced Lists
by Joseph Skidmore
Dreamweaver CS4 Smart Objects (Video Tutorial)
by Geoff Blake
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
HTML tutorials
A collection of HTML templates.
Html lessons and tutorials in web page design.
You, too, can design your own website with over 45 interactive HTML tutorials. Also try your hand at JavaScript or check out a search engine submission service.
2 Create a Website
Offers free tutorials on website creation, generating traffic and making money online.
UK Hosting Services
Provider of low cost affordable UK web hosting services.
HTML and CSS  Home HTML and CSS Tutorials Absolute Positioning
rss

Absolute Positioning

Author: Depiction.net More by this author

Added: Oct 21, 2004 Rating:  Average Rating: 2.89 Votes: 37 Position: 9669 of 14445Average Rating: 2.89 Votes: 37 Position: 9669 of 14445Average Rating: 2.89 Votes: 37 Position: 9669 of 14445Average Rating: 2.89 Votes: 37 Position: 9669 of 14445Average Rating: 2.89 Votes: 37 Position: 9669 of 14445 Level: Experienced Software:  DreamweaverGoLiveFrontPage

Absolute PositioningAbsolute positioning allows you to set an object's placement on a page by setting its offset position from the left, right, top, and bottom margins. When an element is positioned absolutely, it is removed from the normal flow, and has no effect on other elements in the normal flow.

If the style below was set to be used by an object, the object would be positioned 325 pixels from the left of the browser window and 400 pixels from the top. The object would be 300 pixels wide, 30 pixels tall, and have a one pixel border.

Note: CSS codes are to be placed in the <head> section of your HTML document. They can also be placed in External Style Sheets.

Code:

<style type="text/css">
#box1
{
position: absolute;
left: 200px;
top: 400px;
width: 300px;
height: 30px;
border: 1px;
}
</style>

This box is 302 pixels wide, including the border.

Expanding on the code above, a simple box can be created as an alternative to HTML tables.

Code:

<style type="text/css">
#box1
{
left: 200px;
top: 400px;
width: 300px;
height: 30px;
border: 1px;
border-color: #000000;
background-color: #F0F0F0;
padding: 5px;
display: table;
}
</style>

The above style may be specified in an HTML document as follows.

Code:

<p class="box1"> This box is 302 pixels wide, including the border. </p>


Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

HTML and CSS  More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com
Add comments to "Absolute Positioning"