Hello! CSS HTML help pls.

[Butters]

I want to have a rotating image header which has to rotate in order. I'm using JS for this at the moment.

Thing is, I want to overlay a vertical navigation on the header image.

Now, I've got it working by defining the header.jpg file as the background in the CSS as:

#header{
height: 211px;	
width: 780px;	
background-image:url(images/header.jpg);	
background-repeat:no-repeat;	
}

and the HTML is <div id="header"><div id="nav">nav code here</div></div>

Problem is, this image is fixed and doesnt rotate.

So my two thought processes are:

Is there a way to make the images rotate using the JS script from the CSS file or, how can I place the navigation over the image using CSS whilst displaying the img src for the header in the HTML?

Rough Idea of what I'm trying to achieve here:

 

[Confused]

I'm not too hot on CSS, but could you float the #nav div to the left, and still have the JS/img in the #header div as an image...?

 

[Butters]

tried that and it forces the header to drop down.

I'm guessing I'll have to pull off some z-index and position absolute?

 

[Sagalout]

do you want the image to rotate whilst you are viewing, or just pull through a random image on each page refresh?

 

[Butters]

whilst viewing