Putting links behind background image with Gilder/Levin Method

Gilder/Levin Method css image links

[fuzzybunny0]

I have a page and using the Gilder/Levin Method of image replacement i have set my "images off" text behind. My issue is that the text behind is my navigation, and needs to be clickable.

Are there any work arounds?

[SuzyUK]

Hi fuzzybunny0 - Welcome to WebmasterWorld!

Are you saying that when you have the images turned off the text (link) exposed beneath is not clickable?

Not too sure I understand what's happening here.. can you post a an HTML code example from one of your nav links with the relevant CSS..

Suzy

[fuzzybunny0]

Here is my offending html:

<h4 id="background"><span></span> <br />
<br /><br />
Welcome To ______
<br />
Navigation:
<ul class="hidden">
<li><a href="about.html">About Us</a></li>
<li><a href="help.html">Help</a></li>
<li><a href="register.html">Register Now</a></li>
<li><a href="student.html">Student Services</a></li>
<li><a href="program.html">Programs and Courses</a></li>
</ul>

</h4>

here is the related css

#background {
width : 850px;
height : 590px;
Position: absolute;
}

#background span {
width : 100%;
height : 100%;
Position: absolute;
background: url(../imgs/bg.jpg) no-repeat center center;
}

As image replacements go, this one is working the best, except that the text replacement needs to be clickable, as it is a text version of a graphical nav

[fuzzybunny0]

the hidden class is not really hidden

.hidden{
list-style: none;
}

just in case you were wondering

[fuzzybunny0]

Is there a workaround for this, or another method that would work?

[SuzyUK]

Hi fuzzybunny0

sorry I meant to get back to this last night.. my bad!

I think maybe you're misunderstanding the Image Replacement Techniques.. All the well banded about techniques (like the Gilder/Levin method) are for replacing inline text in one element only..

<h4>Your Heading</h4> use an image to replace the words "Your heading"

You are trying to replace a whole (Nav) section (many elements) of your site. If you wanted to take in all your nav links and their heading you would either have to replace each <li>, <h4> element individually or use an image map

I would suggest that an Image Map would be a better choice.. These can also be done using an "Image Replacement" technique, but it's not just one image replaces all, (although only one image is used) you have to calculate background position co-ordinates as opposed to listing many elements.

Look For Articles on CSS Sprites/ CSS Image Slicing which is IMO the best CSS "Image Replacement" technique for a traditional image map. (I have done one or two and they're quite effective)

side note: you should't really have a <ul> nested inside and <h4> ;) but that's not affecting what you're trying to do..

Suzy