CSS Layout challenge

Here is the layout of a site I want to convert to CSS rather than tables.



Now i’ve got everything in place bar two things:

A) I use a 750px page container - How do place the two images outside of that and in the exact positions shown in the layout

b) I need white space above the menu, so I use a 25px margin, but since my page container is green obviously i get a green space instead. The problem is that I need this green to surround the content area and the 3 sub-content boxes. I thought I could put the content area and 3 sub-content boxes within a larger box and make that green, but this only worked left and right of the content area, not above or below it.

I hate working with other peoples designs.
Any ideas?

Thanks

Hhmmmm,

That is an odd looking design.

Not sure if I fully understand the issues here. But looking at this I would also account for end user text size increases and for variation in content length. I would create a wrapper for everything (including the two image areas on either side of the main content area. I would then give each column a set width and float them across the page (with a 20 pixel safety gutter between floats). The center content area will also need containing divs. I would also float Box A, B and C. As to the background presentation for the entire page I would use a faux-columns image trick that repeats a graphic down the y-axis. This will make things flexible for shrinking and expanding content. With floats on a page like this the danger is that IE will get the box model wrong. This often happens with margins added to the floated boxes. I try to add the margins and padding to the content elements like headings, paragraphs etc rather than to the boxes themselves.

This is all very doable with CSS. I can only imagine what the code must look like if the existing site uses tables and inline styles...

Max

RE: A - Either use a wider container or use absolute positioning (which would allow you to put those images wherever you like).

RE: B - I’m not sure why surrounding those content boxes with a div that has a green background wouldn’t work...?

Absolute positioning is definitely tha bomb, since it will also allow you to easily place the most important content higher in your code.

Sometimes absolute positioning can get tricky with the occasional browser weirdness but when used well its very cool.

Check out this page for a wonderful example: http://csszengarden.com/?cssfile=/210/210.css&page=0

Max

Hi there,

With floats on a page like this the danger is that IE will get the box model wrong. This often happens with margins added to the floated boxes

just add display:inline; to the floated element, then margins won’t be doubled in IE6. If IE is not running in Quirks mode, the box model will be fine.

cheers, j

Quote from: Photowebmax at Jan 20, 2009, 04:35 PM

Sometimes absolute positioning can get tricky with the occasional browser weirdness but when used well its very cool.

Check out this page for a wonderful example: http://csszengarden.com/?cssfile=/210/210.css&page=0

Max

And it almost works.

Watch the right-hand fish halfway down as you shrink the page horizontally.

I see what you mean. But you really have to crunch the page narrowly to trigger that. He is using that water shadow divider graphic several times with different elements within the container div. This has a higher z-index than the fish on the right side which triggers the fish meets divider image issue.

One of the challenges with the zengarden is that you have to use the exact html and CSS elements that is presented in the challenge. The whole thing might have passed its prime now but I thought this page was really well done as an illustration of how powerful CSS really is...

Max

Quote from: Photowebmax at Jan 20, 2009, 06:43 PM

I see what you mean. But you really have to crunch the page narrowly to trigger that. He is using that water shadow divider graphic several times with different elements within the container div. This has a higher z-index than the fish on the right side which triggers the fish meats divider image issue.

One of the challenges with the zengarden is that you have to use the exact html and CSS elements that is presented in the challenge. The whole thing might have passed its prime now but I thought this page was really well done as an illustration of how powerful CSS really is...

Max

Agreed, and I think it would be easily fixed with a little wider min_width or changing the fish’s position slightly.

I used to be really impressed with Zen Garden and I still agree that it does a nice job of showing the power of CSS. It did lose a little luster for me, though, when I saw how many of the pages were two-column fixed-width designs.

LoL

Cant you add those fish as a background image? then have the header and footer as 100% width and add a background image to those also?

I’ve not look at how you have done it, looks nice tho.