I'm having a terrible time trying to figure this out. I know Chris has done similar things here:

http://css-tricks.com/remote-linking/

But I'm having a hard time stripping out the info I don't need need. It's probably a simple fix, but my searching is causing me more grief than help, so I thought I'd turn to the forums.

What I want to have is an invisible box, 1000px x 50px centered across the top. Then, in a separate box, centered horizontally & vertically, I want a 240px x 240px image that when I hover over, the invisible box's background will shift to change colour, thereby drawing attention to the top of the screen.

Anyway, the css I have so far is:

.centered
{
position: fixed;
top: 50%;
left: 50%;
margin-top: -120px;
margin-left: -120px;
}
.topbar
{
display:block;
position: fixed;
width: 1000px;
height: 50px;
left: 50%;
margin-left: -500px;
}

.centered just gets the logo/image dead center. .topbar is the invisible bar.

.glowbar a { 
display: block; 
width: 1000px; 
height: 50px;
position: absolute;
background: url(images/glow.jpg);
background-position: bottom left; 
background-repeat:repeat-x;
}
.glowbar a:hover { 
background-position: top left; 
}

.glowbar shifts the position of the background so it changes color.

and then for the html, I have

<div class="topbar"></div>
<div class="glowbar">
<div class="centered"><a href="#"><img src="images/logos/logo.jpg" width="240" height="240" /></a> </div>
</div>

Now, when I hover over the logo.jpg, the glowbar is activated, but it appears to the right of the logo (and underneath it I suspect). I want it to be targeted on the top box (topbar). Also note, that I have a completely separate background for the entire page...starts as black and gradients down at the bottom to another colour, that's why I want "topbox" affected, but nothing else.

I don't know why I'm having such trouble, but I am. Probably not enough coffee.

I appreciate any help you all can afford me. I'll keep reading and will repay the favour as I get more experienced.

Thanks.

Brian