SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Absolute Positioning and <a> tag

    Hello -

    I have a link that I would like to absolutely position. However, as soon as I create the rule to absolutely position the link, it doesn't work as a link any more.

    Here's my HTML:

    HTML Code:
        <div id="link_facebook">
        <a href="http://www.facebook.com/profile.php?ref=profile&id=100000876880984" target="new">
        <img src="../images/link_faceBook.gif" width="25" height="25" alt="Link to Facebook" />
        </a>
        </div>
    And here's my CSS:
    Code CSS:
    div#link_facebook {
    	position: absolute;
    	top: 154px;
    	left: 940px;
    }
     
    div#link_facebook img{
    	border: none;
    }

    I'm sure it's something simple but I can't figure it out. Any help would be very much appreciated.

    Chelsea

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,568
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, it could be a number of things. Just running that code locally shows it still working.

    Could you post a link to the site in question?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    ********* Staff mattevans's Avatar
    Join Date
    Sep 2009
    Location
    Melbourne, Australia
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Chelsea,

    Everything seems fine - it should be working without issue.

    A few questions...

    1. What browser are you using?
    2. Do you have other elements on the page that could be overlapping your '#link_facebook' DIV? (this would prevent the link from being clicked)
    Matt Evans
    Sitepoint Developer
    tweet 2 me

  4. #4
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The site is www.atlas.dr.com. I'm using Firefox for testing. I haven't tried it in IE yet.

    Thanks for looking at it.

  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Bring the element to the front by adding a z-index:

    Code CSS:
    div#link_facebook {
        position: absolute;
        top: 154px;
        left: 940px;
        z-index:1;
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  6. #6
    ********* Staff mattevans's Avatar
    Join Date
    Sep 2009
    Location
    Melbourne, Australia
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Chelsea,

    Taking a quick look at the site, I would say the '#nav' or '#navbar' DIV's are over lapping the absolutely position '#link_facebook' DIV.

    Try adjusting the sizing of either (or both) of those DIV's and see if the Facebook link becomes click able.

    You might also like to research into the 'z-index' CSS rule - this could help you out.
    Matt Evans
    Sitepoint Developer
    tweet 2 me

  7. #7
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, guys! Using the z-index rule worked. I tested it in IE8, IE7, IE6, Firefox, Chrome, Opera and Safari.


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
  •