[Solved] Noobie Layout Question

[Quintin_S]

Hi all,

I’m busy with my first completely sprite-based layout. Wow, what a ride…

I have a layout in a wrapper div which looks like this:

http://www.isochronous.net/images/layout.png

There’s a #header div and a #footer div with a #content div between them. The #content div is going to have two pillars to the left and right sides, but I’d like #pillar-top-left and #pillar-top-right to “stick” to the header and #pillar-bottom-left and #pillar-bottom-right to “stick” to the footer. However, I’m not sure how to do this or whether it’s even possible. Any ideas?

Thanks a lot for your help!

[CoolAsCarlito]

As a fellow beginner web designer are you sure you want that? What purpose is having all that empty space in between the two pillers on the sides instead of having the empty space between the bottom pillers and the footer?

[Chris Enloe]

This is very possible, but in the end it isn’t going to look appealing to a site visitor.

[Quintin_S]

Haha, it’s just a diagram… Maybe I should show you guys the actual design.

http://www.airtimeproductions.co.za/sites/isochronous/index.html

The “pillars” divs should actually seem part of the footer, but I’m not sure how to pull this off in the CSS.

[TheDoc]

I like the design. I don’t think you should be coding it like you’ve presented in your first post. You don’t need to have the pillar divs.

The footer might be a little trickier.

This design is a perfect example of why we need to be able to add two different backgrounds to one element!

[Quintin_S]

@TheDoc

Thanks. Looks like I’ve got my work cut out for me though. What do you suggest by way of another way of coding it?

Here’s the site as it currently stands: http://www.isochronous.net/template.html

Currently, the header pillars work fine as they are, but aligning the bottom pillars are another story.

[TheDoc]

I wouldn’t make each nav item an image, I’d make the entire header have one single background and I would use HTML text for the nav. You can fancy up the font with different services, but it’s a much better way to go.

[Quintin_S]

The problem with that is that the different nav buttons are of different lengths. I know it works great, like in the header of CSS-Tricks itself, but I’m committed to the current design, I’m afraid.

Any thoughts on how to pull off the footer and header layout without using the “pillars”?

[TheDoc]

Why does it matter what lengths the nav items are in this case?

[Quintin_S]

Basically, because of the sprite menu and the rollover effects involved. I’d prefer to keep it that way.

[Chris Enloe]

I stand corrected. I dig that design! ;)

[Quintin_S]

Cheers guys… I wish I could put it together without breaking my brain, though!

[rudynorman]

Why can’t you use a body background of black, and then have two divs with a background image stick to the top and bottom and have the black background your scrolling background for the long pages? Then use another wrapper div for the middle content and have it on top of the ‘background’ divs?

This is just first glance and might not make sense, or I might not be explaining it very good.

Hope it works out for you.

[Quintin_S]

Eeesh… Rudy, I follow you until about the middle of the first sentence! Sorry.

I’m getting quite far with the layout, but those pillars are still bugging the heck out of me:

http://www.isochronous.net/template.html

I’ve now wrapped #pillar-top-left and #pillar-bottom-left in #pillar-left, and the same for #pillar-right, floated the two pillar wrappers left and right and I’m trying to do it with absolute positioning.

Actually, I remember now that when I was still working as a web designer at an agency, I was sending the developers layouts like this and they’d be pulling their hair out by the end of the day and the design just never got implemented properly. I’m now getting a taste of my own medicine, it seems. Should I be worried?

[rudynorman]

I realize its a bit hard to explain, but hopefully this diagram will help a bit.

[Author]

Posts