:-
[b]Hello all. I am a designer working on changes to an existing site that was written in PHP. The site has 4 areas in the navigation bar and the client wants to add 2 more. When I test the index page the 2 new areas do not show up. I need help. Here is what I have done:
- I modified the source code on the index page to include the 2 new areas (see below) [/b]
<!–end.top_
2) I modified the art to include the new tabs
3) I modified the css include the new tabs (width) and new code for the areas:
#nav a.selected{
border: 2px dashed #00FF00;
}
#nav {
/* margin: 0 auto 50px auto;*/
width: 648px;
min-height: 110px;
text-align: center;
/background-color: #999999;/
list-style: none;
padding-left:5px;
position:relative;
}
#nav li {
margin-right: 5px;
width: 155px;
height: 110px;
position: relative;
float: left;z-index:23;
/* background-color: #cccccc;/
}
#nav a {
margin: 0 auto;
width: 134px;
height:89px;
/ text-indent: -9999px;*/
text-decoration: none;
overflow: hidden;
/background-image: url(…/images/yo.png);
background-repeat:no-repeat; /
/ background-color: #00FF00;/
display: block;
position: relative;
z-index: 9;
outline:none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #44045f;
/**/
#top_nav {
height: 50px;
width:648px;
margin-left: 250px;
list-style: none;
background-image: url(…/images/top_nav.jpg);
background-repeat: no-repeat;
}
#top_nav ul{
margin-left:5px;
}
#top_nav li{
float:left;
display:block;
width:114px;
position:relative;
}
/#top_nav li .about{
float:left;
display:block;
width:110px;
position:relative;
} /
#top_nav a{
display:block;
outline: none;
position: relative;
height: 18px;
width: 92px;
text-align: center;text-decoration:none;
outline:none;
z-index:11;
position:relative;
margin-top:14px;
/ padding-top:40px;/
background-image:url(…/images/topnav.jpg);
background-repeat:no-repeat;
}
#top_nav li img.nav_shadow {
position: absolute;
bottom:-8px;
left: 50px;
z-index: 7;
}
#top_nav .home{
margin-top:20px;
background-position:0px 0px;
margin-left:32px;
}
#top_nav .home:hover {
background-position:0px -18px;
}
#top_nav .home:active {
background-position:0px -36px;
}
#top_nav .home span{
visibility: hidden;
}
/current nav highlight/body id/
#home .home{
margin-top:14px;
height: 32px;
background-position:0px -87px;
}
#home .home:hover{
top:-1px;
height: 32px;
background-position:0px -54px;
}
#home .home:active{
height: 31px;
background-position:0px -86px;
}
#top_nav .about{
margin-top:20px;
background-position:-96px 0px;
margin-left:8px;
}
#top_nav .about:hover {
background-position:-96px -18px;
}
#top_nav .about:active {
background-position:-96px -36px;
}
#top_nav .about span{
visibility: hidden;
}
/current nav highlight/body id/
#about .about{
margin-top:14px;
height: 32px;
background-position:-96px -87px;
}
#about .about:hover{
top:-1px;
height: 32px;
background-position:-96px -54px;
}
#about .about:active{
height: 31px;
background-position:-96px -86px;
}
#top_nav .packages{
width: 97px;
margin-top:20px;
background-position:-191px 0px;
}
#top_nav .packages:hover {
background-position:-191px -18px;
}
#top_nav .packages:active {
background-position:-191px -36px;
}
#top_nav .packages span{
visibility: hidden;
}/current nav highlight/body id/
#package_home .packages{
margin-top:14px;
height: 32px;
background-position:-191px -87px;
}
#package_home .packages:hover{
top:-1px;
height: 32px;
background-position:-191px -54px;
}
#package_home .packages:active {
height: 31px;
background-position:-191px -86px;
}
#top_nav .testimonials {
margin-top:20px;
background-position:-310px 0px;
margin-left:3px;
}
#top_nav .testimonials:hover {
background-position:-310px -18px;
}
#top_nav .testimonials:active {
background-position:-310px -36px;
}
#top_nav .testimonials span{
visibility: hidden;
}
/current nav highlight/body id/
#testimonials .testimonials{
margin-top:14px;
height: 32px;
background-position:-310px -87px;
}
#testimonials .testimonials:hover{
top:-1px;
height: 32px;
background-position:-310px -54px;
}
#testimonials .testimonials:active{
height: 31px;
background-position:-310px -124px;
}
#top_nav .staff {
margin-top:20px;
background-position:-465px 0px;
margin-left:3px;
}
#top_nav .staff:hover {
background-position:-465px -18px;
}
#top_nav .staff:active {
background-position:-465px -36px;
}
#top_nav .staff span{
visibility: hidden;
}
/current nav highlight/body id/
#staff .staff{
margin-top:14px;
height: 32px;
background-position:-465px -87px;
}
#staff .staff:hover{
top:-1px;
height: 32px;
background-position:-465px -54px;
}
#staff .staff:active{
height: 31px;
background-position:-465px -86px;
}
#top_nav .contact {
margin-top:20px;
background-position:-546px 0px;
margin-left:3px;
}
#top_nav .contact:hover {
background-position:-546px -18px;
}
#top_nav .contact:active {
background-position:-546px -36px;
}
#top_nav .contact span{
visibility: hidden;
}
/current nav highlight/body id/
#contact .contact{
margin-top:14px;
height: 32px;
background-position:-546px -87px;
}
#contact .contact:hover{
top:-1px;
height: 32px;
background-position:-546px -54px;
}
#contact .contact:active{
height: 31px;
background-position:-546px -86px;
}
/* = end.navigation
In reviewing the code again online on the current site I see that there is the following code to pre-load images but these images are not in the images folder to modify? Can you please help me ???
:
- <a class="home" href="index.php" Any help or direction would be great. Thank you in advance....