Navbar?
jinda55 Apr 16, 2012 5:04 PMWebsite link - myairtravels.cu.cc
As you can see on the navbar the active page in this case the home button has a orange background colour to show it is on the page (see the home button in the navbar)
However when I switch over to the other pages, it acts like the home button is active as the colour of the button is still orange
i.e. if you visit this page myairtravels.cu.cc/ContactUs.html
As you can see the home button is still orange.
How do I make it so the 'actual active page' shows the orange background colour in the navbar buttons?
This is the code I think that needs ammending in the html template I have created:
<!-- horizontal navigation --> <div id="nav1"> <ul> <li id="current" style="border:none"> <a href="../index.html" shape="rect">Home</a> </li> <li> <a href="../Flights.html">Flights</a> </li> <li> <a href="../Hotels.html" shape="rect">Hotels</a> </li> <li> <a href="../BookNow.html" shape="rect">Book Now</a> </li> <li> <a href="../Login.html" shape="rect">Login</a> </li> </ul> </div> <!-- end horizontal navigation
This is the style.css sheet
html {
background: #d0d0d0;
margin:0 0 0 -1px;
padding:0;
overflow-Y: scroll;
}
body {
padding:0;
margin :0;
display:table;
width:100%;
}
body {
color:#656565;
font-family: 'Trebuchet MS', sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
text-transform: normal;
}
p {
letter-spacing: normal;
line-height: 1.7em;
}
h1 {
color:#000066;
font-size:18px;
margin:20px 0 5px 0;
clear:both;
}
a:link, a:visited {
color:#2887A2;
text-decoration:none;
}
a:hover {
color:#003366;
text-decoration:underline;
text-align: left;
}
#wrapper {
background: transparent url( images/css/page-vbg.jpg ) repeat-y scroll 50% 0px;
margin:0 auto ;
width:100%;
}
body {
background-color:#d0d0d0;
}
#wrapper {
border-top: 1px solid #ffffff;
}
#bg {
margin:0 auto;
padding:0;
background:transparent ;
background-image:url(images/css/hat.jpg);
background-repeat:no-repeat;
background-position: center top ;
}
#header {
margin: 0 auto;
min-height:25px;
height: 25px;
width: 800px;
}
#page {
background: transparent url(images/css/page-bg.jpg ) no-repeat center top;
}
#container {
margin:0 auto;
width:800px;
}
#banner {
margin: 0 auto;
height:170px;
width:100%;
}
#nav1 {
height:30px;
margin:0 auto ;
text-align:center;
}
#nav1 ul {
display:table;
margin:0 auto;
padding:0;
list-style-type:none;
position:relative;
height:30px;
text-transform:uppercase;
font-size:11px;
font-family:Arial,sans-serif;
}
#nav1 ul li {
display:block;
float:left;
margin:0;
padding:0;
background:transparent url('images/css/hmenu.jpg') repeat-x top left;
border-left:1px solid #1e5184;
}
#nav1 ul li a {
display:block;
float:left;
color:#f8e833;
text-decoration:none;
padding:0px 50px ;
line-height:30px;
font-weight:bold;
}
#nav1 ul li a:hover, #nav1 li#current a {
color:#ffffff;
background:transparent url('images/css/hmenu-sel.jpg') repeat-x top left;
}
#content {
width:784px;
margin:0 auto;
min-height:800px;
}
#footerWrapper {
margin:0 auto;
height:150px;
padding:0;
background:transparent url( images/css/footerWrapper-bg.jpg ) no-repeat scroll center top;
}
#footer {
margin:0 auto;
padding:0;
width:800px;
height:70px;
}
#footer {
color:#FFFFFF;
text-align:left;
}
#footer a:link, #footer a:visited {
color:#FFFFFF;
}
#footer a:hover{
color:#ffb508;
text-decoration:none;
}
#right {
width:200px;
padding:10px 20px 20px 20px;
float:right;
}
#center {
width:500px;
padding:10px 20px 20px 20px;
float:left;
font-family: Arial, "Trebuchet MS", Verdana;
color: #003366;
}
#content p {
margin-top:10px;
}
#sidebar ul.vmenu {
list-style: none;
text-align: left;
margin: 7px 0px 8px 0px;
padding: 0;
text-decoration: none;
border-top: 1px solid #595959;
}
#sidebar ul.vmenu li {
list-style: none;
padding: 4px 0 4px 0px;
margin: 0 2px;
border-bottom: 1px solid #595959;
text-align: center;
}
#sidebar ul.vmenu li a {
text-decoration: none;
color:#2887A2;
}
#sidebar ul.vmenu li a:hover {
color:#29A294;
text-align: left;
}
#sidebar ul.vmenu ul { margin: 0 0 0 5px; padding: 0; }
#sidebar ul.vmenu ul li { border: none; }
a img {
border:none;
}
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
div.scroll {
background-color:#666666
width:500px;
height:750px;
overflow-y:scroll;
}
#wrapper #bg #page #container #content #right #sidebar table tr td {
color: #FFFFFF;
text-align: left;
}
#wrapper #bg #page #container #content #center #welcome #ImageSlideShow .article .story .content {
font-family: Arial, "Trebuchet MS", Verdana;
}





