How to make an image clickable after I've rammed it into my navbar?

[Chalky]

So where do I put it then?  Sorry, I'm only a wannabe hack and not a very good one 

[ARG01]

Okay, I have been gone all day and this is still going? That's it! In the next day or two I will post a detailed tut on how to add social icons/clickable images to any theme. 

[Crip]

ChalkCat ,

I was looking at this: you could add that button/icon + most anywhere besides the Menu....?

   I'm talking Header?/Footer/Above Header with a single #twitter Div>> in the .css..at-leasettt it would wok ..?
• Only a suggestion friend.

Like::??:::
even above Search?

[ARG01]

Yes, it is actually a bit easier to place optional images anywhere besides the toolbar. For some reason it takes more work to add them to the toolbar. Putting things in a wrapper also helps.

[Crip]

totally correct Mister ARG   Lol..

[Crip]

i got it peeps via <span>  tags  </span>
......and it do CLICK
------------------------------------------

[Chalky]

Oh wow, oh wow, oh wow!  That's what I want!  Thanks Crip    Do those span tags replace the div tags I've been using until now?

[Crip]

i removed the <div s and just added <span>  </span>
---------- with FB ..
PM sent

Update:
via FB i removed the <li class="button_twitter"></li>
----
and put:;

Code Select Expand

<span><a href="http://Twitter.com/ChalkCat" class=""><div class="floatright"><img alt="" src="http://parsleymonster.net/smf/Themes/Actualism/images/Twitter.png"></div></a>
</span>


[Crip]

Oh wow, oh wow, oh wow!  That's what I want!  Thanks Crip    Do those span tags replace the div tags I've been using until now?

Forget <span tags >
See:
http://www.jpr62.com/demos/index.php?theme=10

[TheListener]

Oh wow, oh wow, oh wow!

Calm down dear it's only a forum.

[ARG01]

Oh wow, oh wow, oh wow!

Calm down dear it's only a forum.

Sometimes excitement gets the best of us. 

[Chalky]

Right, so copying from Crip's demo site best I can using Firebug, I now have this:

Code (index.template.php) Select Expand

<div id="topnav">
<div id="link2"><ul><li><a class="twitter" target="_blank" title="Follow ChalkCat on Twitter" href="http://www.twitter.com/ChalkCat"></a></li></ul></div>
<ul>';

Code (css) Select Expand

#link2 {
    float: right;
    padding: 5px 10px 0px;
}
a.twitter:hover {
      float: right;
      height: 32px;
      width: 32px;
      background: url("../images/Twitter.png") no-repeat scroll 0% 0% transparent;
}

but nothing is showing up.  I know it's because I'm thick but what have I done wrong???

[French]

but nothing is showing up.  I know it's because I'm thick but what have I done wrong???

No you didn't

[Chalky]

Thanks French but that's the wrong site    I made do with shoving a button in the linktree on ChalkCat yesterday which is what you can see, but I'm still trying to put it in the navbar.  The site I'm working with is http://parsleymonster.net/smf - not showing there 

[Chalky]

Ok, we have progress!!!   I changed it from a.twitter:hover { to a.twitter { and now it's showing and clickable - w00t!

Problem now is that when you roll the mouse over it it's been treated like a navbar button and highlights obscuring the twitter button.  Any ideas how I fix this?

[kat]

<img alt=



(Pure guess)

[NanoSector]

<img alt=



(Pure guess)

The alt parameter is for when the image could not be found, it displays the text in the alt.
If you're certain the image exists you can put alt="" in to comply with the XHTML standard.

But, in this case, it won't affect the displaying of the button.

[Chalky]

Thanks K@ just tried it in the index.template.php but no bananas, though the image is specified in the css...  I don't know how to put it there though.  My css now looks like this:

Code Select Expand

/*Twitter button*/
#link2 {
    float: right;
    padding: 5px 10px 0px;
}
#link2 li a {
    display: inline-block;
    padding-right: 10px;
}
#link2 li {
    float: left;
    list-style: none outside none;
    padding: 0;
}
a.twitter {
      float: right;
      height: 32px;
      width: 32px;
      background: url("http://parsleymonster.net/smf/Themes/Actualism/images/Twitter.png") no-repeat scroll 0% 0% transparent;
}

Ah cheers Yoshi.  All I can see is that on Crip's site, hovering over the thing doesn't change the css it's using, but on mine it skips to the topnav hover stuff as soon as my mouse goes near it.  I don't know how much more beating from my head this table can stand...

[Chalky]

Got there!!!!!!!  Huge thank you to Crip!!!  I needed to include both a.twitter and a.twitter:hover, and now it's perfect!  I just need to finalise my choice of button now 

[kat]

I was close.

Cosmically speaking, anyway!

Well sorted, your royal Chalkiness!