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.
*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?
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.
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.
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.
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.
