Adding Button To Nav Bar Not Working
Posted: Sun May 19, 2013 2:05 pm
I edited the php code on a site I'm working on to add a navigation button to the nav bar. I've uploaded the gif image of the button, and the page exists. I added the code to make the button appear exactly like the other buttons' code, but the button will not show up. I widened the page to allow for room for the new button, but instead of the new button showing up now there's an old non-working button showing up at the end of the nav bar. (I believe that's the default background nav bar image showing through.)
Here is the nav code:
#topnav {
width: 885px;
height: 42px;
}
#topnav ul {
float: left;
height: 42px;
background: transparent url(img/topnav_bck.jpg) no-repeat center top;
padding: 0 9px;
display: inline;
width: 885px; /* for IE5 Win */
voice-family: "\"}\"";
voice-family: inherit;
width: 885px; /* actual value */
}
html>body #topnav ul {
width: 885px; /*for Opera */
}
#topnav li {
float: left;
background-position: 0px 0px;
background-repeat: no-repeat;
background-color: transparent;
}
#topnav a {
float: left;
height: 42px;
background-position: 0px 0px;
background-repeat: no-repeat;
background-color: transparent;
}
#topnav a:hover {
background-position: 0px -42px;
}
#topnav a span {
display: none;
}
/* ---- the topnav buttons -------------- */
li#index_nav, li#index_nav a {
width: 78px;
background-image: url(img/buttons/home.gif);
}
li#about_nav, li#about_nav a {
width: 122px;
background-image: url(img/buttons/about.gif);
}
li#birthcenter_nav, li#birthcenter_nav a {
width: 170px;
background-image: url(img/buttons/birthcenter.gif);
}
li#homebirth_nav, li#homebirth_nav a {
width: 138px;
background-image: url(img/buttons/homebirth.gif);
}
li#testimonials_nav, li#testimonials_nav a {
width: 145px;
background-image: url(img/buttons/testimonials.gif);
}
li#gallery_nav, li#gallery_nav a {
width: 115px;
background-image: url(img/buttons/gallery.gif);
}
li#news_nav, li#news_nav a {
width: 99px;
background-image: url(img/buttons/news.gif);
}
/* active nav links ------------------*/
body#index li#index_nav a, body#index li#index_nav a:hover,
body#about li#about_nav a, body#about li#about_nav a:hover,
body#birthcenter li#birthcenter_nav a, body#birthcenter li#birthcenter_nav a:hover,
body#homebirth li#homebirth_nav a, body#homebirth li#homebirth_nav a:hover,
body#testimonials li#testimonials_nav a, body#testimonials li#testimonials_nav a:hover,
body#gallery li#gallery_nav a, body#gallery li#gallery_nav a:hover,
body#news li#news_nav a, body#news li#news_nav a:hover {
background-position: 0px -84px;
}
/* ---- main -------------- */
The new page is "testimonials."
The website is www.concordbirthcenter.com
Any help would be GREATLY appreciated!!!
Here is the nav code:
#topnav {
width: 885px;
height: 42px;
}
#topnav ul {
float: left;
height: 42px;
background: transparent url(img/topnav_bck.jpg) no-repeat center top;
padding: 0 9px;
display: inline;
width: 885px; /* for IE5 Win */
voice-family: "\"}\"";
voice-family: inherit;
width: 885px; /* actual value */
}
html>body #topnav ul {
width: 885px; /*for Opera */
}
#topnav li {
float: left;
background-position: 0px 0px;
background-repeat: no-repeat;
background-color: transparent;
}
#topnav a {
float: left;
height: 42px;
background-position: 0px 0px;
background-repeat: no-repeat;
background-color: transparent;
}
#topnav a:hover {
background-position: 0px -42px;
}
#topnav a span {
display: none;
}
/* ---- the topnav buttons -------------- */
li#index_nav, li#index_nav a {
width: 78px;
background-image: url(img/buttons/home.gif);
}
li#about_nav, li#about_nav a {
width: 122px;
background-image: url(img/buttons/about.gif);
}
li#birthcenter_nav, li#birthcenter_nav a {
width: 170px;
background-image: url(img/buttons/birthcenter.gif);
}
li#homebirth_nav, li#homebirth_nav a {
width: 138px;
background-image: url(img/buttons/homebirth.gif);
}
li#testimonials_nav, li#testimonials_nav a {
width: 145px;
background-image: url(img/buttons/testimonials.gif);
}
li#gallery_nav, li#gallery_nav a {
width: 115px;
background-image: url(img/buttons/gallery.gif);
}
li#news_nav, li#news_nav a {
width: 99px;
background-image: url(img/buttons/news.gif);
}
/* active nav links ------------------*/
body#index li#index_nav a, body#index li#index_nav a:hover,
body#about li#about_nav a, body#about li#about_nav a:hover,
body#birthcenter li#birthcenter_nav a, body#birthcenter li#birthcenter_nav a:hover,
body#homebirth li#homebirth_nav a, body#homebirth li#homebirth_nav a:hover,
body#testimonials li#testimonials_nav a, body#testimonials li#testimonials_nav a:hover,
body#gallery li#gallery_nav a, body#gallery li#gallery_nav a:hover,
body#news li#news_nav a, body#news li#news_nav a:hover {
background-position: 0px -84px;
}
/* ---- main -------------- */
The new page is "testimonials."
The website is www.concordbirthcenter.com
Any help would be GREATLY appreciated!!!