myspace civilized
phidias showing frieze of parthenon to his friends
Wednesday, March 14, 2007
linkable image banner
customizing banners (or mastheads) is one of the more popular themes around here. the code below allows you to add your own linkable banner image. it also has the advantage of simplifying previous examples.

you can see a demo at the new sonnetmonkey myspace page

here's the code (parts you'll want to edit in bold -- your values will obviously depend on the dimensions of your image -- this is for an 200x800 img):

<style type="text/css">

START { YOUR BANNER - below myspace masthead }

NOTE { left margin should be half the width and negative }
.my_banner
{
width: 800px; margin-left: -400px;
height: 200px;
position: absolute; left: 50%; top: 164px;
overflow:hidden;
}


NOTE { make room for the banner by padding top of profile table }
NOTE { if your banner is getting cut off increase this }
body table table td {padding-top:210px;}

DNA { control side effects }
div table table td {padding-top:0px;}
body table table table td {padding-top:4px;}

END { YOUR BANNER }

</style>


<a class="my_banner" href="LINK_URL_HERE"><img src="IMG_URL_HERE" alt="my banner" border="0"></a>


don't forget that last part -- the <a> <img> tags are the actual code that display the banner. the rest just moves it into position.

if you have a question, try my new moshi wiki page

Labels:

» add your own comment