css - Add extra margin to the 960.gs framework without breaking it's purpose -
i have design want accomplish , found 2 ways achieve using 960gs framework. although don't know 1 better , there's not information best practices in css there in, say, php. applied learned vanilla html/css , php oo find out none of them "good".
this [the important part of] design:
the 2 ways of obtaining based on 960gs framework , disadvantages find are:
modify css add margins text. then, inside div, apply pure 960gs system 12 columns. works, makes whole width wider optimal (1000 px, not 1024x768, 9% of browsers).
use 24 column model , leave first , last column empty, become margin. problem i'm using structure elements purely visuals, plus having write them in every single part of every page (not dry).
example second:
<div class='grid_22 prefix_1'> <p> theory of relativity transformed theoretical <a href="http://en.wikipedia.org/wiki/physics" title="physics">physics</a> , <a href="http://en.wikipedia.org/wiki/astronomy" title="astronomy">astronomy</a> during 20th century. when first published, relativity superseded 200-year-old <a href="http://en.wikipedia.org/wiki/classical_mechanics" title="classical mechanics">theory of mechanics</a> created <a href="http://en.wikipedia.org/wiki/isaac_newton" title="isaac newton">isaac newton</a>. </p> </div> what want apply 960gs framework in page personalized margins.
so, how avoid these problems said achieving want?
ps, due bug in 960gs framework, it's not easy find
your column 960px wide , seems fine. both box-shadow , left/right width of heading outside column can made without declaring different width won't create horizontal scrollbar.
working example: http://jsfiddle.net/q8brv/ using absolute positioning left , right part of decoration of heading (compatibility ie8+. ie7- can live without box-shadow , decorations imo ;) )
the upper limit resolution of 1024px 1004px, though it's maximized browser window.
Comments
Post a Comment