This is an example of how to get a web page out of psd2css Online that will allow for a 'growing' text area for your dynamic content. psd2css Online relies pretty heavily on absolute positioning of layers in CSS, but it does have support built in for relative layers too.

This is the html as generated by psd2cssonline.com with only a couple manual modifications:

  • The 'height:' line in the CSS modifier for this text layer was removed
  • The 'top:' line in the CSS modifier for the footer layer below was removed

That is all that was required to make it work. I of course added this text to the text layer, and changed the text color.

There was one other thing that I didn't expect - the footer layer overlaps this text layer by a few pixels - I don't think it should, I'm thinking it's a rendering error in Firefox and IE (famous last words :) ). But it was easy to get arournd with the extra empty paragraph at the end of the text

Here is the psd file

Maecenas sit amet elit vel lectus bibendum rhoncus. Aenean ac est at orci viverra congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam ipsum erat, elementum quis, viverra in, tincidunt non, nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In iaculis dolor a tortor. Etiam aliquet hendrerit diam. Morbi at nisi ut massa ullamcorper ornare. Suspendisse potenti. Praesent molestie odio quis leo. Nulla facilisi. Sed fermentum lorem. Aenean mi eros, condimentum sit amet, faucibus sit amet, pellentesque quis, felis. In cursus, dolor at lobortis facilisis, ligula urna tincidunt nibh, ac aliquam metus neque sit amet nibh. Integer lectus erat, accumsan elementum, viverra vel, varius eget, lacus. Duis interdum. Donec viverra massa ut felis porttitor vehicula. Phasellus rhoncus aliquam urna. Quisque iaculis erat id massa. Quisque id magna sit amet ipsum tempor rutrum.

Sed augue. Duis id libero. In nisi est, mollis vel, lacinia sit amet, commodo at, pede. Proin nibh. Vivamus sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam urna massa, gravida ac, pellentesque non, pretium ut, dolor. Cras semper fermentum lectus. Integer bibendum. Nunc sem odio, convallis sed, fermentum nec, pharetra sit amet, libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris malesuada nisi vitae erat. Etiam gravida semper enim. Integer et leo vel dui tempus ultrices.

Duis pulvinar, lacus tincidunt porta ornare, lectus tellus fringilla enim, in tempor magna arcu vitae purus. Nunc urna dolor, consectetuer in, tincidunt sit amet, fermentum et, lorem. Morbi iaculis, velit at accumsan convallis, pede risus viverra justo, et facilisis lorem purus porta neque. Nunc arcu nisi, dapibus ut, imperdiet eu, sollicitudin eget, lacus. Suspendisse nunc. Sed at felis eu tortor consectetuer placerat. Maecenas nec nunc. Etiam bibendum varius elit. Donec sodales dignissim sem. Morbi elit erat, imperdiet non, viverra quis, tincidunt a, ligula. Suspendisse non augue. In rutrum erat vel velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

 

footer_relative