Diagonal Banner

[luckylukz]

i am looking to get a diagonal banner like this on my site:

http://www.digitalmastery.com/

Like it says Vista Bens Blog

Can someone point me to a tutorial or something

Thanks

[jamesbowers]

ok i put a quick little tutorial together for you, i'm assuming you have basic knowledge of tables and images and backgrounds, if not then you should learn these ropes before attempting a website, here it is:



Hope this helps, if you're still stuck, just ask!

[snow]

hmm, you can do that without much complexity if you just save the image of your corner banner with a transparent background...

Then you can just add it to an image in the body of your site, and add the css:

Code: Select all

.cornerImage {position:absolute;
                    right:0;
                    top:0;}

I've not tested it, so I'm not sure how well it'll work - but something along those lines anyway!

[jamesbowers]

i only suggested my method, because when i used transparent images like that before on my website, it didn't display correctly in internet explorer - it had a greyish background - but meh, i'm no pro so you're probably right lol

[snow]

yeah, it wouldn't in IE6 if you saved it as a png... there are fixes I think - but GIFs should work fine in IE6 anyway, that is, if you aren't too worried about the quality?

Perhaps this code would work better, by the by:
in the body have:
(underneath most of the HTML)
<div id="cornerImage"></div>

then, in the css:
#cornerImage {position:absolute;
right:0;
top:0;
background:transparent url("whatever");}

(this one isn't tested either sorry!)

[Ryan Fait]

The grayish background was probably because you saved it in PNG24 format. IE doesn't support that. GIFs will work fine.

[jamesbowers]

hmm aren't both methods pretty much as easy as each other? I've personally never used your method, but mine isn't exactly hard either.