...

View Full Version : Background positioning driving me crazy!



Ludatha
07-12-2011, 02:37 PM
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/left_navigation_text.png
http://84.12.13.44/design/images/left_navigation_text.png

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

Anybody help me solve this?

abduraooft
07-12-2011, 02:46 PM
Check http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2F84.12.13.44%2Fdesign%2F
Try it like

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.

Ludatha
07-12-2011, 02:50 PM
Check http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2F84.12.13.44%2Fdesign%2F

Does that mean I cannot use px in positioning and I'm forced to use percentages?

abduraooft
07-12-2011, 02:54 PM
Does that mean I cannot use px in positioning and I'm forced to use percentages?
Check the additions in my above post.

Ludatha
07-12-2011, 03:05 PM
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:


.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.

abduraooft
07-12-2011, 03:11 PM
Change them to

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 (http://www.htmldog.com/guides/cssadvanced/specificity/) of .left_col_links a

Ludatha
07-13-2011, 02:38 PM
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.

reyna12
07-13-2011, 03:18 PM
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.


text-indent: -99999px;

abduraooft
07-13-2011, 03:53 PM
You may set a large negative text-indent to the anchors to hide the text from normal users.

Ludatha
07-13-2011, 04:11 PM
CSS is such a flawed language...
Thanks guys.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum