SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    636
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Button Behind Div Cant Click And Need Too!!!

    Hello guys,

    Here is the link to the site need some help with...

    http://amethystmine.com/2012/know-your-amethyst/

    Now everything works great but on a smaller screen when you the mascot covers up some of the history button, is there a way I can still make that button clickable without scrolling down some.

    Thanks,

    Mike

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Position: fixed takes elements out of the flow so that they don't care where other elements are. You are probably better off using a sticky footer for this, rather than position: fixed, which isn't as reliable:

    http://www.sitepoint.com/forums/show...66#post1239966

    Or, better still, remove the fixed positioning on the footer etc. and just place them below the content in the natural flow of the document. You can make the fotter color always go to the bottom of the screen even on short pages by placing the footer color on the <body> element and setting the content background to white.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mbond5 View Post
    Hello guys,

    Here is the link to the site need some help with...

    http://amethystmine.com/2012/know-your-amethyst/




    Now everything works great but on a smaller screen when you the mascot covers up some of the history button, is there a way I can still make that button clickable without scrolling down some.

    Thanks,

    Mike
    Hi Mike,

    Unfortunately, no you can't have two clickable elements both above and below at the same time. One will always have to be on top. You could make the tabs go on top at all times by setting the z-index of #content (position:relative will also need to be added) higher than #steve but then that means your footer will be under the content. If you raise the z-index of the footer the the bottom of #steve will get cut off.

    You can't have #steve on top of the footer and then under the content to allow the tabs to be clicked.

    It's just impossible for that scenario to work. You just have to keep #steve clear of the nav or any other clickable content


Bookmarks

Posting Permissions

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