Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS ID’s to affect another part of a page

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #32210
    balsam
    Participant

    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

    #52282
    soap
    Participant

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

    #52260
    balsam
    Participant

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.