I have a little issue with a navigation menu that I'm building on a test-website.
You can visit the test-page by clicking on this link:
CLICK HERE
When you go with your mouse over the menu buttons, you can see that the :hover effect is to high. Also when you click on a button, there comes a dashed line around the button, but that line is also 1px to high at the top.
So when I edit some things in the styles.css I can't get it the way I want.
HTML code:
CODE
<div id="title"><!--TITLE STARTS-->
</div><!--TITLE ENDS-->
<div id="navigation"><!--NAVIGATION STARTS-->
<ul>
<li><a href="#" class="active">home</a></li>
<li><a href="#">products</a></li>
<li><a href="#">services</a></li>
<li><a href="#">about</a></li>
<li><a href="#">links</a></li>
<li><a href="#">contact</a></li>
</ul>
</div><!--NAVIGATION ENDS-->
</div><!--TITLE ENDS-->
<div id="navigation"><!--NAVIGATION STARTS-->
<ul>
<li><a href="#" class="active">home</a></li>
<li><a href="#">products</a></li>
<li><a href="#">services</a></li>
<li><a href="#">about</a></li>
<li><a href="#">links</a></li>
<li><a href="#">contact</a></li>
</ul>
</div><!--NAVIGATION ENDS-->
CSS code:
CODE
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #FFFFFF;
background-image: url(images/bg.gif);
background-repeat: repeat-x
font-family: Verdana;
}
#container {
margin: auto;
width: 793px;
}
#title {
height: 63px;
width: 367;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: center;
margin-top: 49px;
}
#navigation {
height: 60px;
width: 793px;
float: left;
}
#navigation li {
display: block;
list-style-type: none;
float: left;
background-image: url(images/nav_seperator.gif);
background-repeat: no-repeat;
background-position: left;
margin-top: 37px;
}
#navigation li a {
color: #686868;
font-family: Verdana;
font-weight: normal;
width: 108px;
height: 39px;
text-align: center;
text-transform: uppercase;
font-size: 15px;
padding-top: 23px;
float: left;
text-decoration: none;
margin-left: 1px;
}
#navigation li a:hover {
background-image: url(images/nav_hover.gif);
background-repeat: repeat-x;
color: #0087c7;
margin-left: 1px;
}
#navigation li a.active {
background-image: url(images/nav_hover.gif);
background-repeat: repeat-x;
color: #0087c7;
margin-left: 1px;
}
margin: 0px;
padding: 0px;
}
body {
background-color: #FFFFFF;
background-image: url(images/bg.gif);
background-repeat: repeat-x
font-family: Verdana;
}
#container {
margin: auto;
width: 793px;
}
#title {
height: 63px;
width: 367;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: center;
margin-top: 49px;
}
#navigation {
height: 60px;
width: 793px;
float: left;
}
#navigation li {
display: block;
list-style-type: none;
float: left;
background-image: url(images/nav_seperator.gif);
background-repeat: no-repeat;
background-position: left;
margin-top: 37px;
}
#navigation li a {
color: #686868;
font-family: Verdana;
font-weight: normal;
width: 108px;
height: 39px;
text-align: center;
text-transform: uppercase;
font-size: 15px;
padding-top: 23px;
float: left;
text-decoration: none;
margin-left: 1px;
}
#navigation li a:hover {
background-image: url(images/nav_hover.gif);
background-repeat: repeat-x;
color: #0087c7;
margin-left: 1px;
}
#navigation li a.active {
background-image: url(images/nav_hover.gif);
background-repeat: repeat-x;
color: #0087c7;
margin-left: 1px;
}
I hope someone can tell me what I'm doing wrong, because I get this issue with all the menu's I'm trying to build.
Thx in @vance
Answers