ID’s to affect another part of a page

[balsam]

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

https://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

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

[soap]

seems like whatever you’re doing would be a lot easier with javascript?

[balsam]

Perhaps it would be easier…but not to me! I’ll have to scour the internet and look for examples.

[Author]

Posts