Hi!

Please be gentle; I'm new to ciwas and CSS in general, and know little
to no javascript (but that might win me points here ;-)

I have nine 'tab' images, with corresponding high-background versions
for display under hover, which I would like to control via CSS. When
on a page, the tab should be just an image rather than a link with
hover sensing, so that is probably easy to just use <img> rather than
<div> there.

My code looks like
#news
{
background-image : url("/images/news_off.gif") ;
width : 181 ; height : 20 ;
}
#news:hover
{
background-image : url("/images/news_on.gif") ;
width : 101 ; height : 20 ;
}
...
<div id='news'>&nbsp</div>
and that works for the moment. There's a lot I don't know, though.

1) What is the difference between .news and #news (and however else
I might define an element)?

2) I had to specify the sizes or the image was squished. Meanwhile,
this looks an awful lot like a table cell definition. Should I be
doing this as for an image (or a link)?

3) Do I have to repeat this (or whatever) code for all nine tabs or
is there a way to set up a generic style for the images and still
switch between _off and _on?

I would love to learn about CSS and so I would love pointers to good
tutorials. I'm in the middle of a project, though, and so meanwhile I
have a deadline and beg for your help :-)

Oh, yeah -- is there an email gateway for this newsgroup, not unlike
the perl-beginners list?


TIA & HAND

:-D
--
David T-G

David T-G wrote:
[color=blue]
> I have nine 'tab' images, with corresponding high-background versions
> for display under hover, which I would like to control via CSS. When
> on a page, the tab should be just an image rather than a link with
> hover sensing, so that is probably easy to just use <img> rather than
> <div> there.[/color]
[color=blue]
> My code looks like
> #news
> {
> background-image : url("/images/news_off.gif") ;
> width : 181 ; height : 20 ;
> }
> #news:hover
> {
> background-image : url("/images/news_on.gif") ;
> width : 101 ; height : 20 ;
> }[/color]

This is invalid. Your lengths require units. You should also note that MSIE
doesn't support :hover except on <a> elements.
[color=blue]
> ...
> <div id='news'>&nbsp</div>
> and that works for the moment. There's a lot I don't know, though.[/color]

It won't work very well if the browser doesn't support, or has turned off,
images OR CSS.

You'd be better off using real text, with some image as the background. As
its a menu you should also consider not presenting it as a series of divs.
A menu is a list of links, so that's how you should present it.

http://www.maxdesign.com.au/presenta...rizontal07.htm would
probably be worth a look.
[color=blue]
> 1) What is the difference between .news and #news (and however else
> I might define an element)?[/color]

http://www.w3.org/TR/CSS2/selector.html#class-html
http://www.w3.org/TR/CSS2/selector.html#id-selectors

http://www.w3.org/TR/html4/struct/gl...tml#adef-class
http://www.w3.org/TR/html4/struct/global.html#adef-id
[color=blue]
> 2) I had to specify the sizes or the image was squished.[/color]

I doubt it. More likely the image was masked. (The term squished suggests
scaling).
[color=blue]
> 3) Do I have to repeat this (or whatever) code for all nine tabs or
> is there a way to set up a generic style for the images and still
> switch between _off and _on?[/color]

You would need JavaScript to avoid seperate definitions for each image.
Using real text with a common background image would work better IMO.
[color=blue]
> I would love to learn about CSS and so I would love pointers to good
> tutorials.[/color]

http://dorward.me.uk/www/css/#tutorials

--
David Dorward http://dorward.me.uk/