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
    New Coder
    Join Date
    Nov 2011
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    navigation a selectors

    Hi,

    Here is my website: http://www.i4-it.be
    If I'm f.e. on my homepage I want that my navigationbutton 'home' stays active like my hoverbutton. Does anyone know how I can do this?

    Already thanks

    [CODE]

    CSS
    /* Navigation */

    #nav {
    margin-top:33px;
    margin-left:5px;
    width:444px;
    height:32px;
    float:left;
    }

    .home {
    width:73px;
    height:32px;
    float:left;
    }

    .about {
    width:80px;
    height:32px;
    float:left;
    }

    .services {
    width:94px;
    height:32px;
    float:left;
    }

    .portfolio {
    width:103px;
    height:32px;
    float:left;
    }

    .contact {
    width:94px;
    height:32px;
    float:left;
    }

    HTML

    <div id="nav">

    <div class="home">
    <a href="index.html" onmouseover="document.getElementById('home').src='img/home_hover.gif'" onmouseout="document.getElementById('home').src='img/home.gif'"><img src="img/home.gif" id="home" style="border:none;"></a>
    </div>

    <div class="about">
    <a href="html/about.html" onmouseover="document.getElementById('about').src='img/about_hover.gif'" onmouseout="document.getElementById('about').src='img/about.gif'"><img src="img/about.gif" id="about" style="border:none;"></a>
    </div>

    <div class="services">
    <a href="html/servweb.html" onmouseover="document.getElementById('services').src='img/services_hover.gif'" onmouseout="document.getElementById('services').src='img/services.gif'"><img src="img/services.gif" id="services" style="border:none;"></a>
    </div>

    <div class="portfolio">
    <a href="html/portfolio.html" onmouseover="document.getElementById('portfolio').src='img/portfolio_hover.gif'" onmouseout="document.getElementById('portfolio').src='img/portfolio.gif'"><img src="img/portfolio.gif" id="portfolio" style="border:none;"></a>
    </div>

    <div class="contact">
    <a href="html/contact.html" onmouseover="document.getElementById('contact').src='img/contact_hover.gif'" onmouseout="document.getElementById('contact').src='img/contact.gif'"><img src="img/contact.gif" id="contact" style="border:none;"></a>
    </div>

    </div>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello RDLyTN,
    Have a look at how this one is done - the secret is in the body tag.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello RDLyTN,
    Have a look at how this one is done - the secret is in the body tag.
    hm hm I don't get it working

  • #4
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    Basically, for each page, in the HTML, you would assign an ID to the body tag. So, if you are on the home page, your body tag would look like:

    Code:
    <body id="lochome">
    and your About page body tag would look like:

    Code:
    <body id="locabout">
    But you couldn't change this stuff in CSS, since you are using actual images and hover images in order to show the links. it would be better if you used an image replacement with sprites in order to do what you are wanting. A quick run down on doing this:

    Open both of your images (normal and hover state) in you image editing program. Then, combine them into one image, with the "normal" state being on top and the "hover" state being on bottom. Using your "home" button as an example, your image would now be 72px x 64px (your height would double in size). Save it as "home-link.jpg" Then, on the HTML for your pages, remove the "image", and replace it with text. So this:

    Code:
    <div class="home">
    <a href="index.html" onmouseover="document.getElementById('home').src='img/home_hover.gif'" onmouseout="document.getElementById('home').src='img/home.gif'"><img src="img/home.gif" id="home" style="border:none;"></a>
    </div>
    Would become:
    Code:
    <div class="home">
    <a href="index.html">Home</a>
    </div>
    Now, in the CSS, you'd have this code:
    Code:
    .home a {
    width:73px;
    height:32px;
    background: url(img/home-link.jpg) no-repeat center top;
    display: block;
    float:left;
    }
    .home a:hover {
       background-position: center bottom;
    }
    And voila! You have a working CSS image replacement button with rollover using a sprite. Repeat these steps for the other links, substituting the width and height and image url for each.

    Now, back to your original problem. With the image replacements in tact, you will use CSS to target the links of the pages you are on (remember when you added the ID to the body tag on each page?).

    Code:
    #lochome .home a {
       background-position: center bottom;
       cursor: default;
    }
    Repeat for the other links. I added the "cursor:default", which disables the "hand" icon that normally shows over links. Since the page you are on shouldn't be clicking to the page again, I disable that hand cursor for that link. Hope that helps!
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

  • #5
    New Coder
    Join Date
    Nov 2011
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by resdog View Post
    Basically, for each page, in the HTML, you would assign an ID to the body tag. So, if you are on the home page, your body tag would look like:

    Code:
    <body id="lochome">
    and your About page body tag would look like:

    Code:
    <body id="locabout">
    But you couldn't change this stuff in CSS, since you are using actual images and hover images in order to show the links. it would be better if you used an image replacement with sprites in order to do what you are wanting. A quick run down on doing this:

    Open both of your images (normal and hover state) in you image editing program. Then, combine them into one image, with the "normal" state being on top and the "hover" state being on bottom. Using your "home" button as an example, your image would now be 72px x 64px (your height would double in size). Save it as "home-link.jpg" Then, on the HTML for your pages, remove the "image", and replace it with text. So this:

    Code:
    <div class="home">
    <a href="index.html" onmouseover="document.getElementById('home').src='img/home_hover.gif'" onmouseout="document.getElementById('home').src='img/home.gif'"><img src="img/home.gif" id="home" style="border:none;"></a>
    </div>
    Would become:
    Code:
    <div class="home">
    <a href="index.html">Home</a>
    </div>
    Now, in the CSS, you'd have this code:
    Code:
    .home a {
    width:73px;
    height:32px;
    background: url(img/home-link.jpg) no-repeat center top;
    display: block;
    float:left;
    }
    .home a:hover {
       background-position: center bottom;
    }
    And voila! You have a working CSS image replacement button with rollover using a sprite. Repeat these steps for the other links, substituting the width and height and image url for each.

    Now, back to your original problem. With the image replacements in tact, you will use CSS to target the links of the pages you are on (remember when you added the ID to the body tag on each page?).

    Code:
    #lochome .home a {
       background-position: center bottom;
       cursor: default;
    }
    Repeat for the other links. I added the "cursor:default", which disables the "hand" icon that normally shows over links. Since the page you are on shouldn't be clicking to the page again, I disable that hand cursor for that link. Hope that helps!
    Thank you very much, I already thought that the way I used for the hover with the images was wrong. I'll try this out!


  •  

    Posting Permissions

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