Active effect in css for menu not working :'

princeoo7

princeoo7

On a Journey called Life :P
Skilled
Today I added menu which I created in photoshop and then sliced it for use
happy19.gif


Every thing is working but i am facing problem with active code :

I want the active link to have hover image as the total image is of 150 weight and 120 of height and reset see the below code:

Code: 
@charset "utf-8";

/* CSS Document */

.container .header .table2 tr #[home a {

    display: block;

    height: 60px;

    width: 150px;

}

.container .header .table2 tr #1 a {

    display: block;

    height: 60px;

    width: 150px;

}

.container .header .table2 tr #2 a {

    display: block;

    height: 60px;

    width: 150px;

}

.container .header .table2 tr #3 a {

    display: block;

    height: 60px;

    width: 150px;

}

.container .header .table2 tr #4 a {

    display: block;

    height: 60px;

    width: 150px;

}

.container .header .table2 tr #5 a {

    display: block;

    height: 60px;

    width: 150px;

}

.container .header .table2 tr #6 a {

    display: block;

    height: 60px;

    width: 150px;

}

/* hover */



.container .header .table2 tr #home:hover    {

    background-image:url(../images/home.png);

    background-position:0 -60px;

}

.container .header .table2 tr #1:hover {

    background-image:url(../images/1.png);

    background-position:0 -60px;

}

.container .header .table2 tr #2:hover {

    background-image: url(../images/2.png);

    background-position:0 -60px;

}

.container .header .table2 tr #3:hover {

    background-image: url(../images/3.png);

    background-position:0 -60px;

}

.container .header .table2 tr #4:hover {

    background-image: url(../images/i4.png);

    background-position:0 -60px;

}

.container .header .table2 tr #5:hover {

    background-image: url(../images/5.png);

    background-position:0 -60px;

}

.container .header .table2 tr #6:hover {

    background-image: url(../images/6.png);

    background-position:0 -60px;

}

/* active */

.container .header .table2 tr #home:active {

    background-position:0 -60px;

}

.container .header .table2 tr #1:active {

   

    background-position:0 -60px;

}

.container .header .table2 tr #2:active {

   

    background-position:0 -60px;

}

.container .header .table2 tr #3:active {

   

    background-position:0 -60px;

}

.container .header .table2 tr #4:active {

   

    background-position:0 -60px;

}

.container .header .table2 tr #5:active {

   

    background-position:0 -60px;

}

.container .header .table2 tr #6:active {

   

    background-position:0 -60px;

}

I am using same image for total process
happy19.gif


so where am I going wrong ????
 
Try following code, do the same for rest of everything. You haven't provided a background image for :active selector.

Code: 
.container .header .table2 tr #home:hover,  .container .header .table2 tr #home:active{

    background-image:url(../images/home.png);

    background-position:0 -60px;

}
 
#[member='Rahul++'] : did'nt worked out Bro
<
But gave an idea and I tried it and got 50 % success.

Now i am getting active state Image but if i click any where in that page the link goes default pic state
<
and that's why I said 50% success.

Code is as follows :

Code: 
 .container .header .table2 tr #[member='home'] a:active, .container .header .table2 tr #[member='home'] a:focus {

    background-image: url(&#[member='466dave'];&#[member='466dave'];/images/home.png);

    background-position:0 -60px;

    display: block;

    height: 60px;

    width: 150px;

}

.container .header .table2 tr #1 a:active, .container .header .table2 tr #1 a:focus {

    background-image: url(&#[member='466dave'];&#[member='466dave'];/images/1.png);

    background-position:0 -60px;

    display: block;

    height: 60px;

    width: 150px;

}

one more thing that in about two code only HOME code don't work at all but in rest of case they do work.
 
princeoo7 said:
#[member='Rahul++'] : did'nt worked out Bro But gave an idea and I tried it and got 50 % success.

Now i am getting active state Image but if i click any where in that page the link goes default pic state and that's why I said 50% success.

Code is as follows :

Code: 
 .container .header .table2 tr #[member='home'] a:active, .container .header .table2 tr #[member='home'] a:focus {

    background-image: url(&#[member='466dave'];&#[member='466dave'];/images/home.png);

    background-position:0 -60px;

    display: block;

    height: 60px;

    width: 150px;

}

.container .header .table2 tr #1 a:active, .container .header .table2 tr #1 a:focus {

    background-image: url(&#[member='466dave'];&#[member='466dave'];/images/1.png);

    background-position:0 -60px;

    display: block;

    height: 60px;

    width: 150px;

}

one more thing that in about two code only HOME code don't work at all but in rest of case they do work.
Click to expand...

Can you provide us the whole code (including HTML and CSS) it will be good if we solve it on trial and error basis.

edit : i am rahul++ but as tapatalk doesnt work properly with special characters, i am using this alternative id

Sent from my GT-I9000 using Tapatalk 2
 
#Rahul++ :

here is the full code for the menu in html :

Code: 
 <table class="table2" width="1280" height="60" cellpadding="0" cellspacing="0" >


<tr>

        <td id="1" background="images/index_02.png" width="115" height="60" alt="">

            </td>

        <td id="home" background="images/home.png"width="150" height="60" alt="HOME" >[url="index.php"] <p align="justify"></p>[/url]

		    </td>

        <td id="1" background="images/1.png" width="150" height="60" alt="1">[url="web-pages/1.php"] <p align="justify"></p>[/url]

            </td>

        <td id="2" background="images/2.png" width="150" height="60" alt="2">[url="web-pages/2.php"] <p align="justify"></p>[/url]

            </td>

        <td id="3" background="images/3.png" width="150" height="60" alt="3">[url="web-pages/3.php"] <p align="justify"></p>[/url]

            </td>

        <td id="4" background="images/4.png" width="150" height="60" alt="4">[url="web-pages/4.php"] <p align="justify" ></p>[/url]

            </td>

        <td id="5" background="images/5.png" width="150" height="60" alt="5">[url="web-pages/5.php"] <p align="justify"></p>[/url]

            </td>

        <td id="6" background="images/6.png" width="150" height="60" alt="6">[url="web-pages/6.php"] <p align="justify"></p>[/url]

            </td>

        <td background="images/index_10.png" width="115" height="59" alt="" >

            </td>

    </tr>

</table>

I have made a simple menu of 120 px height in photoshop and then sliced it as html and images.

did some modifications and that's all.

CSS is as above I gave.

now what to do ?????
 
Back
Top