Hello. Recently, I had a friend design a toplist for certain websites. And he created a nice one for me. But, there is a problem with it. Please see it here: www.islamilink.com I want the whole lines become clickable links and not just the little green redirect buttons (which people may not realize easily). And he says: "I tried it and I could make what you want. But when I did it, the information pop-up button became inactive. So I changed it back." So, my question is, do you know how to make the whole line a clickable link while keeping the "i" (information) button still active? If yes, can you send me the code, or tell me what things he should add-delete-change so that I tell him. Thanks a lot.
You can't, not with a simple fix, at least. Problem is, the information is in a table - and you can't make a whole row clickable and still keep the code proper/valid. However, this is not strictly a table pr se - it's a list, and should be formatted as one (separate lists for each part of the page, of course). For alignment, you can use floats or flex-box layout, and instead of divs containing the separate content, you can use a couple spans if needed. Then wrap all of the content in an anchor (a) tag. However, the markup you're using for each row is currently invalid as well (the buttons are misused, and should just be an anchor tag also - if you want to use buttons, you need to wrap them in a form somewhere). It will take a bit of a rewrite, but it's fixable.
Your text title could be a link, that will sove your problem. Another way is making the div clickable, and then place the info icon with an absolute positioning.