#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    5
    Rep Power
    0

    Help Constraining CSS Navbar Size


    Firstly, hello!

    I'm having a little trouble with the height of a navbar. I'm a beginner with CSS, so it could be that there's something incredibly simple I'm overlooking, or it could that I farked up somewhere and I'll need to redo the whole dang thing.

    Here's the relevant HTML of the site I'm working on:

    Code:
    <div id="navbar">
            	<ul>
                	<li><a href="#">Assignment 03</a></li>
                    <li><a href="#">Midterm</a></li>
                    <li><a href="#">Final Project</a></li>
                    <li><a href="#">Other Courses</a>
                    	<ul>
                        	<li class="firstline"><a href="#">Soundscapes for Multimedia</a></li>
                        	<li><a href="#">Multimedia and Design</a></li>
                            <li><a href="#">Audio and Video</a></li>
                            <li><a href="#">Design and Authoring</a></li>
                            <li class="lastline"><a href="#">Graphics and Imaging</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
    And here's the CSS:

    Code:
    #navbar {
    	border-bottom: 2px solid #000;
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	text-align: center;
    	background-color: #666;
    }
    
    #navbar ul {
    	background: #666; 
    	padding: 0 20px; 
    	list-style: none;
    	position: relative;
    	display: inline-table;
    }
    
    #navbar ul ul {
    	display: none;
    }
    
    #navbar ul li:hover > ul {
    	display: block;
    }
    	
    #navbar ul li {
    	float: left;
    }
    
    #navbar ul li:hover {
    	background: #333;
    }
    
    #navbar ul li:hover a {
    	color: #fff;
    }
    	
    #navbar ul li a {
    	display: block;
    	padding: 15px 30px;
    	color: #000;
    	text-decoration: none;
    	font-size: 22px;
    }
    	
    #navbar ul ul {
    	background: #666;
    	padding: 0;
    	position: absolute;
    	top: 100%;
    }
    
    #navbar ul ul li {
    	float: none; 
    	border-top: 1px solid #000;
    	border-bottom: 1px solid #000;
    	border-left: 2px solid #000;
    	border-right: 2px solid #000;
    	position: relative;
    }
    
    #navbar .lastline {
    	float: none; 
    	border-top: 1px solid #000;
    	border-bottom: 2px solid #000;
    	border-left: 2px solid #000;
    	border-right: 2px solid #000;
    	position: relative;
    }
    
    #navbar .firstline {
    	float: none; 
    	border-top: 2px solid #000;
    	border-bottom: 1px solid #000;
    	border-left: 2px solid #000;
    	border-right: 2px solid #000;
    	position: relative;
    }
    
    #navbar ul ul li a {
    	color: #fff;
    }	
    
    #navbar ul ul li a:hover {
    	background: #333;
    }
    Take note of the navigation bar when you mouse over it - you get a block overlay, but it doesn't extend all the way to the borders on the top and bottom.

    I want it to look more like this navigation bar.

    HTML:

    Code:
    <div id="navbar-container">
        		<ul id="navbar">
                	        <li><a href="#">MTM4006 Home</a></li>
        			<li><a href="#">Assg03 Home</a></li>
            		<li><a href="#">The Bad</a></li>
            		<li><a href="#">The Good</a></li>
        		</ul>
    </div>
    CSS:

    Code:
    #navbar {
    	border-top: 2px solid #000;
    	border-bottom: 2px solid #000;
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	text-align: center;
    	background-color: #4D2D24;
    }
    
    #navbar li {
    	display: inline;
    }
    
    #navbar a {
    	display: inline-block;
    	padding: 15px 30px;
    	text-decoration: none;
    	color: #FBEA45;
    	font-size: 22px;
    }
    
    #navbar a:hover {
    	background-color: #300;
    }
    On the second page, the mouseover 'block' extends all the way to the border. Whereas on the first page, there's some weird padding around the box increasing the size of the navbar. I've checked the CSS - all my padding and margins are set to 0.

    Could anyone give me a hand with this? As I'm sure my terrible coding indicates, I'm a relative newcomer to this. Any assistance would be appreciated.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    309
    Rep Power
    162
    Welcome to DevShed!

    The problem you're having is caused by the default margins on <ul> so all you need to do is add margin:0; to #navbar ul in your stylesheet, so you change:

    Code:
    #navbar ul {
    	background: #666; 
    	padding: 0 20px; 
    	list-style: none;
    	position: relative;
    	display: inline-table;
    }
    to

    Code:
    #navbar ul {
    	background: #666; 
    	padding: 0 20px; 
    	list-style: none;
    	position: relative;
    	display: inline-table;
            margin:0;
    }

    Comments on this post

    • Kravvitz agrees
    Quality European Web Hosting - LDHosting.com
    High Quality, Low Cost Web Hosting Services
    www.ldhosting.com
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    5
    Rep Power
    0
    Worked just like a charm, thank you!

IMN logo majestic logo threadwatch logo seochat tools logo