Ok how the hell was this done:

Discussion in 'HTML' started by Steve, Feb 27, 2004.

  1. Steve

    Steve Guest

    Hi guys,

    Basically I want to float a graphic in the bottom right hand corner of a
    page that already has a background graphic. Some kind person made it work
    for me last time, but they never explained to me how they did it. The page
    is:

    http://www.designred.co.uk/nextup/homepage.htm

    See how the 8ball graphic stays in the bottom right?

    Now I just *cannot* reproduce that effect! I know it's done in .css and from
    pulling it all apart I can see that basically it's a div set to 100% of
    browser width and height and the graphic set to bottom right. But if I try
    and recreate the effect, I can never get the graphic to stay at the bottom
    of my browser!! I spent an hour and a half trying and I'm damned if I know
    the answer! By the way, I'm using dreamweaver, but not afraid to get my
    hands dirty with a text editor... Any ideas?!!

    Cheers,

    Steve M.
    Steve, Feb 27, 2004
    #1
    1. Advertising

  2. Steve

    John McGaw Guest

    "Steve" <> wrote in message
    news:403f8011$0$18714$...
    > Hi guys,
    >
    > Basically I want to float a graphic in the bottom right hand corner of a
    > page that already has a background graphic. Some kind person made it work
    > for me last time, but they never explained to me how they did it. The page
    > is:
    >
    > http://www.designred.co.uk/nextup/homepage.htm
    >
    > See how the 8ball graphic stays in the bottom right?
    >
    > Now I just *cannot* reproduce that effect! I know it's done in .css and

    from
    > pulling it all apart I can see that basically it's a div set to 100% of
    > browser width and height and the graphic set to bottom right. But if I try
    > and recreate the effect, I can never get the graphic to stay at the bottom
    > of my browser!! I spent an hour and a half trying and I'm damned if I know
    > the answer! By the way, I'm using dreamweaver, but not afraid to get my
    > hands dirty with a text editor... Any ideas?!!
    >
    > Cheers,
    >
    > Steve M.
    >
    >


    What is there to figure out? Looking at the source, the following jumped out
    at me immediately:

    background-attachment: fixed;
    background-image: url(../Misc/New%20Folder/images/8ball.jpg);
    background-repeat: no-repeat;
    background-position: right bottom;

    This is part of the CSS definition of the body element.
    --
    John McGaw
    [Knoxville, TN, USA]
    http://johnmcgaw.com
    John McGaw, Feb 27, 2004
    #2
    1. Advertising

  3. Steve

    Steve Guest

    indeed, but if i paste that into my new .css document and apply it to my
    div, it no longer sticks to the bottom of the browser window! very annoying!

    S.


    > What is there to figure out? Looking at the source, the following jumped

    out
    > at me immediately:
    >
    > background-attachment: fixed;
    > background-image: url(../Misc/New%20Folder/images/8ball.jpg);
    > background-repeat: no-repeat;
    > background-position: right bottom;
    >
    > This is part of the CSS definition of the body element.
    > --
    > John McGaw
    > [Knoxville, TN, USA]
    > http://johnmcgaw.com
    >
    >
    Steve, Feb 27, 2004
    #3
  4. Steve

    Steve Guest

    in fact, here is what my attempt looks like:

    http://www.designred.co.uk/test/test.htm

    see a thin sliver of the graphic stuck at the top of the screen, rather than
    at the bottom right?

    HELP!!! Arrrrgghgh!

    S.
    Steve, Feb 27, 2004
    #4
  5. Steve

    John McGaw Guest

    "Steve" <> wrote in message
    news:403f92d7$0$40740$...
    > in fact, here is what my attempt looks like:
    >
    > http://www.designred.co.uk/test/test.htm
    >
    > see a thin sliver of the graphic stuck at the top of the screen, rather

    than
    > at the bottom right?
    >
    > HELP!!! Arrrrgghgh!
    >
    > S.
    >

    I've looked at your sample and the CSS is nothing at all like what appears
    in the "good" example. The definition in that is:

    body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-attachment: fixed;
    background-image: url(../Misc/New%20Folder/images/8ball.jpg);
    background-repeat: no-repeat;
    background-position: right bottom;
    }

    While that in your sample is:

    body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    }

    Note the total lack of all the background stuff in yours. Or am I missing
    something else major?

    Before I forget, you did notice that you had embedded the body CSS in the
    HTML and that this would have precedence over any external CSS file's
    contents?
    --
    John McGaw
    [Knoxville, TN, USA]
    http://johnmcgaw.com

    >
    >
    John McGaw, Feb 27, 2004
    #5
  6. Steve

    SpaceGirl Guest

    "John McGaw" <> wrote in message
    news:%OM%b.57$...
    > "Steve" <> wrote in message
    > news:403f92d7$0$40740$...
    > > in fact, here is what my attempt looks like:
    > >
    > > http://www.designred.co.uk/test/test.htm
    > >
    > > see a thin sliver of the graphic stuck at the top of the screen, rather

    > than
    > > at the bottom right?
    > >
    > > HELP!!! Arrrrgghgh!
    > >
    > > S.
    > >

    > I've looked at your sample and the CSS is nothing at all like what appears
    > in the "good" example. The definition in that is:
    >
    > body {
    > margin-left: 0px;
    > margin-top: 0px;
    > margin-right: 0px;
    > margin-bottom: 0px;
    > background-attachment: fixed;
    > background-image: url(../Misc/New%20Folder/images/8ball.jpg);
    > background-repeat: no-repeat;
    > background-position: right bottom;
    > }
    >
    > While that in your sample is:
    >
    > body {
    > margin-left: 0px;
    > margin-top: 0px;
    > margin-right: 0px;
    > }
    >
    > Note the total lack of all the background stuff in yours. Or am I missing
    > something else major?
    >
    > Before I forget, you did notice that you had embedded the body CSS in the
    > HTML and that this would have precedence over any external CSS file's
    > contents?
    > --
    > John McGaw
    > [Knoxville, TN, USA]
    > http://johnmcgaw.com


    people always seem to forget the "cascading" bit of Cascading Style Sheets
    :)
    SpaceGirl, Feb 27, 2004
    #6
  7. Steve

    Steve Guest

    Oh dear! Thanks John, I hadn't even realised I was doing that - it *has* to
    be at the root of my problems! I will go and investigate!

    Steve


    > Before I forget, you did notice that you had embedded the body CSS in the
    > HTML and that this would have precedence over any external CSS file's
    > contents?
    > --
    > John McGaw
    > [Knoxville, TN, USA]
    > http://johnmcgaw.com
    Steve, Feb 27, 2004
    #7
  8. Steve

    Whitecrest Guest

    In article <%OM%b.57$>,
    says...
    > I've looked at your sample and the CSS is nothing at all like what appears
    > in the "good" example. The definition in that is:
    >
    > body {
    > margin-left: 0px;
    > margin-top: 0px;
    > margin-right: 0px;
    > margin-bottom: 0px;
    > background-attachment: fixed;
    > background-image: url(../Misc/New%20Folder/images/8ball.jpg);
    > background-repeat: no-repeat;
    > background-position: right bottom;
    > }
    >
    > While that in your sample is:
    >
    > body {
    > margin-left: 0px;
    > margin-top: 0px;
    > margin-right: 0px;
    > }
    >
    > Note the total lack of all the background stuff in yours. Or am I missing
    > something else major?


    This has to be the the best response I have ready in a long long while.
    To the point, and with humor attached.

    Excellent.

    --
    Whitecrest Entertainment
    www.whitecrestent.com
    Whitecrest, Feb 27, 2004
    #8
  9. Steve

    Steve Guest

    Goddamnit it worked! John, I can't express enough thanks for you taking the
    time to look over my code - you could well have just saved my sanity, and
    you certainly just made my weekend! Turns out I didn't know as much about
    ..css as I liked to think! lol

    Steve
    Steve, Feb 27, 2004
    #9
  10. Steve

    Steve Guest

    Steve, Feb 27, 2004
    #10
  11. Steve

    Whitecrest Guest

    In article <403fb6a1$0$41802$>, luckylucky200
    @hotmail.com says...
    > Here's how it finally looked, thanks!
    > www.designred.co.uk/k2go


    Are you using Flash or Swish? The reason I ask is the text tweens in
    your flash object looks like everyone elses that uses Swish.

    Just something to think about.

    --
    Whitecrest Entertainment
    www.whitecrestent.com
    Whitecrest, Feb 27, 2004
    #11
  12. Steve

    Steve Guest

    thanks for the advice - it's actually done in Flash, and while I know
    exactly what you mean about the swish like effect, it just seems so apt for
    the Kitchens being assembled, that I decided to go with it...

    s.
    Steve, Feb 27, 2004
    #12
  13. Steve

    John McGaw Guest

    "Steve" <> wrote in message
    news:403facdd$0$41785$...
    > Goddamnit it worked! John, I can't express enough thanks for you taking

    the
    > time to look over my code - you could well have just saved my sanity, and
    > you certainly just made my weekend! Turns out I didn't know as much about
    > .css as I liked to think! lol
    >
    > Steve
    >

    Sanity is not all it's cracked up to be...

    --
    John McGaw
    [Knoxville, TN, USA]
    http://johnmcgaw.com
    John McGaw, Feb 28, 2004
    #13
    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. Allan Wong

    DLL Hell in .NET

    Allan Wong, Sep 25, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    2,737
    Mark Kamoski
    Sep 25, 2003
  2. Talon

    Circle Hell

    Talon, Sep 4, 2003, in forum: Perl
    Replies:
    2
    Views:
    1,086
    Mark Carter
    Sep 4, 2003
  3. KathyB
    Replies:
    0
    Views:
    315
    KathyB
    Jul 23, 2003
  4. BeerBoy

    DLL Hell

    BeerBoy, Feb 23, 2004, in forum: ASP .Net
    Replies:
    8
    Views:
    505
    Kevin Spencer
    Feb 24, 2004
  5. Zhidian Du
    Replies:
    0
    Views:
    143
    Zhidian Du
    Feb 21, 2004
Loading...

Share This Page