Make link adjustable to content

Question

I'm using thumbnail to show a button and then a description below the button, the button and the description are both inside a link . This is my code:

    <div class="col-xs-6 col-md-6 center">
        <a class="thumbnail thumbnailBorder" style="display:inline-block" >
            <input type="button" value="button"/>              
            <div>
                <span>This is just some text for StackOverflow</span>
            </div>
        </a>  
    </div>

Everything works fine, but there is some white space that is part of the link, and I don't want that to happen, I don't need that white space to be clickable as a link. I will show you two pictures so you can understand:

In the first image the outer rectangle is the clickable area for the link, besides the button there is a lot of white space that is part of the link. Is possible to adjust the link area just to the button and the text using all this content inside a link? The second image shows what I want to reach, is it possible?

The thumbnailBorder class is not relevant, this is the content anyways:

.thumbnailBorder{
    border:none;
}

just have the `` around the text (without the button) and bind the same "process" to the button. — Pedro Estrada, Mar 02 '17 at 15:20
http://stackoverflow.com/questions/6393827/can-i-nest-a-button-element-inside-an-a-using-html5 — Stickers, Mar 02 '17 at 15:24
as @Hewlett said, semantically talking you must NOT have a button inside a link. Maybe what you can do is use a span instead of a button and use css to make it look-alike a button. So we can help you more, what exactly you need this for? — Alejandro Maliachi Quintana, Mar 02 '17 at 15:25
You can remove display:inline-block from the tag to make the clickable area like the 2nd image above, but fix the invalid markup first. — Stickers, Mar 02 '17 at 15:32

score 1 · Answer 1 · answered Mar 02 '17 at 15:21

1

<div class="col-xs-6 col-md-6 center">
    <a class="thumbnail thumbnailBorder" style="display:inline-block" >
        <input type="button" value="button"/>
    </a>         
        <div>
            <a class="thumbnail thumbnailBorder" style="display:inline-block" > 
                <span>This is just some text for StackOverflow</span>
            </a>
        </div> 
</div>

That should fix it.

answered Mar 02 '17 at 15:21

Harvey Fletcher

1,167
1
9
22

2

I would never wrap a button in a link – mplungjan Mar 02 '17 at 15:23
Exactly this. Just change the anchor wrapping the button to a div and add an onclick event. – Hewlett Mar 02 '17 at 15:24

score 1 · Accepted Answer · answered Mar 02 '17 at 15:27

Don't use a button inside an a. If you want to keep the button, try this:

<div class="col-xs-6 col-md-6 center">
  <form action="#">
    <input type="submit" value="button" />
  </form>
  <div>
    <a href="#" class="thumbnail thumbnailBorder" style="display:inline-block">
      <span>This is just some text for StackOverflow</span>
    </a>
  </div>
</div>

score 1 · Answer 3 · answered Mar 02 '17 at 16:13

Let's talk semantics. From what I gather, you have an element on the page that you want to look like a button, but behave like an anchor. So the question is: Should the underlying HTML be a <button>/<input> tag, or should it be an <a> tag? In other words, is it more semantic to model behavior or visualization?

Turns out behavior is more semantic. Any CSS newbie can tell you that .danger is a more semantic class name than .red. Using .red restricts your design, hindering refactors besides not really telling what's actually going on. Trust me, when you read back over your code later, you'll want to know what's going on. How it looks on the page is usually irrelevant.

So back to your case, that <input> tag itself should be an <a> tag. And wrap that in a <div> to give it its block-level space:

<div class="col-xs-6 col-md-6 center">
    <div>
        <a class="btn thumbnail-trigger">button</a>
    </div>
    ...
</div>

Can you see how much simpler the problem becomes with that change? Now it's obvious that you'll need two <a> tags, which has really always been the case. Even hackily molding an element into that shape you drew seemed possible before making that change. So all together:

<div class="col-xs-6 col-md-6 center">
    <div>
        <a class="btn thumbnail-trigger">button</a>
    </div>
    <div>
        <a class="thumbnail-trigger">This is just some text for StackOverflow</a>
    </div>
</div>

Now, if you really want the space right between the button and the text to be clickable, you should first ask yourself, "What would the user be trying to do if they clicked here?" If the answer is "not click the button," which it should be, then we're done. But if you decide that clickable whitespace is really the UX you want, you can put a <span> inside the <a> tag and style that to look like a button, while having the <a> tag actually extend down to the text.

Anyways, here's a JSFiddle with all that. Cheers.

hungerstar · Answer 4 · 2017-03-02T15:32:26.707

I would suggest changing <button> to a <span> and styling the <span> to look like a button.

.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  text-transform: uppercase;
  color: black;
  font-weight: bold;
  font-family: Arial, sans-serif;
  background-color: yellow;
  border: 3px solid black;
}

<a href="http://google.com" target="_blank">
  <span class="btn">Button</span>
  <p>
    A description goes here.
  </p>
</a>

score 0 · Answer 5 · answered Mar 02 '17 at 15:33

0

<div class="col-xs-6 col-md-6 center">
    <div class="thumbnail thumbnailBorder" style="display:inline-block">
        <div style="display: flex; justify-content: center;">
            <input type="button" value="button">
        </div>              
        <div>
            <a href="#"><span>This is just some text for StackOverflow</span></a>
        </div>
    </div>  
</div>

answered Mar 02 '17 at 15:33

acgrdumlu

64
7

Clicking your button won't take the user anywhere. – hungerstar Mar 02 '17 at 15:35

Make link adjustable to content

5 Answers5