Jim Newfer wrote:
Hello everyone,
I got the tabs plugin by Klaus Hartl working about 1 hour ago, and
since have been trying to change some basic things about the way it
works, starting with the button image and the size. I took a brief
look at the source and i see the background is just a simple image.
Now when I open up that image in photoshop, I am confused. I sort of
see how the plugin is setting the background image, but I am used to
just using the css property background-position to change the state of
a button, but it looks as if this background image is a single image,
and is aligned vertically for any other images? If someone could
please elaborate on how to change the tab to a smaller image or modify
it in any way that would be great, because frankly, I just flat out
don't understand how this is working.
Sincerely,
Jim
Jim,
I'm using the sprite technique as described here:
http://www.alistapart.com/articles/sprites
I believe it's the same as this:
http://www.alistapart.com/articles/slidingdoors/
http://www.alistapart.com/articles/slidingdoors2/
I don't quite understand why you're confused. You said you're used to
using the background position to change state, but nothing else does my
CSS do. Except for that the tab image also contains right and left
edges, which needed to be separated to have flexible tabs.
For example for an active tab the right edge is made like this:
.tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus,
.tabs-nav a:active {
background-position: 100% -150px;
outline: 0; /* prevent dotted border in Firefox */
}
Together with the left edge on the nested span element:
.tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav
a:focus span, .tabs-nav a:active span {
background-position: 0 -50px;
}
Both use the same image.
If you'd like to use a smaller image, e.g. smaller tabs, I recommend to
build an image just like the one provided and adjust the width/height
declarations here:
.tabs-nav li {
float: left;
margin: 0 0 0 1px;
min-width: 84px; /* be nice to Opera */
}
and here:
.tabs-nav a span {
width: 64px; /* IE 6 treats width as min-width */
min-width: 64px;
height: 18px; /* IE 6 treats height as min-height */
min-height: 18px;
padding-top: 6px;
padding-right: 0;
}
If you use the same grid as in the example image you won't even have to
change the background positioning.
HTH,
--Klaus
