Hey guys -

I put in a custom graphic banner and then followed the tutorial to make it link to my galleries page. For some reason once I added the code to turn the banner into a link, it made it extremely buggy. It would load slow sometimes, or in the wrong position, or just not load at all!

What's the code I should add to my CSS to get the "superclearyphoto" image to link to my galleries page?

Here's where I want it to link to: http://superclearyphoto.smugmug.com/galleries

To fix stability I've pulled all the additional code out, so the image currently does not link.

Thanks!


===================

#my_banner {
width: 220px;
height: 25px;
margin: 15px 0 0 20px; /* top R bottom L */
background: url(http://superclearyphoto.smugmug.com/...-vT3cNNj-O.png) no-repeat;
_background: none;
_filter:progidXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://superclearyphoto.smugmug.com/photos/i-vT3cNNj/0/L/i-vT3cNNj-O.png');
}

Change that chunk of CSS to:

 #my_banner {
width: 220px;
height: 25px;
margin: 15px 0 0 20px; /* top R bottom L */
}

Change your HTML to:

 <div id="my_banner">
    <a href="http://superclearyphoto.smugmug.com/galleries">
        <img src="http://superclearyphoto.smugmug.com/photos/i-vT3cNNj/0/L/i-vT3cNNj-O.png" />
    </a>
</div>

THANK YOU wise smugmug guru

If you want to get rid of the outline that it has now, you can add this to your CSS:

 #my_banner img { border: none; }

Originally Posted by jhofker If you want to get rid of the outline that it has now, you can add this to your CSS: #my_banner img { border: none; }

Thanks! If I want to switch from text based navbar buttons to image navbar buttons what would I have to switch around?

Originally Posted by SuperCleary Thanks! If I want to switch from text based navbar buttons to image navbar buttons what would I have to switch around?

Whoops.... and now I've made a mess of it. I just dumped the img src into the text instead. The size/format is totally out of whack now.


/* navbar start */

#navcontainer ul {
margin: 15px 0 0 20px;
padding: 0;
list-style-type: none;
text-align: right;
}

#navcontainer {
float: right;
margin: 15px 0 20px auto; /* top R bottom L */
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
font-family: Arial;
background-color: #000000;
font-weight: bold;
color: #ffffff;
text-decoration: none;
word-spacing: normal;
text-align: right;
letter-spacing: 0;
line-height: 1.5em;
font-size: 1.3em;
padding: .2em 1em;
;
}

#navcontainer ul li a:hover {
color: #fff;
background-color: #404040;
}

/* navbar end */

Cancel that, figured out another way of going about it