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

[Chalky]

As you know I've barely a clue about coding.  It seems a simple enough task: I don't want to use my Twitter button anymore because it dumps cookies on my visitor's computers that I can't suppress, so I want to replace it with a simple image that links to my Twitter profile.

Here you can see the Twitter button I want to replace, though it's positioned and working perfectly http://chalkcat.com/index.php

First I tried simply replacing the Twitter button code between the <div style="float: right; margin: 6px 22px 0 0;"></div> which I had created for my working Twitter button with basic html:

Code Select Expand


<div style="float: right; margin: 6px 22px 0 0;"><a href="https://twitter.com/ChalkCat"><img src="http://chalkcat.com/Themes/Actualism/images/Twitter.png" alt="Twitter" /></a>
</div>


This gave me the image in the right place but it wasn't clickable, so I did some googling and the problem appears to be that the image is being treated as a background image and therefore not clickable.  After some more googling, copying and pasting, I changed the code to this:

Code Select Expand

<div style="float: right; margin: 6px 22px 0 0;"><a class="twitter" title="twitter" href="https://twitter.com/#!/ChalkCat" style="float: right; margin: 6px 22px 0 0;background: transparent url(http://chalkcat.com/Themes/Actualism/images/Twitter.png) no-repeat top right;height:32px;width:32px;" target="_blank" rel="nofollow me">
</div>

but the result is the same, as you can see on my test site here http://parsleymonster.net/smf/index.php

Other than trying to be lazy with inline CSS rather than defining the class in index.css, I can't see what I'm doing wrong.  Please can one of you clever people show me the way? 

[Mick.]

The first code works fine. My guess is the #toolbar in the css is acting up.

Just for giggles, let make something like this in the css? Add it above the #toolbar

Code Select Expand


#toolbar img a {
       cursor: pointer;
}


[Chalky]

Thanks Mick, I've just done that and I've put that first lot of code back in index.template.php, but still no bananas    I still have a pretty Twitter icon that I can't click on.  http://parsleymonster.net/smf/index.php

[Mick.]

After some thought, thats not going to work   Let do this....


In the CSS file

Code Select Expand


.twitter-icon a {
      float: right;
      margin: 6px 22px 0 0;
      background: url (../images/Twitter.png) no-repeat;
}



In index.template.php

Code Select Expand

<div class="twitter-icon">
      <a href="https://twitter.com/ChalkCat" title="Follow Me"></a>
        </div>

[Chalky]

Now the image has disappeared altogether 

[Mick.]

Now the image has disappeared altogether 

lol,  it may be because i dont know where the image resides...


Let do this...

Code Select Expand


.twitter-icon a {
      float: right;
      margin: 6px 22px 0 0;
      background: url ("http://chalkcat.com/Themes/Actualism/images/Twitter.png") no-repeat;
}


[Chalky]

Something weird is going on, no wonder I couldn't do this on my own    Still no sign of the image.  I am working with my test site at the moment which is parsleymonster.net/smf so I have to be careful I don't get muddled, but I have adjusted the image url to account for that and the image is at the place I'm pointing it to:

Code Select Expand

.twitter-icon a {
      float: right;
      margin: 6px 22px 0 0;
      background: url ("http://parsleymonster.net/smf/Themes/Actualism/images/Twitter.png") no-repeat;
}

[Mick.]

Ok the image may be hidden behind the toolbar. Let's bring it up front with a z-index.

Code Select Expand

.twitter-icon a {
      float: right;
      margin: 6px 22px 0 0;
      background-image: url("http://parsleymonster.net/smf/Themes/Actualism/images/Twitter.png") no-repeat;
      z-index: 100;
}

[Mick.]

Try this. I modified a bit.

Code Select Expand

.twitter-icon a {
      float: right;
      display: block;
      margin: 6px 22px 0 0;
      background-image: url("http://parsleymonster.net/smf/Themes/Actualism/images/Twitter.png") no-repeat;
      z-index: 1000;
}

[Chalky]

Thanks for your patience.  I've added the display:block and even tried the z-index at 999, still no little image to be seen.  I've checked and double checked what I'm doing every step of the way because I'm the queen of stupid mistakes, but I don't seem to be doing anything wrong    I'm wondering whether I rammed the div in the wrong place to start with, but it's in exactly the same place where my Twitter button has been working all this time.  I don't know whether it helps to see my index.template.php....

[Mick.]

I looked at the source of the forum and it seemed odd to see the twitter code "outside" of the #toolbar.

What if you move the

Code Select Expand

<div class="twitter-icon">
      <a href="https://twitter.com/ChalkCat" title="Follow Me"></a>
        </div>

Under the

Code Select Expand

<div id="toolbar"> ?

Like this:

Code Select Expand


<div id="toolbar">

<div class="twitter-icon">
      <a href="https://twitter.com/ChalkCat" title="Follow Me"></a>
        </div>


[Chalky]

Ok, just done that, sorry, no change.... 

[Mick.]

This should work now,.... it needed the image sizes 

Code Select Expand

.twitter-icon a {
      float: right;
      margin: 6px 22px 0 0;
      height: 32px;
      width: 32px;
      display: block;
      background: url("http://parsleymonster.net/smf/Themes/Actualism/images/Twitter.png") no-repeat;
      z-index: 999;
}

[Chalky]

Yay, the image has returned!!!   

It still isn't clickable though 

[Mick.]

Any reason why you have 2 #toolbars in your css?

Code Select Expand

#toolbar {
margin-top: 0;
padding: 0;
height: 40px;
background: #0a0a0a url(../images/art/navbg.png);
}


Code Select Expand

#toolbar {
margin-top: 0;
padding: 0;
height: 40px;
background: #0a0a0a url(../images/art/ACnavbg.png);
}

[Mick.]

It works fine on my test page. I think theres something screwy with the meny bar.

http://idesign360.com/community/index.php/page,page2354.html

[Chalky]

Any reason why you have 2 #toolbars in your css?

Code Select Expand

#toolbar {
margin-top: 0;
padding: 0;
height: 40px;
background: #0a0a0a url(../images/art/navbg.png);
}


Code Select Expand

#toolbar {
margin-top: 0;
padding: 0;
height: 40px;
background: #0a0a0a url(../images/art/ACnavbg.png);
}

I have no idea.  I've just downloaded the theme afresh to compare clean files and they're there as well.  It came with two 

It is looking like there's something skewy with my menu, I knew it shouldn't be this difficult.

[Mick.]

Leave it be then.


Quite frankly, im stumped. 

[Mick.]

Another way to test to see if the menu is the culprit is moving the icon above the menu. It will sit below the search bar.


add:

Code Select Expand

<div class="twitter-icon">
      <a href="https://twitter.com/ChalkCat" title="Follow Me"></a>
        </div>

Before:

Code Select Expand

<div id="logo">

[ARG01]

The ACnavbg.png image does not exists. I think this may have been an error during design. Try removing this from index.css as it may be canceling out the other.

Code Select Expand

#toolbar {
margin-top: 0;
padding: 0;
height: 40px;
background: #0a0a0a url(../images/art/ACnavbg.png);
}

There is really no reason to have two mentions of "#toolbar"