SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing Navigation Background When Page Active

    Hoping this makes sense...

    In theory, I have a navigation bar, that changes the page of the main iframe (I couldnt figure out how else people change pages in html/css..). When that page is active the button u pushed is supposed to have a new background image.

    I got it all down, navigation, rollovers, iframe, cant seem to figure out or dig the answer as to how to change the active buttons background.

    Was trying to see if anyone could attempt to solve this riddle with me. )

    ....Hope that made sense, thankyou in advance!


    http://emjay2d.zxq.net/ <--- This is what im doing, and the code/design I have as of right now, it may help to understand what im trying to do.

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Like this { visibility: inherit; } Highlight Current Page Plus!

    If you want to redo it you don't have to use iframes to change each pages background.

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    If you're using an <iframe> to show the content (why??), I think you're going to struggle without using Javascript. I might be wrong, but I don't think any of the methods that Eric suggested will work with <iframe>s, because you need to change the contents of one document based on another document. The usual methods for giving a 'current' highlight on the menu all work on the basis that you can uniquely identify which link to highlight by content in the page. That doesn't work here.

    Two solutions.

    Recommended: ditch the iframe. It is an accessibility and usability nightmare, and creates headaches for site maintenance (like this).

    Alternative: use Javascript to apply a class to a list item when you click on it and at the same time remove the class from any other list item that has it applied. (I have no idea how to do this, but I'm sure it's possible).

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    In theory, I have a navigation bar, that changes the page of the main iframe (I couldnt figure out how else people change pages in html/css..).
    They don't use iframes

    Just load a whole new page with the new content as required. Otherwise you basically have a one page site that isn't accessible or searchable.

    The css/images for the header and navigation will be cached so there will be little overhead in requesting a new page. This is how everyone does it.

    You can separate header, navigation , footer into SSI (server side includes) to make maintenance easier but for a small site you basically just call each page anew.

    Then you can use the methods that Eric mentioned above.

  5. #5
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All of these responses were fantasticly helpful. I've figured it out, dump the iframe, then do as Eric suggested on that website

    You guys are beyong helpful.

    Another thing im having some questions about { visibility: inherit; } Highlight Current Page Plus!
    code.

    I see this often, but "#nav a", what the hell is the a there for, what is this class' purpose..?

    Also, I see classifications I would start as "#mainbar" sometimes without the #, or starting with a ".";; What does this do? is it telling it to do something different from just a normal #mainbar?

    You guys rock, thanks for your answers. The questions I have has proved itself difficult to look up.

  6. #6
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by emjay2d View Post
    I see this often, but "#nav a", what the hell is the a there for, what is this class' purpose..?

    Also, I see classifications I would start as "#mainbar" sometimes without the #, or starting with a ".";; What does this do? is it telling it to do something different from just a normal #mainbar?
    #mainbar targets anything with id="mainbar"
    .mainbar targets anything with class="mainbar"

    #nav a targets any <a> inside anything with id="nav".


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •