Basic Layout Problems

[mitchpowell]

Hi all -
I'm trying to make this look more like this.

Would anyone care to offer some suggestions?

I'm poking away at it, but CSS positioning hasn't been one of my strong points.

Any help would be greatly appreciated.
Thank you,
Mitch Powell

[mitchpowell]

I've been trying, but just can't get over this simple hurdle:

In General Display | Page Framing | Layout Container Style, I've put a 1040px-wide background image w/transparency, but I want this image to only repeat after the top 50px, and only down to just before the footer.

Maybe I need to create a container inside this container? Where would I do that?

This is where I have the prototype. The way I want the page to appear.

As it stands, the layout container background image goes from the top of the browser window to the bottom. See the problem here.

Once I get past this hurdle, the next one is going to have to do with my site navigation menu. I'm hoping to apply the up and down buttons as seen in the prototype.

I sure wish somebody could push me past this obstacle. I know it's got to be a pretty simple solution, but i just can't figure it out.

Thanks,
Mitch

[Tony Lee]

Hi Mitch,

Sorry about the delay...I've been on vacation in the sticks and haven't had network access until now.

We are just getting to head out for the day, but I'll go over it this evening and show you how to get it to look the way you want it.

Just from a quick look though, I'm betting that it would be much closer if you do the following:

Instead of using a padding-top on the Privateer - General Display - Body and Text Style - Body Style option, use a margin-top. That will keep the grey background out of the area above the date-feed bar.

For the date feed bar, you might need to use the top piece of your logo bar ( or image bar ) as a background and shrink the image by that much so it looks proper.

For the footer area, the best way to go will depend on where you want the footer text content. If you want it underneath the grey with the sea stars, you might need to replace the background of the Privateer - General Display - Footer option with the background you want and give it a top padding equal to the height of the grey area of the image. Of course, I'll post back with specifics this evening that should get everything straightened out.

Again, sorry about the long delay.
~Tony

[Tony Lee]

Hi Mitch,

I've had a lot less free time than I had thought, and have not yet had a chance to put the full details for your look together. I board the train back home tomorrow...so I should have some time once on the train to go through everything and put step by step instructions up to get things to look right.

Sorry about the long delay!
~Tony

[mitchpowell]

Thank you Tony -

I'm still plugging away at possibilities. I just don't get it. Style declarations of "position:" and "display:" and "clear:" are always confounding to me. I've studied a lot about it, cross-browser hacks, and so on, but never really seem to understand the box model all that well.

I guess here in this forum there must be a setting for me to receive email updates of replies to my posts. I'm off to go find it now, since I didn't realize you'd answered me here until I came back to look.

Mitch

[Tony Lee]

Hi Mitch,

Hopefully the detailed instructions I sent did the trick. Please let me know if not and I'll be glad to get things worked out.

Once I get a little time, I'm going to write up a more detailed explanation of the box model and update the simple html and css guide that I wrote so long ago. I'll send you a copy once it is revisited.

~Tony