navigation menu css

jmassey09 · 10-23-2009, 07:17 PM

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

Excavator · 10-23-2009, 07:32 PM

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>

jmassey09 · 10-24-2009, 06:14 PM

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!