- This topic is empty.
September 29, 2010 at 10:41 pm #29919
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:
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!September 30, 2010 at 12:48 am #78828CoolAsCarlitoParticipant
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?September 30, 2010 at 6:12 am #78831Chris EnloeMember
This is very possible, but in the end it isn’t going to look appealing to a site visitor.September 30, 2010 at 10:30 am #78825
Haha, it’s just a diagram… Maybe I should show you guys the actual design.
The “pillars” divs should actually seem part of the footer, but I’m not sure how to pull this off in the CSS.September 30, 2010 at 12:05 pm #78631
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!September 30, 2010 at 12:56 pm #78633
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.September 30, 2010 at 1:01 pm #78634
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.September 30, 2010 at 1:11 pm #78635
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”?September 30, 2010 at 1:47 pm #78638
Why does it matter what lengths the nav items are in this case?September 30, 2010 at 2:06 pm #78641
Basically, because of the sprite menu and the rollover effects involved. I’d prefer to keep it that way.September 30, 2010 at 4:48 pm #78650Chris EnloeMember
I stand corrected. I dig that design! ;)September 30, 2010 at 4:57 pm #78651
Cheers guys… I wish I could put it together without breaking my brain, though!October 1, 2010 at 11:14 am #78666rudynormanMember
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.October 2, 2010 at 4:40 am #78689
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:
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?October 2, 2010 at 3:17 pm #79935
- The forum ‘CSS’ is closed to new topics and replies.