Indexhibit Support

Hi,

For the past few days I've been trying to search different methods for making rollover images/buttons. After a while I discovered a simple but effective CSS way of doing this with one Image.

I wanted to use these buttons in my Post-Nav bar now that I finally know how to make the buttons. However, the buttons have a fixed position so that the css (rollover)trick will work.

I'm wondering how to place them where I want them in the post-nav bar, without losing there functionality once the expandable menu opens.

How do I do this?

My Try Out

I made a quick tryout page so that I show you guys, Its not on the site itself because I need to show it to some important people soon and don't want them to see the 'tryout'. As you will see, the rollover images are in the top left corner. I need them them to be in the spot where the other icons are (without the rollover applied, these are just plain images with links on them).

Thank you for your help and time.

-Brun

Hi,
I'm not sure to understand well.
I don't really know why the rollovers wouldn't work in the post-nav...
Even if I'm not sure about what you mean, I can suggest you to add an id to each < li > or each < div >, depends of the technique you choose.
Then in your css file, you would have something like this :

#img1 a {
background:url(path-to-picture-normalstate.jpg) no-repeat;
}

#img1 a:hover {
background:url(path-to-picture-rollover.jpg) no-repeat;
}

Try to explain a different way if I didn't get it :)

brun
why are you struggling to put it in the post-nav instead of simply replace the buttons you have now in the index.php?
however imho you should play with the #navigation position, starting with
top: 500px; /** Determines the height from the top of the page > value is just a starting example **/
left: 30px; /** Determines the width from the left of the page > value is just a starting example **/
obviously you'll need to adjust accordingly all the others needed position values for the various a: states... and check it with different browsers after!
have a nice time ;-)

Yeah, I'm sorry guys, I'm afraid I wasn't clear enough in my first post.

Like I said before:

I've been searching for a good way to make rollover images (with css) and I found 2 ways.
First the vertical way (turned out you couldn't put the icons next to each other) Vertical Rollover Images

When I tried to put them next to each other it just kept rendering them in a vertical way. So after some googling I learned that the only way to make a horizontal series of rollover Images is to make 1 image with all of the states (Normal and Hover) in. the result: Horizontal Rollover Images

Here is the CSS used for the Horizontal Rollover Images:

1. <style type="text/css">
2. /** www.webdesignerforum.co.uk CSS Rollover Tutorial by Ben Scott **/

#navigation ul {
    width: 120px;
    height: 31px;
    position: absolute; /** Places image at the top of the page **/
    top: 0px; /** Determines the height from the top of the page **/
    left: 0px; /** Determines the width from the left of the page **/
    background: url(http://bruncroes.com/Icons/Icons.png) no-repeat 0 0;
    list-style: none;
    margin: 0; padding: 0;
}
#navigation li {
    display: inline;
}
#navigation li a:link, #navigation li a:visited {
    border: none;
    width: 30px; /** width of the button in active state **/
    height: 31px; /** height of the button in active state **/
    display: block;
    position: absolute;
    top: 0;
    text-indent: -7000px; /** Removes li text from the screen **/
    outline: none;
}
#navigation li.blue a:link, #navigation li.blue a:visited {
    left: 0;
}
#navigation li.green a:link, #navigation li.green a:visited {
    left: 30px /** how many px left of the first button i.e blue **/
}
#navigation li.orange a:link, #navigation li.orange a:visited {
    left: 60px /** how many px left of the first button i.e blue **/
}
#navigation li.red a:link, #navigation li.red a:visited {
    left: 90px /** how many px left of the first button i.e blue **/
}

#navigation li.blue a:hover {
    background: url(http://bruncroes.com/Icons/Icons.png) no-repeat 0 -31px; /** moves image up 30px showing the rollover states **/
}
#navigation li.green a:hover {
    background: url(http://bruncroes.com/Icons/Icons.png) no-repeat -30px -31px; /** moves image up 30px and right 80px showing the rollover states **/
}
#navigation li.orange a:hover {
    background: url(http://bruncroes.com/Icons/Icons.png) no-repeat -60px -31px;
}
#navigation li.red a:hover {
    background: url(http://bruncroes.com/Icons/Icons.png) no-repeat -90px -31px;
}

With that code I could just add this code to the post-nav bar:

1. <div id="navigation"> 
2. <ul>
3.     <li class="blue"><a href="mailto:brun.croes@gmail.com">Blue</a></li>
4. <li class="green"><a href='https://twitter.com/bruncroes' target="_blank">Green</a></li>
5. <li class="orange"><a href="http://www.bruncroes.blogspot.com" target="_blank">Orange</a></li>
6. <li class="red"><a href='http://www.facebook.com/brun.croes' target="_blank">Red</a></li>
7. </ul>
8. </div>

1. However, thanks to the:
2. position: absolute; /** Places image at the top of the page **/
3. ¬†¬†¬†¬†top: 0px; /** Determines the height from the top of the page **/
4. ¬†¬†¬†¬†left: 0px; /** Determines the width from the left of the page **/
5. The Icons appear in the top left corner, I tried adjusting the position so that it appears on the right place. The problem with that is that it won't react to the expanding menus, it just stays where the CSS is telling it to be. I tried removing that part of the code, which worked but removed the rollover effect somehow...

I hope I'm more clear now, english is not my main language so I'm really sorry If I'm not being clear enough.

Thanks in advance,

-Brun

you're right: the rollover works well, no doubt, but the positioning is affected by the expanding menu.
I've tried to change something and here is what I did:
1 - removed the original lines with the 4 icons (you have them in index.php, I guess)
2 - replaced them with the full #navigation (that you originally typed in the text box)
3 - changed the following value in the inline css
#navigation ul {
...
    position: relative;
    ...
    }
it works well, moving the #navigation down when the menu expands, but the link and rollover doesn't anymore :-/
unluckily I'm leaving for a short vacation, so I can't play any longer, hope this can help as a starting point...
;-)

btw: nice wotks you have over there! :-)

I tried that and indeed it works but then the rollovers don't work anymore and the links are gone :(.

Thanks for the compliment!

-Brun

Ok the problem is solved I chanced the #navigation ul { position to relative and kept the #navigation li a:link, #navigation li a:visited { position at absolute.

From there it was just a simple copy and paste of the code into the post-nav bar.

Thanks for the help from the forum, this is a great place to learn!

-Brun

Nope I was wrong, It works when you load the page for the first time, but from the moment you open one of the expandable menu's the rollover effect + the links on the images are gone.

Any way I could resolve this problem?

Tried to look for some answers on the web, but still no luck. Anybody willing to point me in the right direction(s)?

-Brun
Webpage

Still haven't found the answer, can anyone assist me?

hi brun, I'm back and you're still stuck! :-/
as I mentioned some days ago, I don't have a solution in my pocket, so if no one else can help there is only the trial&error way to solve the problem, which is a time and patience consuming approach but extremely satisfying once you get the solution... (and don't forget to post it here if you succeed! ;-)