Diagonal banner in corner

[©®]

I know they are (supposedly) old-hat, but I was thinking of adding a
corner diagonal banner (see
http://www.exploding-boy.com/images/banners/banners.html) to a website.

Now what would need to be done so the banner fits your corner of your
css layout and not extend to the edges of your screen. E.g. If you went
to the root of the above link (http://www.exploding-boy.com/) and had
the banner going over the top left hand (or right) corner where it says
"EXP" in exploding boy i.e. top L/R corners of the white box and *not*
the top L/R corners of the blue background. (Hope this makes sense!)
Thanks

 

[BlueC]

I know they are (supposedly) old-hat, but I was thinking of adding a
corner diagonal banner (see
http://www.exploding-boy.com/images/banners/banners.html) to a website.

Now what would need to be done so the banner fits your corner of your
css layout and not extend to the edges of your screen. E.g. If you went
to the root of the above link (http://www.exploding-boy.com/) and had
the banner going over the top left hand (or right) corner where it says
"EXP" in exploding boy i.e. top L/R corners of the white box and *not*
the top L/R corners of the blue background. (Hope this makes sense!)
Thanks

Put it inside the containing div and use

position: relative;

instead of

position: absolute;

perhaps?

http://www.w3schools.com/css/pr_class_position.asp

 

[Els]

I know they are (supposedly) old-hat, but I was thinking of adding a
corner diagonal banner (see
http://www.exploding-boy.com/images/banners/banners.html) to a website.

Now what would need to be done so the banner fits your corner of your
css layout and not extend to the edges of your screen. E.g. If you went
to the root of the above link (http://www.exploding-boy.com/) and had
the banner going over the top left hand (or right) corner where it says
"EXP" in exploding boy i.e. top L/R corners of the white box and *not*
the top L/R corners of the blue background. (Hope this makes sense!)

Just place the element inside div#page and give it position:absolute.
That #page is the white box, and it already has position:relative.
If you want the banner to cover the contents of div#page (#header for
instance), then place it right before the closing </div> of div#page.

 

[Website Ribbon]

Try this free and simple website ribbon diagonal banner generator that generates a diagonal banner at the corner of a web page:
websiteribbon.com