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
    Apr 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    [SOLVED] Slight Issue with Vertical Nav Bar

    I'm sure I've just made a silly error with this, but I can't seem to work it out.
    My list items in my nav are not starting at the edge of my div, it's almost like there is a margin on the left.

    Code:
    html:
    
    <!DOCTYPE html>			
    <html>
    <head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/totalbullclothing.css" />
    <link rel="shortcut icon" type="image/png" href="images/favicon.png" />
    <title>Total Bull Clothing Co.</title>
    </head>
    <body>
    	<div class="container">
    	<div id="topline"> blah blah </div>
    		<div class="leftbox">
    		<img src="images/totalbulllogo.svg" alt="Total Bull Clothing Company Logo" /> 
    		</div>
    		<div id="banner">
    		<img src="images/totalbullbanner2.jpg" alt="Total Bull Clothing Company Logo" /> 
    		</div>
    		<div id="navmenu">
    		<ul>
    		<li class="active"><a href="#">HOME</a></li>
    		<li><a href="#">ABOUT</a></li>
    		<li><a href="#">STORE</a></li>
    		<li><a href="#">SALE ITEMS</a></li>
    		<li><a href="#">CONTACT</a></li>
    		</ul>
    		</div>
    		<div id="mainContent"> FEATURED ITEMS</div>
    
    </div>
    
    </body>
    </html>
    
    css:
    
    html, body {	
    			margin:0;
    			padding:0;
    			font-family: Calibri, Arial, sans-serif;
    }
    
    @font-face {
    	font-family:'Neon 80s';
    	src:url('../fonts/neon.ttf'),
    		url('../fonts/neon.eot');
    		}
    
    .container {
    			clear: both;
    			margin: 0 auto;
    			padding: 0;
    			width: 58%;
    			background-color: #FFFFFF;}
    			
    #topline {  float:left;
    			text-align:right;
    			padding: 0;
    			width: 100%;
    			height: 5%;
    			background-color: #FFF;
    			margin-top:2%;
    			margin-bottom:2%;}
    			
    .leftbox {
    			float:left;
    			padding: 0;
    			width: 30%;
    			background-color: #5D2F92;}
    .leftbox img {width: 96%;
    	margin-left: 3%
    	margin-right:1%;}
    	
    #banner img {width: 100%;}
    
    	
    #banner {float:left;
    		 width:68%;
    		 margin-left:2%;}
    		 
    #navmenu {
    			float:left;
    			padding: 0;
    			width: 30%;
    			background-color: #5D2F92;
    			height: 100%;
    			margin-top:0.5%;
    			font-family:'Neon 80s';
    			font-size:18pt;
    			text-align:left;
    			}
    			
    #navmenu li {
    			list-style:none;
    			margin: 0;
    			}
    			
    #navmenu li a {text-decoration:none;
    			color:#FFFFFF;
    			margin: 0;
    			display:block;
    			padding:20px 0px;}	
    #navmenu li.active a {background-color:#C49A6C;}		
    			
    #mainContent {float:left;
    			  width:68%;
    			  background-color:red;
    			  text-align:center;
    			  margin-top:0.5%;
    			   margin-left:2%;}
    Last edited by simec23; 09-19-2013 at 05:32 AM. Reason: solved

  • #2
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Never mind. Solved it, so simple! just need to reset the broswer default for <ul> padding and margin to 0.


  •  

    Posting Permissions

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