SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    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 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

  2. #2
    .net install meltdown
    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.

  3. #3
    SitePoint Enthusiast
    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.
    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?

  4. #4
    .net install meltdown
    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Indianapolis
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *bump*

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

  6. #6
    SitePoint Wizard iTec's Avatar
    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.

  7. #7
    SitePoint Enthusiast
    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

  8. #8
    SitePoint Wizard iTec's Avatar
    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?
    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.

  9. #9
    SitePoint Enthusiast
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •