css rollovers - urgent help please

[lojo]

Hi All

I am a fairly new to css. I have a website that I created in tables -www.monicawellsphotography.net and I am in the process of converting/recreating it to css.

However I am a little stuck on how I would convert the navigation buttons into css. At the moment they are gif images. I have read a few books on rollover navigation in css but they only seem to deal with solid colours (which is easy)

The nav buttons in this site have a little solid colour on one side and when you put your mouse over it, both the little block of colour and the text colour change.

I thought I could make two divs one nested inside the other, and then make the link change colour which i can do but then how would I get the block of colour to change as well.....

I would appreciate any help you can give

Best Regards
lojo

[Dark Tranquility]

You can use some thing like this:

  <div id="menu"><a href="index.php">	  HOME</a>
  <a href="item1.php">	 ITEM1</a>
  <a href="item2.php">	 ITEM2</a>
  <a href="item3.php">	 ITEM3</a>
  <a href="item4.php">	 ITEM4</a></div>

CSS:

#menu a {color: #ff0;
  border: 1px solid;
  background : url(buttons.jpg) no-repeat;
  width : xxxpx;
  height : xxpx;
  border-color: #00ff00;
  display: block;
  margin: 0px;
  text-align: left;}
  
  #menu a:hover {border: 1px solid;
  background : url(buttons2.jpg) no-repeat;
  color: #0000ff;
  text-decoration: none;}

Use buttons.jpg as a background for your nav items and buttons2.jpg as the rollover image for instance!
of course you can tweak the CSS to fit what you need

Edit:

....beaten by all4nerds!!

[lojo]

Hello

basic
a{background:#ff0000 url(x.gif) no-repeat;}
a:hover{background:#0000ff url(xx.gif) no-repeat}

Hi all4nerds

many thanks so does this mean that there isnt a way do this without using a gifs as i thought there might me a way to do this with only css

regards
Lojo

[Dark Tranquility]

Hi all4nerds

many thanks so does this mean that there isnt a way do this without using a gifs as i thought there might me a way to do this with only css

regards
Lojo

What do you mean with CSS only? you still have to use graphics don't you? (.gif, .jpg, .png)

Or you mean just a background color rollover effect?

in that case use

 a{background: #00F;}
 
 a:hover{background: #F00;}

instead

[Tyssen]

Actually, you don't need the no-repeat in there if you've got no background-image.

[Dark Tranquility]

Actually, you don't need the no-repeat in there if you've got no background-image.

yeah sure forgot to remove that

[CadmiumNL]

In that case, you might as well use background-color instead .

[Dark Tranquility]

In that case, you might as well use background-color instead .

I always prefer to use background instead of background-color cause adding a bckground image later would be easier! yes I am sometimes Lazy!!