Hi please could some one look at my code and tell me what im doing wrong!
Im trying to change the colour of the nav bar to orange when hover over, but it just stays blue background.
(the a link,a active,a link,a hover) I want it to have a blue bachground with orange when hovering and finally black when activated.
Thanks
Im trying to change the colour of the nav bar to orange when hover over, but it just stays blue background.
(the a link,a active,a link,a hover) I want it to have a blue bachground with orange when hovering and finally black when activated.
Thanks
Code:
css
.wrapper {
height: 200px;
width: 100%;
margin: 0px;
padding: 0px;
}
.top_nav {
height: 20px;
background-image: url(images/top_nav.jpg);
width: 100%;
font-family: Arial;
font-size: 16px;
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
float: none;
clear: none;
}
.header_main {
height: auto;
background-image: url(images/header.jpg);
width: 100%;
font-family: Arial;
font-size: 24px;
background-repeat: no-repeat;
margin: 0px;
float: none;
font-style: normal;
font-weight: bold;
text-transform: capitalize;
color: #FFFFFF;
vertical-align: text-bottom;
text-align: left;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
clear: none;
}
.main_content {
height: 400px;
width: 650px;
border: thin dotted #000000;
margin-top: 40px;
float: left;
margin-left: 20px;
}
.footer {
background-color: #89CDFE;
float: left;
height: 20px;
width: 100%;
margin-top: 40px;
font-family: Arial;
font-size: 18px;
font-weight: normal;
color: #FFFFFF;
}
.top_nav_lower {
height: 20px;
background-image: url(images/top_nav.jpg);
width: 100%;
font-family: Arial;
font-size: 16px;
background-repeat: no-repeat;
padding: 0px;
float: none;
clear: none;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
}
.left_nav {
padding: 10px;
height: 300px;
width: 150px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-right-style: dotted;
border-top-color: #8BCFFE;
border-right-color: #8BCFFE;
border-bottom-color: #8BCFFE;
border-left-color: #8BCFFE;
margin-top: 40px;
float: left;
font-family: Arial;
font-size: 18px;
font-style: oblique;
font-weight: bold;
line-height: normal;
text-decoration: underline;
color: #000000;
}
.right_nav {
padding: 10px;
height: 300px;
width: 150px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-right-style: none;
border-top-color: #8BCFFE;
border-right-color: #8BCFFE;
border-bottom-color: #8BCFFE;
border-left-color: #8BCFFE;
margin-top: 40px;
float: right;
border-top-style: none;
border-bottom-style: none;
border-left-style: dotted;
}
a:hover {
background-color: #FF6600;
color: #FFFFFF;
margin-bottom: 1px;
font-family: Arial;
height: 20px;
width: 160px;
float: left;
clear: both;
}
a:link {
color: #FFFFFF;
height: 20px;
width: 160px;
background-color: #89CDFE;
margin-bottom: 1px;
clear: both;
float: left;
}
a:visited {
color: #FFFFFF;
background-color: #89CDFE;
width: 160px;
height: 20px;
margin-bottom: 1px;
float: left;
font-family: Arial;
clear: both;
}
a:active {
color: #FFFFFF;
background-color: #000000;
float: left;
height: 20px;
width: 160px;
margin-bottom: 1px;
clear: both;
}
Html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The History Of The INSURANCE Industry</title>
<style type="text/css">
<!--
@import url("history-of-insurance.css.css");
-->
</style>
</head>
<body>
<div class="wrapper">
<div class="top_nav"></div>
<div class="header_main">THE HISTORY OF THE UK INSURANCE INDUSTRY</div>
<div class="top_nav_lower"></div>
<div class="left_nav"><div align="center"><p>Navigation</p>
<a href="index.html">Home</a><a href="index.html">Home</a><a href="index.html">Home</a><a href="index.html">Home</a><div align="center">
<p>Accessibility</p>
<a href="index.html">Home</a><a href="index.html">Home</a><a href="index.html">Home</a><a href="index.html">Home</a></div></div>
</div><div class="main_content">Content for class "main_content" Goes Here</div>
<div class="footer"><div align="center">© 2006 </div></div>
</div>
</body>
</html>
Last edited:
