Layer 4 copy

Upload your PSD file...

Take a quick look at the Guidelines to see how to prepare your PSD file


Please wait - we are now uploading and converting your file...


Wait! You can upload your PSD, but you aren't logged in! If you submit now, you won't get any of the cool Unlimited features. You'll just get plain XHTML and CSS DIVs. Create a new account to use all the great Unlimited features free for 2 weeks.

When is a Layer 'inside' another Layer?

When you use psd2css Online to generate web pages from your PSD files, the idea of what layer is inside what other layer is important. It's based on the size, location and depth of the layers on the screen (not the folder in Photoshop). It's pretty straight forward usually and even intuitive, but sometimes it can be a little confusing. This is a quick discussion of how psd2css Online interprets the layers in a PSD file - specifically when is a layer 'inside' another layer and what that means to you.

One layer is inside another layer if the screen space bounds of one layer fit completely within the screen space bounds of another layer and the larger layer is deeper in the stack of layers (behind) the smaller layer.

The fact that psd2css Online keeps this idea of layers being inside other layers really is one of the most powerful aspects of what psd2css Online does. Many of the features of psd2css Online are about 2 or more layers on your page interacting: form elements and the form they belong to, the scrolling images, relative layers, and especially the _page feature. Sometimes you will even make a container layer that is _empty for no other reason than to hold other layers for some reason.

In DOM parlance, a layer that is 'inside' another layer in your PSD file will generate CSS layers and HTML where the inside layer is a child of the outside layer. The one is embedded within the other. Usually this is done with absolute positioning.

Here is the simplest example of what layer would be inside what other layer. Remember, the 'folders' in Photoshop or GIMP have nothing to do with the kind of 'inside of' that we are talking about here.

This is the simplest case of a layer being inside another for psd2css Online. When Layer B is inside Layer A (top) The HTML generated would be something like this:

<div id="Layer A">
   <div id="Layer B">

This is important for a number of reasons. If you want to edit your CSS manually after the conversion and move Layer A by changing the CSS 'left' or 'top' attributes, Layer A and all it's children (Layer B in this case) will move with it. Usually this is what you intend. If you make Layer A to be a _menu layer and Layer B is one of the menu elements, you want Layer B to appear and disappear with the menu so this is exactly what you want. If you make Layer A be a _page layer and Layer B is the content just for that page - enabling and disabling Layer A works for you too. For most designs to be converted with psd2css Online this is all you need.

Here is where some interesting situations can happen though. It's important to know that any CSS layer can only be a child of one other layer. And that child doesn't know or care about what relationships it's parent has with other layers - whatever happens to the parent, happens to the child. So this can happen:

The top situation where Layer C is inside Layer B and Layer B is inside Layer A makes sense. It looks intuitive. This is what happens for 95% of all psd2css Online usage.

The lower situation above is where it doesn't look quite as intuitive. Layer C is inside Layer B - no problem. But Layer B is clearly not inside Layer A - ok. Layer C can only have one parent and it is going to have the parent that bounds it, is behind it, and closest in depth to it. So sure, the bounding rectangle of Layer C is smaller and within the bounding rectangles of both B and A. And both Layers B and A are even behind Layer C. But Layer B is closer to Layer C - it's right behind it - Layer A is deeper in the page. That means that C is inside B. But then B is still not inside A and so in the end, C is NOT inside A.

The most common real world application of this is when you are using the _page feature. _page is used to create multiple page websites from a single PSD file. The _page feature will use the first part of the layer name of every _page layer to generate a new seperate HTML file. Each HTML file will contain all the layers that are not inside any _page layer, and the content inside THAT _page layer. So a layer called contact_page will generate an HTML page called contact.html that will include all the layers that aren't in any _page layer AND the content that is inside the contact_page layer, but NOT the content that is inside an index_page layer or a products_page layer, etc.

Here is a screen grab of a very simple but BROKEN design that uses _page

Everything looks great - we have a small menu that will generate links to index.html, products.html and contact.html, and we have pages that will be generated for each. When you upload this PSD file to psd2css Online and look at the preview you think - 'Wow! it's perfect. Exactly what I wanted'. Then you click on the Products link and you are taken to the products.html page but Whoa! - the menu disappears! That's because those _link layers that make up your menu are INSIDE the index_page layer. So of course they disappear when you go to the other pages.

Here's how you fix this problem - it's sort of a trick, but it illustrates very well what 'inside' really is and how you can use it to your advantage even when things aren't so intuitive.

See the new layer that was added called 'container_empty'? It's ABOVE all the _page layers and encompass those menu elements. So the menu elements become children of the container_empty layer. Now - because the container_empty layer is NOT inside any of the pages it won't disappear when those pages change. Now this PSD design will do exactly what you expect. The container_empty layer is empty so that no images are generated - we don't want to see that big gray box, we just need it to be the parent for those menu elements.

I hope this helps explain what 'inside' means for psd2css Online. If you have any other questions or comments please leave them in the forum or feel free to write me. Thanks.


The impressive post

The impressive post. it is very useful for the web designing and developing experts. They can handle the layer problem by that.


Hi Shaun, I truly appreciate your assistance on this great site you've created! I'm trying to create multiple pages on a wordpress theme, however, when I install the theme and activate it, all the pages show up at once. Please help! Thank you! PS: How would I center my header? would it just be header_center_jpg? Thanks again!


Hey will this work in the joomla environment too? If I use this process on containers for lets say modules? If I place the container under module2_joomla, will it recognize that as the parent layer for module2?


Hi Shuan, Thanks for sharing

Hi Shuan,
Thanks for sharing nice information. I found your post very useful, helpful and informative. Your method of explanation is very good and easy to use. Thanks again!!! <a href="">adobe training</a>

numerous links

Hey Shaun,

This site is the best! Thanks! How would you have numerous links directing to the same place in one page?? How would you name it in photoshop?

Thx in advance\!

Hhhmm - interesting

Hhhmm - interesting question. Numerous links to the same page should work fine if you name the link layers all the same. However, that becomes a problem quickly if you want to have matching _linkovers - then it won't work and you'll have to make distinctly named _link and _linkover pairs and then modify the HTML file by hand to make them all href the same page.


copyright (c) 2009 psd2css Online, Inc.



User login

Become a Fan of our Facebook Page

Need help or have a question?

| Privacy | Terms of Use |

copyright (c) 2008, 2009, 2010, 2011 psd2css Online, Inc.
Patent Pending

Syndicate content