Jump to content

help with links


gesith
 Share

Recommended Posts

Because they don't have any links overlapping them that will prevent access to that link.

Imagine long plank of wood with one foot of left side painted blue representing link area, now as you lay them out randomly, some of the blue area is overlapped by new planks added. You can't see them anymore! That is what is happening with the underlying link areas, but you can see them but when you attempt to click it, you just click the empty non painted, non linked plank area of the overlapping plank i.e the container element.

Set the background of 600px container of link blue, the background-color of actual link red. Set opacity to .5, any links under blue will be unclickable.

div[id^='L'] {background: rgba(0,0,255,0.5);}
div[id^='L'] a {background-color: red;}
div[id^="I"] {
    background: rgba(0, 0, 255, 0.5);
}
Edited by dsonesuk
Link to comment
Share on other sites

The code just highlights the problem only, it not a fix, when place here.

<style type="text/css">
/* original code */
A:link { COLOR: blue; TEXT-DECORATION: underline;font-size:10pt; font-weight: bold }
A:visited { COLOR: blue; TEXT-DECORATION: underline;font-size:10pt; font-weight: bold }
A:active { COLOR: blue; TEXT-DECORATION: underline;font-size:10pt; font-weight: bold }
A:hover { COLOR: red; TEXT-DECORATION: none; font-size:10pt;font-weight: bold }
 /* new code by dsonesuk*/ 
  div[id^='L'] {background: rgba(0,0,255,0.5);}
div[id^='L'] a {background-color: red;}

div[id^="I"] {
    background: rgba(0, 0, 255, 0.5);
}

</style>

To fix: With the classes starting with 'L' you need to set width to adjust automatically to content i.e the link text

 div[id^='L'] {width: auto !important;}

Applying to the other will cause it to act the same but these have no content so it will shrink to nothing, the other option is to give those links that start with 'L' a higher z-index so it will lap above the element with classes starting with 'I', but depending on size of some 'I' elements being so small, you might in some cases have the same problem with 'L' class elements blocking out access to 'I' class elements.

Link to comment
Share on other sites

thanks dsonesuk for your help, as you can see I'm a beginner.I see what you mean when I highlight the problem with your code, although I'm not sure why some are different widths.

I've place your fix code in, this fixes some links but not that pesky "Norfolk" link

​I'm unfamiliar with the z-index

Link to comment
Share on other sites

The use of z-index is to do with layering of position: absolute/relative/fixed elements, your links are more important layers than the elements using class beginning with 'l' so you need to bring these to a higher layer level than others. By applying z-index: 999; they should appear above elements using positioning thats z-index is lower or using default z-index: auto;

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...