Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS Button Coding and height issues

Discussion in 'Website Coding & Programming Forum:' started by Mattdbryce, Oct 6, 2013.

  1. Mattdbryce

    Mattdbryce Member

    Hi there,

    I am having trouble with CSS buttons, i'm nearly there, i just can't figure out how to remove the tiny gap to the right of each one:

    Screen-Shot-2013-10-06-at-17.08.00.jpg

    And also i've tried using "height:100%;" and to make it so the containing div for these three divs is white to the bottom of the page, but this doesnt work:

    Screen-Shot-2013-10-06-at-17.10.34.jpg

    Does anyone have a clue how to fix these? My CSS and HTML is below.

    Thanks!

    Matt

    HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage-temp.dwt" codeOutsideHTMLIsLocked="false" -->
    
    <head>
    		
    		<meta charset="UTF-8">
    
    		<title>Good Taste Delicatessen - Specialising in High Quality Local Produce, Wines, Beers, Ciders, Cheese, Meat</title>
    		
    		<!--css files-->
    		<link rel="stylesheet" href="css/reset.css">
    		<link rel="stylesheet" href="css/text.css">
    		<link rel="stylesheet" href="css/960_24_col.css">
    		<link rel="stylesheet" href="css/style.css">
    		<link rel="stylesheet" href="css/font-awesome.min.css">
    		<!--End css files-->
    
    		<!--JS-->
    		<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    		<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    		<!--END-JS-->
    
    		<!--favicon-->
    		<link rel="shortcut icon" href="favicon.png">
    		<!--End favicon-->
    		
    </head>
    	
    
    <body>
    	<div class="container" id="shadow">
    	  
    	  <!--HEADER-->
    		  <div class="header">
    		    <a href="index.html"><img src="img/newheader.png" width="960" height="232" alt="Good Taste Delicatessen" /></a>
    		  </div>
    	  <!--END HEADER-->
    	  
    	  <!--NAVIGATION-->
    		  <div class="nav1">
    		    
    		    <ul>
    			    <li><a href="index.html" class="button-1">About Us</a></li>
    			    <li><a href="suppliers.html" class="button-1">Our Suppliers</a></li>
    			    <li><a href="findus.html" class="button-1">Find Us</a></li>
    			    <li><a href="deliveries.html" class="button-1">Deliveries</a></li>
    			    <li><a href="contactus.html" class="button-1">Contact Us</a></li>
    		    </ul>
    		  </div>
    		  
    		  <div class="nav2">  
    		    <ul>
    				<li><a href="winesandspirits.html" class="button-1">Wine &amp; Spirits</a></li>
    				<li><a href="beersandciders.html" class="button-1">Beer &amp; Ciders</a></li>
    				<li><a href="otherdrinks.html" class="button-1">Other Drinks</a></li>
    				<li><a href="cheese.html" class="button-1">Cheese</a></li>
    				<li><a href="meatsandpate.html" class="button-1">Meat &amp; Pate</a></li>
    				<li><a href="vegetables.html" class="button-1">Vegetables</a></li>
    				<li><a href="drystores.html" class="button-1">Dry Stores</a></li>
    				<li><a href="honey.html" class="button-1">Honey &amp; Preserves</a></li>
    				<li><a href="oliveoilandvinegar.html" class="button-1">Olive Oil &amp; Vinegar</a></li>
    				<li><a href="sweetthings.html" class="button-1">Sweet Things</a></li>
    				<li><a href="hampers.html" class="button-1">Hampers</a></li>
    				<li><a href="accessories.html" class="button-1">Accessories</a></li>  
    		    </ul>
    		    
    		  </div>
    		  
    	   <!--NAVIGATION-->
    	   
    	  
    	   <!--TITLE-->
    		  <div class="title">
    		  	<img src="img/aboutusheader.jpg" alt="About Us" />
    		  </div>
    		  
    	   <!--TITLE-->
    	  
    	  <div class="content">
    	   
    	   <!--SIDEBAR 1-->
    		  <div class="sidebar1">
    		    	<h1>Opening Hours</h1>
    			    <p>
    				    <strong><br />Mon - </strong>9am - 3pm
    				    <strong><br />Tues - </strong>Closed
    				    <strong><br />Wed - </strong>9am - 3pm
    					<strong><br />Thurs - </strong>9am - 6pm
    				    <strong><br />Fri - </strong>9am - 6pm
    					<strong><br />Sat - </strong>9am - 6pm
    				    <strong><br />Sun - </strong>9am - 6pm
    			    </p>
    		      
    			    <hr>
    		      
    			    <h1>This Weeks Deals</h1>
    			     	<img src="img/thumbs/bluemoon.jpg" width="140" height="140" alt="Reisling Beer" />
    			     	<p><strong>Blue Moon Bottled Beer</strong> - available in Packs of 4 - £4.49 ( £1.29 each)</p>
    			     
    			    <hr>
    			    
    			     	<img src="img/thumbs/chocolate.jpg" width="140" height="140" alt="Reisling Beer" /></h4>
    			     	<p class="p"><strong>Local Made Organic Chocolate Bars</strong> - £1.39 - Buy one get one half price.</p>
    		  </div>
    	   <!--SIDEBAR 1-->
    	  
    	  
    	   <!--MAIN CONTENT-->
    		  <div class="main-content">
    			    <h1>Welcome to Good Taste!</h1>
    			    <p>Good Taste  is a family run business situated in Newington, Kent, we opened in November 2006. We sell a range of fine foods and drinks, using locally sourced products wherever possible.</p>
    			    <p>We specialise in cheese, cured meats, wine &amp; bottled beers. We also stock a wide range of fresh, seasonal and organic fruit and vegetables. We have organic eggs and milk, locally roasted coffees, artisan breads,  jams and chutneys, honey, mustards, spices, olive oils and general groceries.*    </p>
    			    <p>For us, quality is very important. Many of our suppliers only produce a single item but if we&rsquo;re passionate about it, we&rsquo;ll stock it. For a list of our suppliers, <a href="suppliers.html">click here</a>.    </p>
    			    <p>If you are entertaining then with our knowledge and understanding of our products we can surely help you choose the right products, whether its for a dinner party or a wedding.</p>
    			    <p>We offer tasting sessions every Wednesday and Thursday where you can learn a little about wine and cheese paring.    </p>
    			    <p><em>GoodTaste is a*member of*The Guild of Fine Food Retailers </em></p>
    		  </div>
    	   <!--END MAIN CONTENT-->
    	      
    	  
    	   <!--SIDEBAR 2-->  
    		  <div class="sidebar2">
    				<h1>Cheese and Wine Tastings</h1>
    				<p>This week's tastings will be on Wednesday and Friday evening from 6:30pm - 8:30pm.</p>
    				<p> So bring a friend and discover some interesting new flavours.</p>
    				<p>Entry is £10.</p>
    				<p><img src="img/dottedline.gif" width="140" height="10" alt="dottedline" /></p>
    				<h1>Latest Products In Store</h1>
    				<h4><img src="img/whiskey2.jpg" width="140" height="140" alt="Reisling Beer" /></h4>
    				<p><strong>Glenrothes*</strong><em>Select Reserve </em><strong>Single Malt Whisky </strong>- 70cl, 43% - <strong>£32.99</strong></p>
    				<p><img src="img/dottedline.gif" width="140" height="10" alt="dottedline" /></p>
    			    <h4><img src="img/spices.jpg" width="140" height="140" alt="Reisling Beer" /></h4>
    			    <p>We are now stocking a wide selecting of &quot;David's Tea&quot; <strong>Herbal Teas.</strong>    </p>
    		  </div>
    	   <!--END SIDEBAR 2-->  
    	
    	   </div>
    	
    	   <!--FOOTER-->          
    		  <div class="footer">
    		      <h4>© Good Taste Delicatessen 2012. <em>Website Design by <a href="http://www.mattdbryce.co.uk">Matthew Bryce</a></em></h4>
    		  </div>
    	   <!--END FOOTER-->  
    	
    	
    	</div>
    </body>
    
    
    </html>
    
    And my CSS

    Code:
    /***LAYOUT***/
    
    body {
    	margin: 0;
    	padding: 0;
    	color: #000;
    	background-repeat: repeat;
    	background-attachment: fixed;
    	background-position: center top;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 100%;
    	line-height: 1.4;
    	background-image: url(/img/tiled.jpg);
    }
    
    .container {
    	margin-left: auto;
    	margin-right: auto;
    	width:960px;
    	height:100%;
    	margin-top: 0px;
    }
    
    .header {
    	color: #000;
    	height: 232px;
    	background-repeat: no-repeat;
    	width: 960px;
    	background-color: #FFF;
    }
    
    .nav1 {
    	width: 960px;
    }
    
    .container {
    	width: 960px; 
    	padding: 0px;
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    	height: auto;
    	background-image: url(img/graphics/bg.png);
    	background-repeat: repeat-y;
    }
    
    .container, #shadow {
    	width: 960px;
    	margin-right: auto;
    	margin-left: auto;
    	background-image: url(img/shadow.png);
    }
    
    .content {
    	margin-top:20px;
    	margin-bottom: 20px;
    	background-color: #ffffff;
    	height: 100%;
    }
    
    .sidebar1 {
    	vertical-align: middle;
    	float: left;
    	width: 180px;
    	border-right-width: 1px;
    	border-right-style: dotted;
    	border-right-color: #628a65;
    	padding-top: 30px;
    	padding-bottom: 10px;
    	background-image: url(img/graphics/sidebar-bg.gif);
    	background-color: #FFF;
    	height: auto;
    	background-position: bottom;
    	background-repeat: repeat-y;
    }
    
    .main-content {
    	width: 574px;
    	float: left;
    	padding-top: 30px;
    	padding-right: 10px;
    	padding-bottom: 10px;
    	padding-left: 10px;
    	background-color: #FFFFFF;
    	height:100%;
    }
    
    .sidebar2 {
    	float: left;
    	width: 180px;
    	color: #000;
    	border-left-width: 1.5px;
    	border-left-style: dotted;
    	border-left-color: #628a65;
    	padding-top: 30px;
    	padding-bottom: 10px;
    	background-image: url(img/graphics/sidebar-bg.gif);
    	background-repeat: repeat-y;
    	background-color: #FFF;
    	height: auto;
    }
    
    .title {
    	height: 347px;
    	width: 960px;
    }
    
    
    .footer {
    	text-color: #FFF;
    	text-align: right;
    	position: relative;
    	clear: both;
    	height: 20px;
    	width: 960px;
    	padding-top: 10px;
    	padding-right: 0;
    	padding-bottom: 10px;
    	padding-left: 0;
    	border-top-width: 1.5px;
    	border-top-style: dotted;
    	background-color: #628a65;
    }
    
    /***END LAYOUT***/
    
    
    /***OTHER***/
    hr{
    	border: 0;
        height: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        margin-top:20px;
        margin-bottom: 20px;
    }
    
    .clearfix {
    	display: inline-block;
    }
    
    .button-1 {
         
        display: inline-block;
        box-sizing: border-box;
        height: 35px;
        width: 155px;
        background: #689169;
        text-align: center;
        text-decoration: none;
        padding-top:10px;
        font: Georgia, "Times New Roman", Times, serif;
    	font-style: italic;
    	
    }
    
    a.button-1:hover {
        background: #fff;
        color: #d5a22b;
    }
    
    li {
    	display: inline;
    }
    
    
    
    
    /***END OTHER***/
    
     

Share This Page