SitePoint Sponsor |
|
User Tag List
Results 1 to 9 of 9
Thread: General CSS Layout Approach
-
Apr 29, 2002, 15:06 #1
- Join Date
- Mar 2002
- Location
- Indianapolis
- Posts
- 45
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
General CSS Layout Approach
Hi All,
Man, CSS sure is a learning experienceI'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
-
Apr 29, 2002, 16:34 #2
- Join Date
- May 2001
- Location
- View Ridge
- Posts
- 692
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'm getting a 404 error on your link Mike.
-
Apr 29, 2002, 17:04 #3
- Join Date
- Mar 2002
- Location
- Indianapolis
- Posts
- 45
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally posted by isotope235
I'm getting a 404 error on your link Mike.
-
Apr 30, 2002, 12:44 #4
- Join Date
- May 2001
- Location
- View Ridge
- Posts
- 692
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Yeah, good timing
.
I've tried from work & home several times with no luck.
Bummer.
-
May 2, 2002, 15:31 #5
- Join Date
- Mar 2002
- Location
- Indianapolis
- Posts
- 45
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
*bump*
OK folks, my site should now be accessibleIt was a DNS problem, should be well propagated by now.
-
May 3, 2002, 00:29 #6
- Join Date
- May 2001
- Location
- Sydney, Australia
- Posts
- 2,243
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
May 5, 2002, 17:52 #7
- Join Date
- Mar 2002
- Location
- Indianapolis
- Posts
- 45
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
May 7, 2002, 23:07 #8
- Join Date
- May 2001
- Location
- Sydney, Australia
- Posts
- 2,243
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
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.
-
May 8, 2002, 15:43 #9
- Join Date
- Mar 2002
- Location
- Indianapolis
- Posts
- 45
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Excellent Nicholas, thank you very much
I'll soldier on from here then.
Bookmarks