Border image challenge

[ronanpcs]

I’m somewhat new to CSS but so far I’ve been able to figure out most things until I reached this problem.

I have a template that I’m building that has a pattern design that surrounds the pages and then fades to a solid color center background. I’ve chopped the design using Fireworks. It has a masthead, horizontal navigator bar, then a maincontent section, followed by an ‘insert’ section that repeats for page growth and then a footer.

I have the masthead, navigation bar and left and right maincontent images all locking into their proper positions, but as my maincontent area grows, the left and right ‘insert’ images, which should be locked to the bottom of the left and right maincontent images, are being pushed down by the maincontent growth.

I’ve probably changed everything too many different ways by now to straighten it out, but any guidance to ‘css’ this setup would be immensely appreciated by this newbie.

I was planning to upload Notepad text files of the master.dwt and master.css files along with the images sizes so you could go through them, but the forum won’t let me upload .txt files. Any suggestion would be appreciated.

The actual test page is http://www.webarticulate.com/highstreet/patterns.htm.

Thanks in advance for your input.

[Stagen]

Well first off I would treat the entire design as one picture alone. Thus eliminating the need for left and right side images and just one background rather.

Then I would crop the middle picture such as it can be titled properly. That means it can be repeated vertically and not cut off at the end such as it does in the design currently.

Other than that, I think you’re right on the mark – except for the fact that you use tables to layout the content. :)

[ronanpcs]

If I crop out the middle section between the navigation bar and footer and keep it as one solid background, how do I make the center of that an editable region for loading content? I ran into a problem making it editable and decided to go to plan B – can I make that whole section an editable region that continue down the page as it grows and repeats that section?

Also, I fall back on the tables method quickly, but what’s a better alternative?

Thanls for your input.

ronanpcs

[Author]

Posts