Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unexplained horizontal spacing

    Can someone help me figure out why there is a horizontal space above and below the navigation and the nav background image is pushed down below the bottom of the nav element (see attached image)?

    Code:
    <!DOCTYPE html>
    <html>
    
       <head>
       <!--
          
          People's Brewing Company Home Page
          Author: Aaron Atkinson	
          Date: September 06, 2013  
    
          Filename: home.htm
          Supporting files: 
       -->
          <meta charset="UTF-8" />
          <title>People's Brewing Company</title>
          <script src="modernizr-1.5.js"></script>
          <link href="styles.css" rel="stylesheet" type="text/css" />
    	  <link href='http://fonts.googleapis.com/css?family=Maiden+Orange' rel='stylesheet' type='text/css'>
       </head>
    
       <body>
       
    	   <div id="wrapper"> 
    
    		  <header>
    			 <img src="final_header.png" alt="People's Brewing Company" usemap="#logomap" />
    			 <map name="logomap">		 
    				<area shape="circle" coords="518, 196, 141" href="index.htm" alt="Home Page" />
    			 </map>
    		  </header>
    		  
    			<div id="container">
    			
    			  <nav>
    				<ul>
    					<li>Home</li>
    					<li>About</li>
    					<li>Contact</li>
    				</ul>
    			  </nav>
    
    			  <section>
    
    				 <div id="slider"></div>
    				 <div id="content">
    					 <div id="left_content"></div>
    					 <div id="right_content"></div>
    				 </div>
    
    			  </section>			  
    
    			  <footer>
    				 
    			  </footer>
    			</div>
    		</div>
       </body>
    
    </html>


    Code:
    body{
    	margin:0;
    }
    
    header {
    	margin:0;
    }
    
    #wrapper{
    	width: 1040px;
    	margin:auto;
    	/*padding-top:5px;*/
    }
    
    #container{
    	width:960px;
    	margin:auto;
    }
    
    #slider {
    	width:100%;
    	height:300px;
    	background-color:#ececec;
    }
    
    #content {
    	width:100%;
    }
    
    #left_content{
    	width:66%;
    	float:left;
    	background-color:blue;
    	height:150px;
    }
    
    #right_content{
    	width:34%;
    	float:right;
    	background-color:red;
    	height:150px;
    }
    
    nav {
    	background:url('menu_bg.png');
    	background-repeat:repeat-x;
    	/*height:100%;*/
    }
    
    footer {
    	clear:both;
    	background:url('menu_bg.png');
    	background-repeat:repeat-x;
    	height:50px;
    }
    
    nav ul li {
    	font-family: 'Maiden Orange';
    	color:yellow;
    	text-decoration:none;
    	font-size:24px;
    	display: inline-block; 
    	/*vertical-align:middle;*/
    	padding-left:20px;
    	padding-right:20px;	
    }
    Attached Thumbnails Attached Thumbnails Unexplained horizontal spacing-cfimage.jpg  

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    You need to add a height to the header and to the nav. I don't have your images so can't tell you what that should be.
    Evolution - The non-random survival of random variants.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •