Image links in sidebar

  • Resolved Flameblade

    (@flameblade)


    13 years, 4 months ago

    I am attempting to put social network icons into my sidebar, and have them link to various sites. I have attempted to use the Abitrary Text widget to add the html for the image

    <a href="LINK">
<img src="IMAGE.EXT" border="0" />
</a>

    This works, sort of. Instead of making the link exclusive to the dimensions of the image, it creates a box around the image that spans the entire sidebar horizontally, which leads to problems adding more icons.

    http://www.redhotkicks.net/
    Like so.

    How can I stop it from doing this and make the link box only around the image?

Viewing 6 replies - 1 through 6 (of 6 total)
  • dremeda

    (@dremeda)

    13 years, 4 months ago

    Hi there,

    It would be helpful to see the issue so if you can provide a link to the site we’d appreciate it.

    Cheers,
    Dre

    Thread Starter Flameblade

    (@flameblade)

    13 years, 4 months ago

    Added

    dremeda

    (@dremeda)

    13 years, 4 months ago

    Hi there,

    It looks like you’ve set the width of your sidebar anchors to 200px:

    #sidebar a, #sidebar a:visited{
display: block;
padding: 7px 0;
width: 200px;
font: 9pt "verdana", arial, helvetica, sans-serif;
text-decoration: none;
text-indent: 10px;
color: #fe5e00;background:#111111;
}

    Try removing the width declaration to see if it fixes it:

    #sidebar a, #sidebar a:visited{
display: block;
padding: 7px 0;
font: 9pt "verdana", arial, helvetica, sans-serif;
text-decoration: none;
text-indent: 10px;
color: #fe5e00;background:#111111;
}

    Cheers,
    Dre

    Thread Starter Flameblade

    (@flameblade)

    13 years, 4 months ago

    That didn’t seem to do anything.

    dremeda

    (@dremeda)

    13 years, 4 months ago

    You can try adding a class to the HTML you’ve added in the widget:

    <a class="socicons" href="LINK">
<img src="IMAGE.EXT" border="0" />
</a>

    Then add the appropriate selector in your CSS:

    #sidebar a.socicons {width: 32px;}

    This gives you better control of the specific anchor and not all of the anchors in the sidebar.

    Cheers!

    Thread Starter Flameblade

    (@flameblade)

    13 years, 4 months ago

    That didn’t work, but strangely, changing the class width to 0px seems to have worked perfectly. Thank you for pointing me in the right direction.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Image links in sidebar’ is closed to new replies.