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 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts

    navigation menu css

    I am having a problem with my navigation. My navigation menu is 86px in height. My font size is only a 18px. The menu should be vertically aligned center and I want a border beside each li to be 86px high. It is currently only 41px high. How can i make it so the border will go the entire height without stretching my text? See below for my current css

    div css
    Code:
    div#navigation {
    background-color: #DB2727;
    width: 900px;
    height: 86px;
    }
    MY NAVIGATION CSS FOR UL LI LOOKS LIKE THIS:
    Code:
    ul{
    margin: 0;
    border: 0px;
    padding:18px 3px 3px 7px;
    }
    
    ul.primary li{
    display: inline;
    list-style-type: none;
    }
    
    ul.primary li a{
    list-style-type: none;
    margin-top: 10px;
    line-height:40px;
    font-size: 18px;
    color: #FFFFFF;
    border-right: 2px solid #EB3A30;
    padding:10px;
    text-decoration:none;
    }
    
    ul.primary li a:hover{
    background:#D21B21;
    }
    Thanks! -Justin Massey

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,739
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello jmassey09,
    I made a few changes so be sure to compare the entire CSS.
    Adjust your right border by changing the padding highlighted in red.
    Code:
     <!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>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 14px "Comic Sans MS";
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #container {
    	width: 900px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    }
    #navigation {
    	height: 86px;
    	background: #DB2727;
    }
    ul{
    	
    }
    ul.primary li{
    	display: inline;
    	list-style-type: none;
    }
    ul.primary li a{
    	list-style-type: none;
    	line-height:86px;
    	font-size: 18px;
    	color: #FFFFFF;
    	border-right: 2px solid #EB3A30;
    	padding: 20px;
    	text-decoration:none;
    }
    ul.primary li a:hover{
    	background:#D21B21;
    }
    </style>
    </head>
    <body>
        <div id="container">
            <div id="navigation">
            	<ul class="primary">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                    <li><a href="#">Link 5</a></li>
                    <li><a href="#">Link 6</a></li>
                </ul>
            <!--end navigation--></div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Oct 2008
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Resolved

    Thanks! I don't know how i missed it... I actually used padding-top and padding-bottom because I needed all the space I could get on the right and left. Thanks!


  •  

    Posting Permissions

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