Hello and welcome to our community! Is this your first visit?
Register
Results 1 to 10 of 10

Thread: CSS Questions

  1. #1
    Fanatic Enthusiast Niall's Avatar

    Join Date
    Aug 2007
    Posts
    3,298

    CSS Questions

    Hi.

    1. I've got an image, man.png. I'd like to position this image at the very bottom of the page, regardless of page height. I've got:

    #man {
    background: url("images/man.png") right no-repeat;
    height:140px;
    }

    And in my HTML:

    <body>

    <div id="man"></div>

    This works just fine. Unfortunately, if the other content doesn't fill up the entire page, the man will sit just below my footer div instead of at the actual bottom of the screen. Any way to do this?
    Thanks in advance.

  2. #2
    Enthusiast

    Join Date
    Apr 2008
    Location
    Inside your animashunz having fun with Mr. default :D
    Posts
    2,078

    Re: CSS Questions

    I'm currently learning CSS so IDK if this will help. You can add a top margin to "Man" image.

    For Example: {margin-top: 8cm}

    It will bring it down to the bottom of the page, I think.

  3. #3
    Fresh Newbie
    Join Date
    Apr 2009
    Posts
    2

    Re: CSS Questions

    Are you trying to put the man at the bottom left corner of the page inside or outside the div? To me, you're sounding like you want it to go into the body. But I'm unsure. Elaborate a tad more, please.
    If one man believes in something apart from the rest, they call him a lunatic. When a group of people beleive something apart from the rest, they call it a religion.

  4. #4
    Fanatic Enthusiast Niall's Avatar

    Join Date
    Aug 2007
    Posts
    3,298

    Re: CSS Questions

    Sorry, reading over it it I'm not very clear.

    [tn=700:1eropin3]http://**********.com/img/1240156912.png[/tn:1eropin3]
    This is fine, the man's at the bottom of the content and the bottom of the page:

    [tn=700:1eropin3]http://**********.com/img/1240157082.png[/tn:1eropin3]
    This is what I can't get to work. The content's not big enough to have a scrollbar, and the man is at the bottom of the footer, not the page.

    Please excuse the somewhat poor design, it's early days
    Oh, welcome to the forums Alecdude.

  5. #5
    Enthusiast

    Join Date
    Apr 2008
    Location
    Inside your animashunz having fun with Mr. default :D
    Posts
    2,078

    Re: CSS Questions

    maybe make the man in a separate div?

  6. #6
    Fanatic Enthusiast Niall's Avatar

    Join Date
    Aug 2007
    Posts
    3,298

    Re: CSS Questions

    Quote Originally Posted by _An~Alien_
    maybe make the man in a separate div?
    He is.

  7. #7
    Veteran Enthusiast Yadda's Avatar


    Join Date
    Mar 2006
    Location
    Ontario
    Posts
    7,862

    Re: CSS Questions

    {
    background-image: url('Image');
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: 100% 100%;
    }

    This makes it so that it stays in the same position regardless.

    But if you want it at the absolute bottom then I would suggest removing background attatchment.


  8. #8
    Senior Member
    Join Date
    Apr 2008
    Location
    {postrow.POSTER_FROM}
    Posts
    424

    Re: CSS Questions

    Instead of making your css all messy with separate divs for a single image, just put the following in a wrapper div or something.
    Code:
    background: url("images/man.png")  no-repeat bottom right;
    [center:5vxp2rwi][/center:5vxp2rwi]

    See, the problem is that God gives men a brain and a penis, and only enough blood to run one at a time.
    -Robin Williams
    The VIP Store | Net-Cake (Coming Soon)

  9. #9
    Fanatic Enthusiast Niall's Avatar

    Join Date
    Aug 2007
    Posts
    3,298

    Re: CSS Questions

    Thanks for the suggestion VD, but I already have a wrapper div that's set to 800 pixels wide to center the rest of my website content. setting the background image in the wrapper makes the right only 800 pixels across and the bottom the height of the content box. Plus, it's behind everything else.

    [tn=700:3gauwjtf]http://**********.com/img/1240178394.png[/tn:3gauwjtf]

  10. #10
    Senior Member
    Join Date
    Apr 2008
    Location
    {postrow.POSTER_FROM}
    Posts
    424

    Re: CSS Questions

    Quote Originally Posted by Niall
    Thanks for the suggestion VD, but I already have a wrapper div that's set to 800 pixels wide to center the rest of my website content. setting the background image in the wrapper makes the right only 800 pixels across and the bottom the height of the content box. Plus, it's behind everything else.

    [tn=700:1r3r0qm6]http://**********.com/img/1240178394.png[/tn:1r3r0qm6]
    *facepalm... I didn't even look at your picture.

    If you want the picture to always be in the bottom right of the page, even when you aren't scrolled down to the bottom, then this or what Yadda said will work-
    Code:
    background: url("images/man.png")  no-repeat bottom right fixed;
    But if what you want, is that the div will be positioned at the very bottom of the actual page (not the screen) no matter the length of the screen, then this should do the trick-

    There's a technique called the sticky footer, which basically just sticks the footer on the bottom of the page. I think that's what you're going to want to use. Instead of wasting my time explaining it, I'll just link you to a site dedicated to this "Sticky Footer" idea.
    http://www.cssstickyfooter.com/

    Hope it works.
    [center:5vxp2rwi][/center:5vxp2rwi]

    See, the problem is that God gives men a brain and a penis, and only enough blood to run one at a time.
    -Robin Williams
    The VIP Store | Net-Cake (Coming Soon)


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •