{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 时光不老，我们不散 的问题《Questions regarding CSS design using 960 grid syst》','https://www.manongdao.com/q-539296.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm using 960 grid system to create a layout prototype.
I would like to set the color between Navigation and Content to #000 (solid black), but I can't figure out how. What I currently get is:
Using this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/custom.css" />
<title>The system</title>
</head>
<body>
<div class="container_16" id="base">
<div class="grid_16" id="header">Graphical banner</div>
<div class="grid_16" id="logoutrow">Logout row</div>
<div class="grid_3" id="navigation">Navigation</div>
<div class="grid_13" id="content">Content</div>
<div class="grid_16" id="footer">Footer</div>
</div>
</body>
</html>
My two questions:
- How do I specify a color for all "in between" space like the one between Navigation and Content?
- My layout only looks like I want if if I don't use clear like in this tutorial. Why?
For the in between color I've tried putting this in custom.css without success:
div#base {
background-color: #000;
}
If you are unfamiliar with 960 grid system but still would like to try and help the whole 960.css can be found here.
Both questions solved:
- My second question is solved below in a post by Jan Aagaard. I didn't include the nbsp XML entity and had an empty div. It didn't work, at least not in Firefox 3.x.
My current code looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/custom.css" />
<title>The system</title>
</head>
<body>
<div class="container_16" id="base">
<div class="grid_16" id="header">Graphical banner</div>
<div class="clear"> </div>
<div class="grid_16" id="logoutrow">Logout row</div>
<div class="clear"> </div>
<div class="grid_16" id="navigation-content>
<div class="grid_3 alpha" id="navigation">Navigation</div>
<div class="grid_13 omega" id="content">Content</div>
</div>
<div class="clear"> </div>
<div class="grid_16" id="footer">Footer</div>
<div class="clear"> </div>
</div>
</body>
</html>
The 960 grid system says grid child nodes should follow certain rules. The first child node should have the alpha class and the last one the omega class. Which is what I'm doing above. It's the difference from the answer GateKiller gave below, which apart from that provided a solution.
Do this .
The best way to do this would be to wrap #navigation and #contents inside a container div like so:
You could then set the background as so:
You only really need the clearing div if the you do not use the full 16 grids or if you using any float rules which need clearning. The author has the following to say on the clear:
They are all floated so I'm guessing the
#basecontainer isn't expanding to contain them. Try addingoverflow: hidden;to your#basediv to make it contain floated child elements - thus allowing you to see the background colour you have applied to it.Answers to second question:
<div class="clear"> </div>adds an element with the following styles to your page. It's basically an empty element that doesn't allow any elements to it's left or right, effectivly forcing content before and after it, to be on separate lines. It might not be needed for all browsers.Instead of the clear element you can use the
clearfixclass. Add it to your contianer element like this:This way you can avoid the empty elements, but I think this solution less compatible with different browsers.