SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    960 Grid System positioning

    Hi All - I am in the process of designing my website in the hopes that I can learn how to do this effectively. I wanted to start my first site on the 960 grid system because it seems like a great way to start when learning CSS.

    I'm hoping to get someones opinion on setting the boundary of my grid system. Right now I have a nav bar that wraps around my website container along with another ribbon wrap at the bottom. And the ribbons are throwing me off.

    Photoshop.jpg

    Photoshop2.jpg

    *I know this photo is on the right side and that my grid starts from the left, but pretend it was on the left.

    My question is, where should I start my grid system? Does it start to include the ribbon or does it start at the container? I've included some photos of what I am currently doing by including the ribbon in the grid. Is this right or should I start the first grid with the container?

    Thanks for the help guys!

    -Dan

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi Dan. Welcome to the forums.

    I'm not familiar with how grid systems work, because I avoid them. They introduce complexity that I don't need, as I find it easier and more satisfying to code a page from scratch in the most appropriate way for that page. So is your question just about how to use the grid system, or about how to create that ribbon effect, or both? They are two separate issues, really.

  3. #3
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph. I've got the ribbon down, its where to start the grid. Without the ribbon, I would start the grid right at the edge of the main container of the website. But that ribbon extends the width of the site by a few pixels and I don't know where to lay the grid down. I hear that you have to be pretty accurate with this otherwise your math will be all off.

    Thanks for any light you could shed!

    -Dan

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You could actually set the ribbon to display: absolute and remove it from the grid altogether—which is quite reasonable, give that it's for presentation only.

  5. #5
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice idea Ralph. That would fix my ribbon issue. I also had someone point out that the 960 grid system has 10px gutters on either side and also in between so that might also actually help me house the ribbons that I have. Either way this is good info for me to help design my site.

    Cheers!

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Great. Let us know how you go.


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
  •