Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts

    CSS Navigation/Rollover question

    I have the following CSS based navigation, the rollovers work perfectly, as does the active. My question is, is there a way to display a different image showing which page the viewer is currently on, using only CSS and HTML? (And yes, I realize there's only an :active class for one link, I haven't finished everything else yet.)

    CSS:

    Code:
    /* Begin Navigation */
    
    #nav {
        width:557px;
        height:64px;
        padding-left:21px;
        padding-right:2px;
        position:absolute;
        left:25%;
        top:0px;
        z-index:2;
    }
    
    #nav_home {
        background-image:url(images/btn_home.jpg);
        width:72px;
        height:64px;
        position:absolute;
        top:0px;
        left:21px;
        z-index:4;
    }
    
    #nav_home:hover {
        background-image:url(images/ro_home.jpg);
        width:72px;
        height:64px;
        position:absolute;
        top:0px;
        left:21px;
        z-index:5;
    }
    
    #nav_home:active {
        background-image:url(images/act_home.jpg);
        width:72px;
        height:64px;
        position:absolute;
        top:0px;
        left:21px;
        z-index:1;
    }
    
    #nav_about {
        background-image:url(images/btn_about.jpg);
        width:72px;
        height:64px;
        position:absolute;
        top:0px;
        left:93px;
        z-index:3;
    }
    
    #nav_about:hover {
        background-image:url(images/ro_about.jpg);
        width:72px;
        height:64px;
        position:absolute;
        top:0px;
        left:93px;
        z-index:4;
    }
    
    #nav_designs {
        background-image:url(images/btn_designs.jpg);
        width:72px;
        height:64px;
        position:absolute;
        top:0px;
        left:165px;
        z-index:3;
    }
    
    #nav_designs:hover {
        background-image:url(images/ro_designs.jpg);
        width:72px;
        height:64px;
        position:absolute;
        top:0px;
        left:165px;
        z-index:4;
    }
    
    #nav_resume {
        background-image:url(images/btn_resume.jpg);
        width:72px;
        height:64px;
        position:absolute;
        top:0px;
        left:237px;
        z-index:3;
    }
    
    #nav_resume:hover {
        background-image:url(images/ro_resume.jpg);
        width:72px;
        height:64px;
        position:absolute;
        top:0px;
        left:237px;
        z-index:4;
    }
    
    #nav_contact {
        background-image:url(images/btn_contact.jpg);
        width:72px;
        height:64px;
        position:absolute;
        top:0px;
        left:309px;
        z-index:3;
    }
    
    #nav_contact:hover {
        background-image:url(images/ro_contact.jpg);
        width:72px;
        height:64px;
        position:absolute;
        top:0px;
        left:309px;
        z-index:4;
    }
    
    /* End Navigation */
    HTML:
    Code:
    <div id="nav">
                            <ul>
                                <a href="index.html" title="Link to Home"><div id="nav_home"></div></a>
                                <a href="about.html" title="Link to About Me"><div id="nav_about"></div></a>
                                <a href="designs.html" title="Link to Design Gallery"><div id="nav_designs"></div></a>
                                <a href="resume.html" title="Link to my Resume"><div id="nav_resume"></div></a>
                                <a href="contact.html" title="Link to Contact Information"><div id="nav_contact"></div></a>
                            </ul>
                        </div>
    No, it's probably not the best way to do it, but it works, and I'm happy with it. I'm always open to suggestions, though.

    While I'm asking questions... Is there another way to position the <div id="nav"></div> other than using position:absolute;, while still using z-index?
    I had been trying to use margins, but they didn't seem to be working with z-index.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    http://www.hicksdesign.co.uk/journal...-page-with-css

    yep there is

    oops, your second question. you can use position: relative and still maintain the z-index as well. if you need help getting it position in your site, you'll to show all the code of course.
    Last edited by harbingerOTV; 05-09-2008 at 10:17 PM.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Maybe it's just tiredness blocking my mind, but I don't see how that works with images... As for the position, I was sure I tried relative, but maybe it's another hallucination.

    Thanks!

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    well we can combine 2 techniques and retool your code a little to make it work just fine

    http://www.alistapart.com/articles/slidingdoors2/

    so if you made your on/off images into one image you could write your css like:

    Code:
    #nav_home {
        background: url(images/btn_home.jpg) top left;
        width:72px;
        height:64px;
        position:absolute;
        top:0px;
        left:21px;
        z-index:4;
    }
    
    #nav_home:hover {
        background-position: top-right;
    }
    so on hovering the link the images just 'slides' over .

    then to hold the current page you could do:
    Code:
    body#home a#nav_home, body#what a#ever, body#what a#ever {
        background-position: top-right;
    }
    now if you didn't want to do the sliding doors technique you could write your css like:
    Code:
    #nav_home:hover, body#home #nav_home {
        background-image:url(images/ro_home.jpg);
        width:72px;
        height:64px;
        position:absolute;
        top:0px;
        left:21px;
        z-index:5;
    }
    you don't need to repeat all the stuff in red as your already defining it on the link before that in your css.

    So in the first way, you could use sliding doors and when you write the active state css, you would just chain all the active together. I'm a fan of sliding doors as it loads just one image for the link as opposed to a seperate one for each state and I think it's neat.

    in the second way you keep your core css the same just adding 1 more rule to it.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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