
	Free Webmasters Resource
	Free Graphics, Tutorials, Scripts, Webmaster Forums, Web Templates, SEO Tools, & Much More!!

Layering Images

The code about to be described can make pixel perfect content placement possible.

Say you have two images, like the two images below:

But, you want them to be on top of each other to form a cross like the one below:

How did I do that? Magic, you say? Nope, all I did was add a couple of <div> tags. Here is the code:

First, you must give your div a name, which the id attribute does. The style attribute will define the position of the whole layer of content the falls inside the <div> tag. There are only a few things that you have to remember:

The left function positions the image x number of pixels from the left of the browser to the left side of the image.

The top function positions the image x number of pixels from the top of the browser to the top of the image.

Remember to put position: absolute in because if you do not, the position will default to the position: relative setting which is more difficult to work with and can cause some varying placements in different browsers.

That's all you need to know. Layer it up!

Tutorials: HTML
Title/Description	Level
Backgrounds: Tutorial Learn how to effectively add backgrounds to your page that make your page look professional or amateur.	Beginner
Imagemaps: Tutorial Make one image into various clickable regions using only HTML	Intermediate
Embedding Fonts: Tutorial Learn how to use uncommon fonts in web pages by embedding them.	Advanced
Images: Tutorial Positioning images can make your images look just right when inserted into text.	Intermediate
Form Effects: Tutorial Learn how to create trendy forms with simple style commands as well as with CSS classes.	Intermediate
Layers: Tutorial Layers can make complicated image placement possible.	Advanced
Forms: Tutorial Use forms to gather information from your users.	Advanced
Links: Tutorial Making links in HTML is the easiest thing you will ever do.	Beginner
Frames: Tutorial Learn how to create frames that enable you to create navigation systems on your site.	Advanced
Scrollbars: Tutorial Learn how to add effects to your scrollbars and add flavor to your page.	Advanced
Hide From Print: Tutorial Learn how to only allow a visitor to print part of your page using CSS.	Intermediate
SSI: Tutorial Learning how to do SSI will save you a lot of authoring time.	Advanced
Horizontal Line: Tutorial The horizontal line serves as a great separator tool.	Beginner
Table Styles: Tutorial Learn how to add various table styles such as dash or dot borders, and many other things.	Intermediate
Iframes: Tutorial Iframes can organize your website into clean sections.	Advanced
Tables: Tutorial Organize your web page layouts with tables.	Intermediate
216 Web Safe Color Chart: Tutorial The 216-color color-safe palette refers to colors (RGB values) that will appear the same on either IE or Netscape and Windows or Mac platforms.	Beginner
Pantone RGB/Hex/HTML Colors: Tutorial This table contains all pantone colors converted to RGB and Hex. It displays them all in HTML colors.	Intermediate

Computer Playground · Templates Resource

Free Graphics, Tutorials, Scripts, Webmaster Forums, Web Templates, SEO Tools, & Much More!!

Layering Images

Tutorials: HTML

Title/Description

Level