Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder Ludatha's Avatar
    Join Date
    Jan 2008
    Posts
    250
    Thanks
    51
    Thanked 5 Times in 5 Posts

    Background positioning driving me crazy!

    Hey
    I am struggling to get the background position to obey me, using top, bottom, left etc works, but when I start using px it doesn't do a thing.

    I'm trying to combine all the images in my site.

    Here is the development:
    http://84.12.13.44/design/

    http://84.12.13.44/design/images/lef...ation_text.png


    http://84.12.13.44/design/images/link_images.png


    Anybody help me solve this?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Check http://jigsaw.w3.org/css-validator/v...44%2Fdesign%2F
    Try it like
    Code:
    a.nav_genyx {width:62px; background-position:0 0}
    a.nav_genyx:hover {background-position:0 100%}
    
    a.nav_computers {width:101px; background-position:-62px 0}
    a.nav_computers:hover {background-position:-62px 100%}
    PS: Hope, you'll add some text inside the anchors for the search engines.
    Last edited by abduraooft; 07-12-2011 at 02:52 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Ludatha (07-12-2011)

  • #3
    Regular Coder Ludatha's Avatar
    Join Date
    Jan 2008
    Posts
    250
    Thanks
    51
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by abduraooft View Post
    Does that mean I cannot use px in positioning and I'm forced to use percentages?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by Ludatha View Post
    Does that mean I cannot use px in positioning and I'm forced to use percentages?
    Check the additions in my above post.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder Ludatha's Avatar
    Join Date
    Jan 2008
    Posts
    250
    Thanks
    51
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by abduraooft View Post
    Check the additions in my above post.
    Thanks for the help, but I can't seem to get the left navigation working, its vertical as opposed to horizontal:

    Code:
    .genyx_left_link {height:14px; background-position:0 0;}
    .genyx_left_link:hover {height:16px; background-position:0 -85px;}
    The only thing that happens is that the height increases by 2px.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Change them to
    Code:
    a.genyx_left_link {height:14px; background-position:0 0;}
    a.genyx_left_link:hover {height:16px; background-position:0 -85px;}
    to override the specificity of .left_col_links a
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Ludatha (07-12-2011)

  • #7
    Regular Coder Ludatha's Avatar
    Join Date
    Jan 2008
    Posts
    250
    Thanks
    51
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by abduraooft View Post
    PS: Hope, you'll add some text inside the anchors for the search engines.
    Just one last thing, how do I add text but make it invisible, I know about display:none, but that hides the image as well.

  • #8
    New Coder
    Join Date
    Jan 2006
    Posts
    88
    Thanks
    4
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Ludatha View Post
    Just one last thing, how do I add text but make it invisible, I know about display:none, but that hides the image as well.
    Code:
    text-indent: -99999px;

  • Users who have thanked reyna12 for this post:

    Ludatha (07-13-2011)

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You may set a large negative text-indent to the anchors to hide the text from normal users.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #10
    Regular Coder Ludatha's Avatar
    Join Date
    Jan 2008
    Posts
    250
    Thanks
    51
    Thanked 5 Times in 5 Posts
    CSS is such a flawed language...
    Thanks guys.


  •  

    Posting Permissions

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