Twitter-Bootstrap: text underlining in the caption of a thumbnail

Question

Working with Bootstrap I wanted to make a replica of http://spring.io/projects; a grid of links that are each a bordered panel (might not be the right word...) with some words an a picture inside. I've come to a conclusion, that Bootstrap's Thumbnail component should be right for me.

Having tried to use it, however, I ran into a problem.

If I want the entire panel to be clickable, I have to apply the thumbnail class to an anchor tag (wrapping the anchor into a div with thumbnail doesn't seem to work). Then, inside the anchor tag I've got a div tag with the class caption in it to store some text whose styling I don't want to change upon hovering on the panel.

What this caused is this: the text regained normal colour (as compared to the link colour when used without the caption class, however hovering over the panel causes the text to get underlined, and I'd prefer if that was not the case: it doesn't look very good and the highlight of the border upon hover is already a good indicator of that it is indeed a link.

I was about to just get my css hat out and modify the caption class to not do this, but it doesn't seem like the right course of action; I can't imagine it being desirable behavior for captions to get highlighted like this, and I'd like to use as little custom code as possible (since sticking to standards means I won't have to maintain this code every time I update bootstrap).

So my question is: where am I going wrong? Is it actually bad practice to want the entire thumbnail panel to work as a link? Or should I go ahead and manually scrape the underlining off? Or am I maybe applying wrong classes to wrong tags? Or is the thumbnail component not a right component for me to use altogether in such a case?

EDIT:

Forgot to include the code.

The thing I'm currently using:

<a class="thumbnail text-center" href="#">
    <div class="caption">
        <h3>Potato</h3>
        <p>Some short description of what this exact potato really is about.</p>
    </div>
</a>

EDIT 2:

Adding an image of what is currently occurring:

This is with the mouse hovering over it; as you can see, the text is underlined, which is not ideal.

Without seeing your actual markup it is hard to say anything, but at least you have a plan B that is to use javascript or JQuery if you don't mind to make the whole div/thumbnail clickable. — Godinall, Apr 22 '14 at 14:51
I wouldn't use Jquery or Javascript to just to accomplish a link. My approach coming soon in the answer section... — Fizor, Apr 22 '14 at 14:57
@Godinall I actually want the whole thumbnail clickable; I essentially want the whole thing to be a link, but I don't want the text in the caption of the thumbnail to get styled as a link (since it is a caption I don't think it makes sense) — Domas Poliakas, Apr 22 '14 at 15:24
Also sorry, forgot to add the markup. I added the core of what I'm trying to do (without the image, but it should be clear enough of what I'm trying to achieve). — Domas Poliakas, Apr 22 '14 at 15:41

score 1 · Accepted Answer · edited Apr 23 '14 at 08:24

1

Really weird that you ask this question because I just read a thread on this not so long ago and still have my solution which I have turned into a FIDDLE for you.

If I understand your question correctly, you want the entire panel / div to be a link, which can be accomplished like this: (This is the OP's steps, cant remember them word for word)

Make your Div position: Relative;
create a link <a href="#"></a>
put span tags into that link <span></span>
Style the empty span tag with

CSS:

{ 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;

  /* edit: added z-index */
  z-index: 1;

  /* edit: fixes overlap error in IE7/8, 
     make sure you have an empty gif */
  background-image: url('empty.gif');
}

I think that's all there is to it. Like I said... There is a thread somewhere on this, but I cant remember what it was called.

Hope this can help.

EDIT: So after a long debate, we can forget about the above AND we came to the conclusion that this is possibly what you are after? :)

Add a tiny bit more CSS to your solution and you are sorted...

a.thumbnail:link {
text-decoration:none;
cursor:pointer;
}

Here is an updated fiddle

edited Apr 23 '14 at 08:24

Domas Poliakas

836
6
19

answered Apr 22 '14 at 15:05

Fizor

1,480
1
16
31

So if I understand this correct, the idea behind this is that you put an invisible image as a background for the link and then change it's position to occuppy the entiry div and bring it to front, is that correct? It doesn't seem like a very elegant solution; one of the biggest advantages to bootstrap is the ease of changing the layout and counting on bootstrap to do the sizing of the components, etc. and it seems like this could cause maintenance headaches when trying to maintain it for differently sized viewports. – Domas Poliakas Apr 22 '14 at 15:39
@DomasPoliakas, I managed to find the other Thread (http://stackoverflow.com/questions/796087/make-a-div-into-a-link) .. I think this is one of the most elegant solutions you will find according to the OP. I think the background image is only an IE fix. Also, this allows for other links within the DIV at the same time. Anyway, use it or don't use it, I just thought I would share it with you :) Touching on the maintainability, the `span` tag you add uses `%`, so this should resize with whatever Bootstrap does. – Fizor Apr 22 '14 at 16:10
added a link to the div with a separate link - how cool is that :) http://jsfiddle.net/aqKn5/12/ – Fizor Apr 22 '14 at 16:13
Ohh, right, my bad. I filtered out the comments when I was summarising what I thought your code did. Derp. Yeah, without the image thing the solution looks great. I'll try it out and accept if it works okay. Thanks! – Domas Poliakas Apr 22 '14 at 16:13
Unfortunately, when doing this the whole thumbnail no longer responds to getting hovered over (normally hovering over it highlights the border). It seems to only be responsive when the thumbnail class is applied to an anchor tag. – Domas Poliakas Apr 22 '14 at 16:24
so you need the entire DIVs border to highlight OR just the image ? – Fizor Apr 22 '14 at 16:31
I think I might've made the question sound more complicated than it actually was: I simply don't want the text to get underlined in the caption of `` when I hover over it, and I wanted to see what the right way of doing it could be. It seemed strange to me that while the colour is changed, the underlining is not for the text in the caption, so I wasn't sure if I wasn't doing anything wrong before I did what I had in mind - setting `text-decoration:none` on the `` tag. – Domas Poliakas Apr 22 '14 at 16:35
@DomasPoliakas - ahh, why didn't you say so :) Is this what you are after http://jsfiddle.net/aqKn5/13/ – Fizor Apr 22 '14 at 16:43
Yeah, it seems to work. I'm just going to edit your answer to change `a:link` to `a.thumbnail:link`, since I don't want all links on the page to change. – Domas Poliakas Apr 23 '14 at 08:22

score 0 · Answer 2 · answered Jan 22 '17 at 16:41

0

The solution is to add on the top of your style sheet:

    a:hover {
      text-decoration: none;
    }

answered Jan 22 '17 at 16:41

George Crisan

177
1
8

Twitter-Bootstrap: text underlining in the caption of a thumbnail

2 Answers2