CODEWITHSUNDEEP
htmlcsssass
AlexGH
AlexGH

Reputation: 2805

Make link <a></a> adjustable to content

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?

enter image description here

enter image description here

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

.thumbnailBorder{
    border:none;
}

Upvotes: 0

Views: 77

Answers (5)

bowheart
bowheart

Reputation: 4676

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.

Upvotes: 1

acgrdumlu
acgrdumlu

Reputation: 64

<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>

Upvotes: 0

hungerstar
hungerstar

Reputation: 21725

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>

Upvotes: 0

Leon Freire
Leon Freire

Reputation: 818

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>

Upvotes: 1

Harvey Fletcher
Harvey Fletcher

Reputation: 1172

<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.

Upvotes: 1

Related Questions