Blog Documentation Book a Demo
Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

CSS Links - Solved

WandererWanderer
edited April 2007 in Vanilla 1.0 Help
I know you can style links using CSS but can you create a link using CSS?

For example, we can place an image to the left of a heading...

Heading

...but can we make the image clickable?

Posted: Monday, 2 April 2007 at 9:11AM

«1

Comments

  • GauzyGauzy
    as far as i know, no. css is only supposed to be used for presentation, not structure or markup.

    that being said - there is the descriptor "content" which will let you add some content into the page via css (though i'm not sure if this would work for you)

    if the image is supposed to link to the same place as the heading, why not just include the image within the tags? ie:

    imageHeading

  • WandererWanderer
    I wish it was that simple!

    Posted: Monday, 2 April 2007 at 9:57AM

  • GauzyGauzy
    can you give me a code example?
  • WandererWanderer
    No special code.

    I have added icons to my categories and I want them to be clickable.

    From a user perspective, clicking the icon is the first inclination so it's a bit annoying when nothing happens.

    Posted: Monday, 2 April 2007 at 10:34AM

  • bjrnbjrn
    edited April 2007
    content won't allow you to add new markup, it'll only allow you to add displayed text, as far as I know. So h1:before { content: '<a href="http://example.com/">Link</a>'} would just result in you getting <a href="http://example.com/">Link</a> added before your h1 element contents (in plain text).

    Also, it wouldn't surprise me if there is little or no support for the content rule in IE.
  • GauzyGauzy
    @bjrn - thanks for the clarification, i've never played around much with content, so i'm a bit unsure.

    @Wanderer -

    you might try doing something like this in the CSS:

    ol#Categories li#Category_4 a { background: url(categoryicon.gif) left top no-repeat; padding-left: 32px; }

    repeat that as needed for the other categories. then just match up the appropriate category IDs with the right images, and it should be okay, i think. this way, the image is technically part of the background to the link itself, and should be clickable.

    that code might not be perfect, i'm a little sleepy, but you get the idea.
  • WandererWanderer
    Thanks Gauzy, that has potential but it needs work, for example, the category options took on the icon too.

    I'll keep working on it.

    Posted: Monday, 2 April 2007 at 3:46PM

  • Mr DoMr Do
    edited April 2007
    why dont you use <img src="bla" /> as part of the category name? or some such nice hack :)
  • jimwjimw
    @Wanderer: Did you try the CategoryIcons add-on?
  • GauzyGauzy
    @jimw - category icons only has clickable icons on the discussion list, not the category list
  • jimwjimw
    edited April 2007
    You are missing the img end tag /.

    edit: @Wanderer: This was for you. I looked at your site and saw that.
  • GauzyGauzy
    oh, really? i'll have to check it out again, i remember using it as a base for some category icons of my own, if they now link to the actual categories that'd be pretty swell
  • WallPhoneWallPhone
    What you want to do is set the background of the existing link to be the desired icon. You can add extra padding to the bottom of the link, then position the icon inside that paedding.

    Give this a shot: (add it to your existing stylesheet--and remove the existing category4 reference to the same icon)

    #CategoryPage #Category_4 .CategoryName a { padding-bottom: 45px; background: url('icons/cat.podcast.gif') 0 20px no-repeat; }

    Only downside would be if someone increases the font size above 20 px, then it will overlap the icon... In retrospect if you use ems instead of px that would fix it.
  • WallPhoneWallPhone
    Oh, you might have to set this in the same css block to make it rise above the category description:position: relative; z-index: 4;
  • WandererWanderer
    Quote: jimw
    pic Did you try the CategoryIcons add-on? pic
    Yes Jim I did, I had trouble getting the placement the way I wanted it, so I decided to cook my own extension.
    Quote: jimw
    pic You are missing the img end tag /.
    edit: @Wanderer: This was for you. I looked at your site and saw that. pic
    Not sure where you mean Jim, I never use the </img> tag, didn't think it was needed, certainly my web app doesn't put them in.

    Posted: Tuesday, 3 April 2007 at 7:35AM

  • jimwjimw
    @Wanderer: Looks like you have it working for your 1st category.
  • WandererWanderer
    Yes jimw they are all working on the Categories page.

    However, although I tweaked WallPhone's method to get it to look right, on the Discussions page the icons don't link... yet.

    Posted: Tuesday, 3 April 2007 at 8:33AM

  • WandererWanderer
    Thanks to all the clever people who contributed little snippets of CSS to help me make my icons clickable.

    At one stage, I thought it was working, I had the icon appearing twice on top of itself, once for the categories page and again for the Discussion Overview. I never thought I'd thank IE but it, of course, rendered the icons offset by a couple of pixels and they looked ugly so I went back to the drawing board with a fresh approach.

    I have put the jigsaw pieces together and with lots of problem-solving, tenacity and some sheer luck I have managed to unravel the puzzle and made it work.

    Thanks again peeples. pic

    Posted: Tuesday, 3 April 2007 at 3:37PM

  • GauzyGauzy
    woo!

    only thing that would annoy me is that some areas that are not part of the icon/link are also clickable, which would drive me bonkers
  • WandererWanderer
    I purposely made the area a little bigger because the icons are so small.

    If you are referring to the extra width, the clickable width is actually the width of the category title, that's where the <a> tag lives so I didn't have much choice, other than shortening the category title name.

    If you live in New York, I think the trip to Bonkers is a short one. pic

    Posted: Tuesday, 3 April 2007 at 4:07PM

This discussion has been closed.