Complex CSS Layout Approach
Hi All,
[I posted this elsewhere a week ago but got no useful response, so I hope it's OK to try an edited version here]
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 CSS guides, 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 hope I'm not asking too much - pity if it's still a "suck it and see" process
Mike
disaster-master posted this at 07:53 — 5th May 2002.
She has: 2,154 posts
Joined: May 2001
Don't really have an answer for you but I will comment. I am learning/reading/sleeping/breathing CSS now too. I think it is awesome what you can do with it. The layers have been the hardest part for me as well.
I have been hanging around Projectseven.com quiet a bit and have picked up a lot on layouts (and their cross browser/degradable dhtml menus
). Also, Glish.com's layouts and Webnouveau are good for ideas on how others are doing the layouts.
As for the older browsers, there is no need to totally isolate them. When you use css, everything will still be accessible to them. It just won't look purty.
Looking at your site, it looks like it would be fairly easy to update and I think it would be a good idea for you to go css. Seems to be where everyone is headed.
I am sure someone will poke their head in this thread and offer you some great advise.
*Yells at Suzanne*;)
Mike Feury posted this at 18:38 — 5th May 2002.
They have: 48 posts
Joined: May 2002
Thanks Sonia
I haven't quite got to the sleeping/breathing stage yet - although I did have a dream about a layer floating off the screen, must check that Float property again...
I'm familiar with PVII & Glish, but Nouveau is new - as it should be I guess
Nice set of links there, and a promising forum.
I agree, CSS should have big benefits for our site - it's just a matter of getting over the initial "which combos to try" positioning puzzle. All in good time
Mike
Mike Feury posted this at 04:50 — 9th May 2002.
They have: 48 posts
Joined: May 2002
Hey Sonia, just spotted your sig
Would a reasonable compromise be to take the path less travelled by?
Anyway, I got a reply elsewhere to my questions which in a nutshell said:
- There's no problem nesting s 3-4 levels deep;
- There's no "gotcha" to mixing Absolute & Relative s.
So now the great experiment can proceed!
Mike
disaster-master posted this at 04:59 — 9th May 2002.
She has: 2,154 posts
Joined: May 2001
You betcha!!!
I can't believe no one else has commented on this thread. They must be sleeping.
Or could they be taking the well traveled path.
Do you have a URL to your great experiment that we can look at?
Suzanne posted this at 05:00 — 9th May 2002.
She has: 5,507 posts
Joined: Feb 2000
ha, don't rely on me for positioning help. I work commercially most of the time and haven't had the time to experiment with all CSS layouts. Because of the nature of my clientele, I can't push it to all CSS layouts for those sites.
I will, someday, ha ha, have the time to put in, then I'll rely on you!
Mike Feury posted this at 06:20 — 9th May 2002.
They have: 48 posts
Joined: May 2002
Hey Sonia, isn't it grand how
Suzanne 
can get paid for making slower backward-looking inflexible sites? Meanwhile we're beating with machetes thru the thickets of progress, and checking out those less-travelled paths. Not to mention slaving over a hot keyboard!
Still, I'm happy - I couldn't sleep at night doing it the other way - shudder.
Not for the experiment itself - but the subject is the home page in my sig
[ :scatter:ing down a little-known path to avoid the :csaw: ]
Mike
disaster-master posted this at 06:55 — 9th May 2002.
She has: 2,154 posts
Joined: May 2001
OUCH!! I think you may have to go out back to the shed for that one. LOL
I also think that Suzanne could blow you and I both out of the water if she wanted to waste her time on that one.
But, there is nothing wrong with experimenting with CSS positioning and if you are good enough, applying it in full and making it work.
Suzanne posted this at 19:37 — 9th May 2002.
She has: 5,507 posts
Joined: Feb 2000
heh, heh...
Here's my big secret -- some sites I have inherited and the design requires tables, and that's that. Doesn't mean the site isn't compliant, or even not forwards compatible, though. I use templates predominantly to hold the design. For most sites, to move to CSS positioning in the future would require editing three files -- the header, the footer and the css.
Mike Feury posted this at 20:20 — 9th May 2002.
They have: 48 posts
Joined: May 2002
Having read many of her posts here, I have no doubt whatsoever about that! I'm surprised I'm still alive today - maybe it's that big white flag I hung out last night?
Mike
Suzanne posted this at 23:06 — 9th May 2002.
She has: 5,507 posts
Joined: Feb 2000
Hey! I'm grumpy sometimes, but not mean.
Although... I have little patience for trolls, spammers and people who don't at least make a little bit of an effort to figure things out on their own, specifically the ones who write "send me the finished code/image/explanation to me directly, for free, so I am the only one who benefits from your work even though this is a community", or, well, words to that effect...
Really. It's true. No white flags needed, just honesty, and respect for the others in the community.
Suzanne
P.S. Using tables for design doesn't necessarily mean the site is slower, nor inflexible. There is a happy medium, a land where tables aren't nested 6 levels deep and micromanaged to specs of 1px variance. As always, it depends. On the audience, the content, and the goals of the site.
blockchords posted this at 21:16 — 10th May 2002.
They have: 7 posts
Joined: Apr 2002
Dis-Master,
Thanks a whole bunch for the links. Very helpful.
blockchords
disaster-master posted this at 21:34 — 10th May 2002.
She has: 2,154 posts
Joined: May 2001
You are most welcome.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.