Hi,

First and foremost id just like to say hi, and im happy ive finally found such a active web design forum!

I have a question regarding my nav menu for a new website im doing if somebody would be kind enough to try and help me.

I have created a rope ladder type picture(attached) to use as the nav menu, with spaces between the rungs.
My question is, without using flash, how can i get the text/page links onto the rungs?

Thanks for your time
Andy

Considering they are on a "slant" the only way i can think of is to put the text into the image and then use an imagemap over the top of each link.

Other than that, You can place div's above them with text inside. However getting the text to "slant" may be an issue.

Originally Posted by lynxus

Considering they are on a "slant" the only way i can think of is to put the text into the image and then use an imagemap over the top of each link.

Other than that, You can place div's above them with text inside. However getting the text to "slant" may be an issue.

Ah yes of course, If i set the rope ladder as the back ground images, and the split its container up into divs I could do it that way?

I didnt want the words on a slant anyway, so thats cool.

Ive never heard of imagemap before. How do I do this? What is it?

Thanks alot

This tutorial will explain how to use image maps:
http://www.w3schools.com/tags/tryit....ryhtml_areamap

Or if you did want to lynxus said i.e place the text within sections/p elements and then position them with css. Depending on whether you wanted to support earlier versions of IE you could use something like:

#rungsContainer {
width: insert width of image;
height: insert height of image;
background: url(whatEverYourBackGroundImageIsCalled.jpg);
}

section {
width: insert width of rungs;
height: insert height of rungs;
padding: 10px 0 10px 0;
}

section p:nth-child(odd){
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
}

section p:nth-child(even){
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
}

Originally Posted by Mug

This tutorial will explain how to use image maps:
http://www.w3schools.com/tags/tryit....ryhtml_areamap

Thanks Mug,

Much appreciated.

You do NOT need a horrible, inaccessible image map!
You can use images of the menu that are slanted to match your 'rungs', but then use an image replacement method so that search engines and people using assistive technology can grab REAL TEXT of your menu - and you can do this with a plain old unordered list with css image rollovers if you want.

Originally Posted by LadynRed

You do NOT need a horrible, inaccessible image map!
You can use images of the menu that are slanted to match your 'rungs', but then use an image replacement method so that search engines and people using assistive technology can grab REAL TEXT of your menu - and you can do this with a plain old unordered list with css image rollovers if you want.

I did something simlair to this in the end. The ladder became the background images, I spliced the text images up to match the background and used that imaged as the link, using text displacement for the real text.

Easy when you know how I guess :P

Originally Posted by CraftyPanda

Hi,

First and foremost id just like to say hi, and im happy ive finally found such a active web design forum!

I have a question regarding my nav menu for a new website im doing if somebody would be kind enough to try and help me.

I have created a rope ladder type picture(attached) to use as the nav menu, with spaces between the rungs.
My question is, without using flash, how can i get the text/page links onto the rungs?

Thanks for your time
Andy

Hi,
it is very simple first you have to slice this image so that it fits correctly
i want to know will you use list to create nav menu i.e are u going to use only html css to create your navigation menu if answer is yes then

slice image as fallows

1)if width of your drop down menu is static then u can use image as a whole i mean one step of a ladder image is for one list item <li></li>
but it is good practice to slice image so that it extends ie. make it as 1px image give repeat in your css
2)give image as background to li that is done
if any query let me know