SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Position:Absolute Bottom:0 not working when adding a height

    Hi all,

    Hoping someone can help me or tell me I'm being stupid!

    I have my navigation set up for the site I'm working on as an unordered list of inline links.

    I'm trying to get it so I have the text of each listitem fixed to the bottom of the list and then when I rollover each listitem, the a:hover displays an image as a rollover effect using CSS sprites.

    If I use position:relative on the UL and then position:absolute; bottom:0; it works fine UNTIL I add a height for the anchor tag.

    As soon I add a height to the anchor tag it ignores the position absolute and puts the text of the link at the top of the area. Is this correct?

    I need to set a height for the anchor tag so the a:hover has a height for the rollover effect.

    Thanks for reading

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi scottjack. Welcome to SitePoint.

    It would be much better if you could show us a live link. If you are using sprites, the normal state could just have the text at the bottom and the hover state have the text in a different spot. So this should be easy. But we eed to see what you are doing.
    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
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

    Here is the in progress site link.

    http://edtaylordesign.co.uk.temp-www5.com/

    So for the navigation at the top I would prefer it to have the text below the images. I obviously would need to change the sprite so that the whitespace is below the image so the text can sit in the whitespace.

    I want to do this with text and images, rather than just adding text into the image as such.

    This is the link to the sprite.

    http://edtaylordesign.co.uk.temp-www...igationbar.jpg

    Thanks

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Unfortunately, I'm not getting a clear idea of what you want to see here. From the sound of it, these are not technically 'sprites'. But anyhow, I can't quite picture what you are expecting this to look like. Could you elaborate?
    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."

  5. #5
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've added a background colour to the area so you can see a bit more clearly. I want the text at the bottom of the red area, which I can achieve with position:absolute, bottom:0 but as soon as I add a height to the A tag that each section is, the text goes to the top.

    Thanks

    This is my current relevant CSS

    .navHome a, .navContinuum a, .navQube a, .navSigma a, .navETGuitars a, .navBlog a, .navAbout a, .navContact a
    {
    width:88px;
    height:106px;
    display:inline-block;
    text-decoration:none;
    background-color:Red;
    }

    and then the hover states for each section

    .navHome a:hover { background-image:url('images/navigationBar.jpg'); background-repeat:no-repeat; background-position:0px 0px; text-decoration:underline; }

    .navContinuum a:hover { background-image:url('images/navigationBar.jpg'); background-repeat:no-repeat; background-position:-88px 0px; text-decoration:underline; }

    etc... (Each section moves along 88px to the next image in the "sprite" (Why technically aren't these sprites?)

    Thanks

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    What you could do is reduce the height of the <a>s and add top padding instead:

    Code:
    .navHome a, .navContinuum a, .navQube a, .navSigma a, .navETGuitars a, .navBlog a, .navAbout a, .navContact a {
      background-color: Red;
      display: inline-block;
      height: 26px;
      padding-top: 80px;
      text-decoration: none;
      width: 88px;
    }
    Then remove the top whitespace on the sprite image and the images will appear at the top of the link on hover. The sprite image is 106 px tall, so the icons can't help but appear at the bottom of the anchor. Cut off the top of the image and make it, say, 80 px tall, and you will get your effect.
    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."

  7. #7
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fantastic!!

    That's sorted it. I could not work that out at all! Thank for your help.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Great! One extra thing that might be nice is to have the image appear when the page is current, to make it clear what page one is on. It's quite easy to do that with CSS. One way to do it is to add a unique class to the body tag of each section. So, on the Qube page, add something like

    <body class="qube">

    and then add this to the CSS:

    Code:
    .qube .navQube a, .navQube a:hover {
      background-image: url("images/navigationBar.jpg");
      background-position: -176px 0;
      background-repeat: no-repeat;
      text-decoration: underline;
    }
    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."

  9. #9
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I agree, I've done that on other sites and intend to do it on this one as well.

    Can I ask why these technically arern't sprites? My understanding of sprites is using one image file and selecting your images from it using background position?


  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by scottjack View Post
    Can I ask why these technically arern't sprites?
    Sorry, forget that comment. I'm used to sprites having a hover and non-hver state, but didn't realize you were using one big image.
    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."


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
  •