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

div#navigation {
background-color: #DB2727;
width: 900px;
height: 86px;
}

MY NAVIGATION CSS FOR UL LI LOOKS LIKE THIS:

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. <!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>
</div>
</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!