开发者

960.gs background colours, or margins?

开发者 https://www.devze.com 2023-03-28 07:26 出处:网络
I decided to try and use the 960 grid system on a recent client project to speed up development, and its structure is working perfectly, and I love it!

I decided to try and use the 960 grid system on a recent client project to speed up development, and its structure is working perfectly, and I love it!

The problem I'm having is the break in the div background colour (I am not sure to scal开发者_StackOverflow社区e sidebar to 100% height), and the background transparently shows the 10px margins (sidebar and footer). This is a live version of the website so far, it's probably a lot easier to see the problem - it's quite obvious: http://mediasmoke.com/clients/packtv/.

I have the structure I want, the divs are in the right place. Is there a technique to fill in those blanks and keep the website flexible in height for more or less content?

I'm drawing a blank, and I tried using a second container, but that didn't work properly...


Yes, as aSeptik said wrap .content and .sidebar in a div and apply the background to that. .alpha and .omega don't fix the problem. It looks like you will need to do the same on the footer columns too.


OK, I figured it out. The reason the second wrapper div didn't expand with the 960gs was because it had to have a float:left.

Now at 960 pixels wide this gave me an extra 10 pixels colour padding on either side. If I trimmed this or made the wrapper smaller, it breaks the 960gs, making it useless. After messing about with a simple solution, I found I was to create a background image that was 960 pixels wide with transparency - 10 pixels on either end, so it gives the impression of 940 pixels!

Yay!

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号