Jump to content


Photo

Anchor activate to active anywhere within enclosed block.


  • Please log in to reply
5 replies to this topic

#1 CB150Special

CB150Special
  • Members
  • PipPipPip
  • Advanced Member
  • 35 posts

Posted 28 July 2017 - 11:51 PM

This is a styling issue but is there another way to do this ?

 

Here is my code.

<li style="display:inline-block;"><a href='home_page.php'>Home</a></li>

 

This line is in a list with the following CSS

    #list li {
        width: 70px;
        margin: 5px auto;    
        padding: 5px 15px 5px 15px;  
        border-radius: 5px;  
        border-style: solid;
        border-width: 1px;
    }

and the hover

   #list li:hover {
        background:#dbc9a0;
        cursor: pointer;
  }   

The hover works great and any time the cursor moves over the box, I get the change.

 

The problems is that the link only works if I click over the active anchor within the the box and not anywhere else in the box.

 

It does appear that anchors have minds of their own.



#2 requinix

requinix
  • Administrators
  • Lazy Administrator
  • 8,905 posts
  • LocationWA

Posted 28 July 2017 - 11:55 PM

This is a styling issue

...and not a PHP issue. Moved.
 

It does appear that anchors have minds of their own.

Well, yeah. Of course they do.

You're applying a padding to the <li>, which means there will be space inside the <li> that is not covered by any child elements - like the <a>. Now, consider what would happen if you were to instead expand the <a> itself.

#3 CB150Special

CB150Special
  • Members
  • PipPipPip
  • Advanced Member
  • 35 posts

Posted 29 July 2017 - 01:28 AM

I know what the problem is but looking for a way to make it work.

 

Is it possible to check the width of a item and then pack the <a> name with spaces on either side to correctly fill the container ?



#4 Jacques1

Jacques1
  • Gurus
  • Turtles all the way down
  • 4,168 posts

Posted 29 July 2017 - 01:45 AM

requinix just told you how to make it work. This is a simple cut-and-paste job. Oh, well, you need one extra line for display: block.



#5 CB150Special

CB150Special
  • Members
  • PipPipPip
  • Advanced Member
  • 35 posts

Posted 29 July 2017 - 02:31 AM

Maybe I'm blind but can you show me where exactly where requinix showed me how to make it work?  All I see is a discussion.

 

I already have display:block, if you read the question, I believe the issue is with padding and I can't see anyway around it



#6 Jacques1

Jacques1
  • Gurus
  • Turtles all the way down
  • 4,168 posts

Posted 29 July 2017 - 03:08 AM

Dude.

  • What you currently have: an automatically sized anchor within a fixed-sized list entry. That gives you a small clickable area in a big box.
  • What you need: a fixed-sized anchor within an automatically sized list entry. That gives you a big clickable box.
  • How to achieve this: Move the CSS rules from the list entry to the anchor.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users