Re: [css-d] Sprites and Image Replacement
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 PROTECTED]
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/
Re: [css-d] Sprites and Image Replacement
Franckyit works perfectly. You went through enough trouble to
help me out that I have to say (Thank-you * 1000)! After reading
your reworking of the css i now completely understand how to do this
the proper way. And you are correct, the offsetting is much easier
with the graphics in a horizontal manner. Again, thanks so much!
On 23-Jun-06, at 8:27 AM, francky wrote:
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 PROTECTED]
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/
[css-d] Sprites and Image Replacement
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. =]
HTML_
ul id=tabNav
li id=tab_dashboarda href=/ title=DashboardDashboard/a/li
li id=tab_addMorta href=/ title=Add MortgageAdd Mortgage/
a/li
li id=tab_searcha href=/ title=SearchSearch/a/li
li id=tab_reportsa href=/ title=ReportsReports/a/li
/ul
CSS__
#tabNav {
margin: 0;
padding: 0;
position: relative;
}
#tabNav li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
width: 120px;
height: 15px;
text-indent: -5000px;
font-size: 1px;
}
#tabNav li, #tabNav a {
height: 15px;
display: block;
}
#tab_dashboard { background: url(linkGrid_sectionTabs.gif) -240px
-30px no-repeat; left: 0; }
#tab_dashboard a:hover { background: url(linkGrid_sectionTabs.gif)
-120px -30px no-repeat; }
#tab_addMort { background: url(linkGrid_sectionTabs.gif) -240px 0 no-
repeat; left: 120px; }
#tab_addMort a:hover { background: url(linkGrid_sectionTabs.gif)
-120px 0px no-repeat; }
#tab_search { background: url(linkGrid_sectionTabs.gif) -240px -15px
no-repeat; left: 240px; }
#tab_search a:hover { background: url(linkGrid_sectionTabs.gif)
-120px -15px no-repeat; }
#tab_reports { background: url(linkGrid_sectionTabs.gif) -240px -45px
no-repeat; left: 360px; }
#tab_reports a:hover { background: url(linkGrid_sectionTabs.gif)
-120px -45px no-repeat; }
__
css-discuss [EMAIL PROTECTED]
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/
