...

View Full Version : navigation a selectors



RDLyTN
11-16-2011, 11:12 AM
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>

Excavator
11-16-2011, 11:16 AM
Hello RDLyTN,
Have a look at how this one (http://nopeople.com/CSS%20tips/h_ul_menu-with_images/index.html) is done - the secret is in the body tag.

RDLyTN
11-16-2011, 11:31 AM
Hello RDLyTN,
Have a look at how this one (http://nopeople.com/CSS%20tips/h_ul_menu-with_images/index.html) is done - the secret is in the body tag.

hm hm I don't get it working

resdog
11-16-2011, 02:43 PM
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:



<body id="lochome">

and your About page body tag would look like:



<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:



<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:


<div class="home">
<a href="index.html">Home</a>
</div>


Now, in the CSS, you'd have this 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?).



#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!

RDLyTN
11-17-2011, 10:50 AM
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:



<body id="lochome">

and your About page body tag would look like:



<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:



<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:


<div class="home">
<a href="index.html">Home</a>
</div>


Now, in the CSS, you'd have this 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?).



#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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum