The Best Way to get a site that Expands with your Content

All of the previous techniques for building a page or template that expands with your content are no longer needed. Now it's as simple as naming your 'frame' layer with the _frame Layer Naming Convention and putting your content inside. Yep, that's all there is to it. Gone are the days of designing a bunch of layers, taking great care that this is inside of that and this is on top of that and editing CSS by hand afterwards.

Just design the frame - the graphics that you want your content to fit wihin. This will include what's above, below, left and right of your content. Make that one layer in your Photoshop file and name it with the _frame Layer Naming Convention. Then make another layer for your content. You can use any of the existing psd2css Online content Layer Naming Conventions (_text, _drupal, Joomla, or _wordpress). Make the content fit within the frame (that only makes sense, right?).

You can even add other psd2css Online layers inside the frame too - they will stay fixed relative to the bottom of the frame - so for example if you want some _lbthumb images or a button, or some text based links to stay in a 'footer' under your content, just draw it in under the content but within the _frame in Photoshop and it will work. Take a look at the video for an example - there is a button in the _frame that stays under the content no matter how much content there is.

When adding features within the _frame to stay under your content, you have to be sure to list the content that you want to expand above all other content in the _frame. For example, suppose you put your content_joomla layer inside a _frame, but you want to put a joomla_footer underneath it inside the same _frame - so when your content grows, your footer pushes down with it. To make it work, you have to make sure the content_joomla layer is listed above the footer_joomla layer in the Layers panel in Photoshop. Whatever _text, _joomla, _drupal or _wordpress layer is listed first in the Layers panel of Photoshop will be the one and only 'expandable' layer that will make the _frame expand. All other layers of any kind will be fixed relative to the bottom of the frame.

Note: - There was a bug originally with the _frame feature that if you did add other expandable features (2 _text layers for example), you got an error. This has been fixed and the above paragraph is now true

Here is the PSD file used in the tutorial:
http://psd2cssonline.com/tutorials/frame/frame.psd

Here is a link to what was generated in the tutorial for HTML/CSS (no code was written by hand!):
http://psd2cssonline.com/tutorials/frame/index.html

Here is the video tutorial:

Here is the video tutorial: