Skip to main content

Forums

This topic contains 6 replies, has 0 voices, and was last updated by  thewakeplace 10 years, 7 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #22899

    thewakeplace
    Member

    Hi All

    Just a quick one – i can’t see a part 4 for the PSD to web conversion tutorials, and i have a quick question regarding the rollover states for the active pages:

    When i am on my home page, and i want that tab to be the all white ‘active page’ tab, do i just go into the CSS on each individual page, and set the link background height to the top on that specific page? Does that make sense?
    That i adjust the background height of the tab to the active state on the individual pages that they correspond to?

    Thanks

    JP

    #48424

    thewakeplace
    Member

    actually what am i talking about –

    Code:
    ul#nav li.home a { width: 262px;
    background:url(Images/nav_home.jpg) bottom center no-repeat;
    }
    ul#nav li.videos a { width: 200px;
    background: url(Images/nav_video.jpg) bottom center no-repeat;
    }
    ul#nav li.downloads a { width: 200px;
    background:url(Images/nav_downloads.jpg) bottom center no-repeat;
    }
    ul#nav li.contact a { width: 338px;
    background:url(Images/nav_contact.jpg) bottom center no-repeat;
    }
    ul#nav li a:hover { background-position: center center;
    }

    The above is the code from the page at the moment. I have the hover effect all done fine – what i need is the CSS that moves the image up once again to an active state effect. How to i move the image when i go to different pages?

    Sorry for being dumb with it. . .

    #48452

    thewakeplace
    Member

    Perfect!!! Cheers Chris!

    #48454

    thewakeplace
    Member
    Code:
    ul#nav li.home a { width: 262px;
    background:url(Images/nav_home.jpg) bottom center no-repeat;
    }
    ul#nav li.videos a { width: 200px;
    background: url(Images/nav_video.jpg) bottom center no-repeat;
    }
    ul#nav li.downloads a { width: 200px;
    background:url(Images/nav_downloads.jpg) bottom center no-repeat;
    }
    ul#nav li.contact a { width: 338px;
    background:url(Images/nav_contact.jpg) bottom center no-repeat;
    }
    ul#nav li a:hover { background-position: center center;
    }
    body#home ul#nav li.home a {
    background-position: top center;
    }
    body#video ul#nav li.video a {
    background-position: top center;
    }

    So my CSS will look like this? The Home Page one works, but the video one doesn’t. . . . ?? Any Ideas???

    #48471

    Nodster
    Member
    Quote:
    body#video ul#nav li.video a {
    background-position: top center;

    looks like you missed the letter ‘s’ from video add it and it should be fine

    #48494

    thewakeplace
    Member

    Cool – its working! How stupid am i. . . :)

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star