Diagonal banner in corner

Discussion in 'HTML' started by ©®, Jul 20, 2006.

  1. ©®

    ©® Guest

    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
     
    ©®, Jul 20, 2006
    #1
    1. Advertising

  2. ©®

    BlueC Guest

    ©® wrote:
    > 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

    --
    BC
     
    BlueC, Jul 20, 2006
    #2
    1. Advertising

  3. ©®

    Els Guest

    ©® wrote:

    > 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.


    --
    Els http://locusmeus.com/
     
    Els, Jul 20, 2006
    #3
  4. ©®

    Website Ribbon

    Joined:
    Mar 13, 2009
    Messages:
    1
    Try this free and simple website ribbon diagonal banner generator that generates a diagonal banner at the corner of a web page:
    websiteribbon.com
     
    Website Ribbon, Mar 13, 2009
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. csgraham74
    Replies:
    2
    Views:
    408
    csgraham74
    Aug 11, 2005
  2. Xah Lee
    Replies:
    9
    Views:
    356
    John Bokma
    Jul 19, 2005
  3. Xah Lee
    Replies:
    0
    Views:
    354
    Xah Lee
    Nov 24, 2005
  4. moondaddy

    How to make a diagonal gradient

    moondaddy, Mar 10, 2007, in forum: ASP .Net
    Replies:
    2
    Views:
    3,254
    moondaddy
    Mar 11, 2007
  5. moondaddy

    How do I do a diagonal Gradient

    moondaddy, May 16, 2007, in forum: ASP .Net
    Replies:
    2
    Views:
    694
    vcuankitdotnet
    May 16, 2007
Loading...

Share This Page