Jump to content
gesith

help with links

Recommended Posts

I have a strange link problem, links on the left side of my page work fine but not on the right, even though it's the same code.

 

see my code go to ardownes dot com then click families

 

any help appreciated

Share this post


Link to post
Share on other sites

You have placed your links within a 600px pixel wide div and therefore anything after this link is just empty space and when another link falls under this div container space, it becomes unclickable.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

For the migration images i suggest you set height: 0; with overflow: hidden initially, so they do not block access to links, then on expansion set height to auto; then back to height:0 when collapsed.

Share this post


Link to post
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

Share this post


Link to post
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;

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...