Jump to content

960.gs Prefix Suffix Background Color

Caitlin-havener

By Caitlin-havener
in CSS

Recommended Posts

Caitlin-havener Member

Caitlin-havener

Posted
Posted

Can anyone see why there is a stupid gap above the navigation and subnavigation: http://dm.ucf.edu/~ca081919/dig3716c/assignment3/main.html ? I had to make the class grid_12 prefix_1 suffix_1 a wrapper because applying a background color to it colored the padded areas on both sides, which I don't want. I'm only using the ten columns in the middle of the 12 column container. 

<!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" /><title>Main - Caitlin Havener</title><link rel="stylesheet" type="text/css" href="css/reset.css" /><link rel="stylesheet" type="text/css" href="css/960.css" /><link rel="stylesheet" type="text/css" href="css/text.css" /><link rel="stylesheet" type="text/css" href="css/styles.css" /><script type="text/javascript" src="a3.js"></script></head><body><div class="container_12">	 <div class="grid_12 prefix_1 suffix_1">		 <div id="topGutter">		    </div>	    </div>	   	    <div class="grid_12 prefix_1 suffix_1">		    <div id="navContainer">				    <img src="img/hulupluslogo.gif" alt="" id="logoImg"/>				    <ul id="navList">					    <a href="#"><li>Main</li></a>					    <a href="#"><li>TV</li></a>					    <a href="#"><li>Movies</li></a>					    <a href="#"><li>Queue</li></a>				    </ul>			    <div id="navGutter"></div>		    </div>	    </div>	   	    <div class="grid_12 prefix_1 suffix_1" id="bannerContainer">		 <img src="img/banner.jpg" style="width:100%" alt="" />	    </div>	   	    <div class="grid_12 prefix_1 suffix_1">		    <div id="subNavContainer">			    <ul id="subNavList">				    <a href="#"><li>Featured</li></a>				    <a href="#"><li>Most Popular</li></a>				    <a href="#"><li>Recently Added</li></a>			    </ul>   		    </div>   	    </div>	   	    <div class="grid_5 prefix_1" id="leftMenu">		 <div class="showContainer">			 <img src="img/1.jpg" alt="showImg" class="showImg" />			    <h1>The Tonight Show with Jay Leno</h1>			    <h2>Mon, Nov 21, 2011</h2>			    <h2>Season 20 : Ep. 4150 (42:25)</h2>		    </div>		    <div class="showContainer">			 <img src="img/2.jpg" alt="showImg" class="showImg" />			    <h1>Modern Family</h1>			    <h2>Punkin Chunkin</h2>			    <h2>Season 3 : Ep. 9 (21:30)</h2>		    </div>		    <div class="showContainer">			 <img src="img/3.jpg" alt="showImg" class="showImg" />			    <h1>Up All Night</h1>			    <h2>Week Off</h2>			    <h2>Season 1 : Ep. 10 (21:50)</h2>		    </div>		    <div class="showContainer">			 <img src="img/4.jpg" alt="showImg" class="showImg" />			    <h1>Fringe</h1>			    <h2>Wallflower</h2>			    <h2>Season 4 : Ep. 7 (43:35)</h2>		    </div>	    </div>	    <div class="grid_5 suffix_1" id="rightMenu">		 <div class="showContainer">			 <img src="img/5.jpg" alt="showImg" class="showImg" />			    <h1>New Girl</h1>			    <h2>Thanksgiving</h2>			    <h2>Season 1 : Ep. 6 (21:43)</h2>		    </div>		    <div class="showContainer">			 <img src="img/6.jpg" alt="showImg" class="showImg" />			    <h1>Revenge</h1>			    <h2>Suspicion</h2>			    <h2>Season 1 : Ep. 9 (43:09)</h2>		    </div>		    <div class="showContainer">			 <img src="img/7.jpg" alt="showImg" class="showImg" />			    <h1>Saturday Night Live</h1>			    <h2>Jason Segel</h2>			    <h2>Season 37 : Ep. 7 (1:05:50)</h2>		    </div>		    <div class="showContainer">			 <img src="img/8.jpg" alt="showImg" class="showImg" />			    <h1>American Dad!</h1>			    <h2>The Worst Stan</h2>			    <h2>Season 7 : Ep. 4 (21:53)</h2>		    </div>	    </div>    </div></body></html>

CSS

@charset "utf-8";/* CSS Document */@font-face{  font-family: FuturaMD;  src: url('../fonts/futura-md-bt-medium-webfont.eot'),	   url('../fonts/futura-md-bt-medium-webfont.ttf'),	   url('../fonts/futura-md-bt-medium-webfont.svg'),	   url('../fonts/futura-md-bt-medium-webfont.woff');}h1{font-size:12px;font-family:Lucinda Grande, sans-serif;font-weight:bold;line-height:12px;}h2{font-size:10px;font-family:Lucinda Grande, sans-serif;line-height:0;}#topGutter{height:20px;background-color:black;margin:0;padding:0;}#navContainer{background-color:#525252;height:40px;margin:0;padding:0;}#logoImg{float:left;}#subNavContainer{background-color:#525252;height:40px;}#navList li, #subNavList li{display:inline;float:left;border:1px black solid;font-family:FuturaMD;font-size:15px;color:white;background-color:#696969;padding:0;margin:0;}#navList a, #subNavList a{text-decoration:none;}#navList{margin-left:auto;margin-right:auto;text-align:center;}#navList li{width:85px;}#subNavList{margin-left:auto;margin-right:auto;text-align:center;width:330px;}.showContainer img{float:left;margin-left:20px;margin-right:10px;width:200px;}.showContainer{height:140px;}#rightMenu, #leftMenu{margin-top:20px;}#rightMenuQueue{margin-top:20px ;margin-left:0;padding-left:0;}#leftMenuQueue{border-right:1px black solid;margin-top:20px;margin-right:0;padding-right:0;}.topOfMenu{background-color:#aaaaaa;height:40px;}.topOfMenu h2{font-size:16px;line-height:35px;margin-left:10px;}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...