Diagonal Banner

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

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!

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!

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

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!)

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

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.