Sent by francky on 23 June 2006 13:01
rollandburn wrote:
>Hi all, I wonder if a guru could help me out with my (attempted)
>implementation of sprites and image replacement. Below is the css
>and html which works fine in firefox and internet explorer (as far as
>I can tell) and an example can be seen at http://www.rollandburn.com
>
>I get the feeling I'm missing something important with the sprites
>because there should be no need to keep repeating...
>
>background: url(linkGrid_sectionTabs.gif) -240px -15px no-repeat;
>
>...in the css for each of the tabs. I thought I could simply put
>that under the #tabNav li {} and for each of the tabs all I would
>have to set is the positioning but unfortunately the way I have it
>below is the only way I could get it to work.
>
>Arg!
>I know my IR technique probably leaves a lot to be desired. =[
>Thanks for any suggestions or advice to improve. =]
>[...]
>
Hi Rollandburn,
If you use an image with the tabs horizontally, everything is more
simple to see. First put the image as a general background (all grey),
then lift the one you need when hovering. Same way (lifting 1 step more)
for the current status of a tab. The positioning of the tabs can be done
with floating left for each tab.
Compare: test page here
<http://home.tiscali.nl/developerscorner/css-discuss/test-rolland.htm>.
:-)
Greetings,
francky
btw: Consider a larger font size for the tab images (pretty small at
large resolutions...), or (better) use text with a tab-bg of only the
sprite; then the visitor can scale the font size, if wanted/needed.
Accessible for everybody!
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
