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"> </div> </div>
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.