gesith Posted January 11, 2017 Share Posted January 11, 2017 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted January 11, 2017 Share Posted January 11, 2017 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. Link to comment Share on other sites More sharing options...
gesith Posted January 18, 2017 Author Share Posted January 18, 2017 not sure what you mean, why then do the other links work? Link to comment Share on other sites More sharing options...
dsonesuk Posted January 18, 2017 Share Posted January 18, 2017 (edited) 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 January 18, 2017 by dsonesuk Link to comment Share on other sites More sharing options...
gesith Posted January 22, 2017 Author Share Posted January 22, 2017 where do you suggest I put this code, in the <style type="text/css"> this comes up horrible & still right hand links don't work Link to comment Share on other sites More sharing options...
dsonesuk Posted January 22, 2017 Share Posted January 22, 2017 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 More sharing options...
dsonesuk Posted January 22, 2017 Share Posted January 22, 2017 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. Link to comment Share on other sites More sharing options...
gesith Posted January 23, 2017 Author Share Posted January 23, 2017 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 More sharing options...
dsonesuk Posted January 23, 2017 Share Posted January 23, 2017 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 More sharing options...
gesith Posted January 26, 2017 Author Share Posted January 26, 2017 thanks dsonesuk that's fixed the links, now all I have to do is get the buttons to work in Chrome, they work in IE & Firefox Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now