CSS / Framework / Grid - looking for the right approach & tipps

Hi all,

i’m looking for the right tool/framework to create that kind of grid-layout: http://i.imgur.com/15iLW.jpg

content width + the hockeystick-ad sums up to 976px, which would probably work with the http://978.gs framework. Or should i focus on the 800px for the content when i choose the framework and custom-code the adspace around it?

btw. the hockeystick adspace should be optional for the template i’m building, so i’m wodering about the best practice to integrate. inside the wrapper, or another outer wrapper? it could also be just a scyscraper ad and/or a big horizontal banner.

any ideas and input is very much appreciated thanks, j

Hey SharkyB, hey caught up with you here from the tweets...
If you put the ads on a layer, you’ll want to watch out for transparent type flash ads.
Those have a way of finding there way to the foreground and that would push the entire content portion of the layout to the background. Just something to watch out for, if any of the ads will be flash expanding ads, etc.

I guess layers may not be necessary, just the top ad is basically an offset header, since the content areas are only at 800, the offset layer probably complicates things, nevermind... just thought it might make the flow of the layout easier to maintain.

Hey Crssp, thanks for stopping by

do you know any artices about how this is usually done?

cheers, j

In 978 simpler grid, looks like you would just create a .top-ad class div
Place it at the top of the .container div, or outside it if you’ld rather.

.top-ad div {
width: 978px;
float: right;
}

The side banner ads the tricky one. You’ld have to look at the nested div structures towards the bottom to get that part right:
http://www.webdesignerwall.com/demo/simpler-grid/978grid.html

Hello again sharkB... just noticed the 978 simpler grid code missing prefix, suffix, push pull classes.
A quick google found this spin-off works.
You’ll need all these me thinks.
Check these links:

• http://teknekwebservices.com/projects/978grid.html - demo
• http://teknekwebservices.com/blog/css-grid-978px-improved/

A good start to dev’ing your own framework, I just never quite caught on with the 960.gs and some of it’s extra classes, about to start my own project, hoping these help build my own framework too.

hey Crssp,

thank you very much for your help, i really appreciate it!
checking out some sites with that kind of banner ads, i think i have to place the two divs (top banner, skyscraper -> wallpaper) separately. hmm, or not. the site should center always, with, or without the ad to the right.

thanks, j

just wodering ... is the above linked grid/layout even possible with one of the frameworks out there? or would it be easier to custom-code it all? i’m not too familiar with those frameworks - that’s why i’m asking

thanks, j

Depends on your experience and knowledge of a framework. I tried picking up 960.gs and never quite caught on with that.
If you don’t foresee needing the flexibility of the grid layout, and the layout will remain the same on most pages, then custom coding something will take the learning curve out of it for you.
Frameworks are really all about making it easier, if you get the logic, and sometimes it’s hard to pick-up the logic, compared to the way you may be used to laying out your pages.

I use Blueprint CSS and have been starting to use LessFramework.com. I love Blueprint. Less Framework is appealing because of its multiplatform approach with different screen aspects addressed. But I am not hugely good with fluid layout, so this is new for me.

http://www.blueprintcss.org/

thank you both

a problem i’m facing right now is, that the main content (fixed width) should always be centered, no matter if there’s an skyscraper-ad being displayed to the right, or not. sounds easy, but ... any pointers?

thanks