General CSS Layout Approach

[Mike Feury]

Hi All,

Man, CSS sure is a learning experience I've read a lot over the past few months, including all the sites I've seen referenced in your posts, and messed around with examples etc. I'm pretty much sold on the concept and benefits of CSS.

I'm fine with the Styling function - just need to polish it with practice. What gets me is Positioning. I 'get' all the examples I've seen, but am lost when trying to apply Positioning to a more complex layout.

As my first 'real' project, I'm trying to redesign our home page [in my sig] using positioning - it's currently in tables. All I'm concerned with is the section between the menu bar and "The Summerland" - this is the portion which undergoes a large monthly update. As such, I need an approach which is flexible for content & layout change.

My current approach

My initial approach is to use a series of 'container' boxes [div] to 'map' the area. Top level is 2 boxes, 1 for the left-hand section [currently has 2 books under each other], and 1 for all the right-hand section.

Second level is container boxes for each set of related content - eg book image with its brief caption, few paragraphs re current 'featured' promo. Example: "The Golden King" [top left] image, caption and blurb are all in 1 container box.

Third level is a box for each piece of content. So "The Golden King" image is in a div, the caption is in another div, and the blurb is in a third div.

I have a fourth level on the right side - I made a box around the 3 books across the top. Hope I've made sense so far

Thinking behind it

I figure the 2 top-level boxes will allow me to easily accomodate monthly changes. They're currently 25% & 75% wide, which should be simple to change as the number of displayed books changes month to month.

The reason for the second-level boxes [call them "book boxes"] is that there will be a ready-made way in which to plug in next month's books. I'm also hoping that the book boxes can be copied straight into other site pages, eg the genre sections.

Re the lowest-level 'content boxes', I figure they're necessary so I can apply classes to them to make display easy and consistent, plus should provide greater "tweakability" control on an ad hoc individual level.

The extra box around the 3 books on the right seems necessary to me to provide good alignment and spacing control there.

Is it a sound approach?

I've done some DTP work in a previous century, which I guess is why this 'map & box' approach seems natural to me. But web pages aren't print, so maybe I should be thinking outside the box?

I'm not too concerned about older browsers [v4 & earlier] - I won't sacrifice an elegant solution just to support them. I suppose a simple concept which is easy to change and update is what I'm after.

I'd really appreciate some guidance from you folks - I've already picked up a lot reading your last months' worth of posts. Thank you all

[isotope235]

I'm getting a 404 error on your link Mike.

[Mike Feury]

Originally posted by isotope235
I'm getting a 404 error on your link Mike.

Hmm... works for me now, and earlier today. I've had some access problems recently though, so there may be some intermittent problem - I'd put it down to my own problem, as RoadRunner has been glitchy past few days. Good time to post, huh?

[isotope235]

Yeah, good timing .

I've tried from work & home several times with no luck.

Bummer.

[Mike Feury]

*bump*

OK folks, my site should now be accessible It was a DNS problem, should be well propagated by now.

[iTec]

one site i have found to be really good is http://www.thenoodleincident.com/tut...son/boxes.html it has a few different css layouts that you can use.

[Mike Feury]

Thanks Nicholas, I've already studied that page, plus Glish & many more. It's great stuff as far as it goes.

Maybe I got too complicated in my original post. Let me try 2 questions:

1. Is there any booby-trap built into using nested boxes for 3-4 levels?
[I'm aware of IE box measurement problems]

2. Can you generally mix Absolute and Relative boxes as you see fit, or is there some 'gotcha' waiting around that corner?

I'm hoping to avoid any known blind alleys, or worse still arriving at wrong conclusions. Thanks again

[iTec]

Originally posted by Mike Feury
1. Is there any booby-trap built into using nested boxes for 3-4 levels?
[I'm aware of IE box measurement problems]

2. Can you generally mix Absolute and Relative boxes as you see fit, or is there some 'gotcha' waiting around that corner?

1) Not if your using divs with css, Ive noticed it a couple of times when i was playing with an old layout that browsers dont seem to care how deep your divs go. i had the whole page inside 2 divs, and then had plenty of nested ones below that and the page still loaded alot quicker then if it were a table.

2) Yes. no gotcha that ive seen. If you take a look at my site i think i have the header as relative and then the main content areas are absolute and then within them i have relatives.

[Mike Feury]

Excellent Nicholas, thank you very much

I'll soldier on from here then.