PDA

View Full Version : banner not centered


caro
Jan-24-2008, 08:01 AM
My back ground on my banner is supposed to be transparent and it shows up white. I also can't seem to get it centered. Can you help?

Allen
Jan-24-2008, 08:03 AM
My back ground on my banner is supposed to be transparent and it shows up white. I also can't seem to get it centered. Can you help? Got a link to your site?
Maybe this will help.


Here's some generic code. It creates a clickable banner on your pages.
Plug in your numbers and see if this works.

The header code (not head tag box) Clickable banner.

<div id="my_banner">
<a href="http://nickname.smugmug.com">
<img src="/img/spacer.gif" width="750" height="100" border="0" alt="">
</a></div>

Supporting CSS to define image and format banner using a transparent png

#my_banner {
width: 750px;
height: 100px;
margin: 0 auto;
background: url(/photos/xxxxxxxx-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true, sizingmethod=image, src='/photos/xxxxxxxx-O.png');
}

Make the spacer gif in the header html the same size as your banner, it's the clickable area.
Be sure to enter in the actual size of the banner photo.

If you're using a jpg instead of png replace above CSS with this.

#my_banner {
width: 750px;
height: 100px;
margin: 0 auto;
background: url(/photos/xxxxxxxx-O.jpg) no-repeat;
}

==== Here's another version generic code for a non-clickable banner. ====

The header code Non-Clickable banner using png.

<div id="my_banner"></div>

Supporting CSS to define image and format banner

#my_banner {
width: 750px;
height: 100px;
margin: 0 auto;
background: url(/photos/xxxxxxxx-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true, sizingmethod=image, src='/photos/xxxxxxxx-O.png');
}

===== Note: For a transparent banner create a png and use above code =====