1. Okay I've tried to do this before but I could never get it to work right. Making a TC hover-able. Put your cursor on a certain image and there's the TC

Last time I tried to do this it would pop up even when I wasn't on that certain image or section because of the size of the TC 'box'. If anyone has the base code and knows how to keep that from happening I would very much appreciate it!

2. Custom scroll bars for text divs. A lot of my divs for my pet stories have auto overflow but the default browser scroll bars tend to be ugly and clunky on the page. For example my pet Kamara, the scroll bar clashes horribly with his color scheme and I would love to make it custom. I've seen it done before but I have yet to figure out how to do it myself with my own designs.

I would appreciate any help that could be offered for either of these questions!

; You can look at this webpage to learn about coding webkit scrollbars. I love to use them and they're very customizable for each different layout and color scheme that you could have.

As far as the TC goes, I normally just change the opacticy of the TC div, and then set the hover. I'm bad at explaining things, but I will do my best! If I confuse you definitely ask for clarification! Look at this profile. The TC doesn't hover over an image exactly, but it does does hover when it's supposed to. Specifically when you put your mouse over the TC section, like you're wanting. I'll copy and paste the code I use (I took out the extra effects to lessen any confusion I may cause): { top: 560px; left: 625px; width: 248px !important; position: absolute; filter:alpha(opacity=25); -moz-opacity: 0.25; opacity: 0.25; } :hover { filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1; }

The width of your TC can be very tricky. You can have three columns where 6 rows show up in a scrolling box and still have a ton of space to the right of the items that could fit another row or two. You need to play with the margin between the item images, and to do that, you use this code: .treasure_item { height: 64px; width: 64px; margin-bottom: 5px; margin-left: 5px; }

You just need to do the math of how many items you want per row, the space between them, and that's how you figure out your TC width. So take (64x3)+(5x5)=217 pixels wide. I have some extra space to the right of my TC just because getting the exact pixel width isn't nearly as important if the TC isn't in a scrolling box.

Test this code out and let me know if you have any issues! :)

The TC works PERFECT for what I am trying to do! Thank you so much! I am still reading about scroll bars. Thanks so much for this information!

; You're very welcome! I'm glad I could help!

I have another hover question for you. I've done this before and have long since lost the code. A div that slides out. Like you see the little tab sticking out and you put your cursor over it and theres the pet info/story/minion and whatnots.

; I found this: { position: absolute; top: 40px; left: 0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } :hover { left: 250px; } :hover { left: 0; }

Change the to the div section you want to move. :)

I can't seem to get it to work? Its Kyrie's page I am trying to do. You can see where I have the 'tab'.

When I put in that code it just stretched my text div.

Here's my code for the main div: <div id="story"; div style= "position:absolute; top: 100px; left:400px height:505px;width:110px;overflow:auto;">

For the slider: { position: absolute; top: 140px; left: 600; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } :hover { left: 300px; } :hover { left: 0; } {overflow: hidden;}

; Okay so, take out that other :hover where the left position is set to 0. I don't know why it's in there, and I'm not entirely sure why I told it to you, haha. It's doing nothing. Go ahead and take that out.

As far as your tab, you'll want to put a background color on the story div, so that it looks like the tab is moving. You'll also want to put a radius on it to match the curve of the tab in the image. border-radius: 10px; change the size of the radius until it matches your tab.

The more I look at the code, the more I realize that it's not a broken code; it's just the wrong code. Let's try this: { background: ; position: absolute; top: 140px; left: 600px; width: 10px; height: XXpx; margin: XXpx; transition: 1s; -O-transition: 1s linear; -webkit-transition-property: margin; -webkit-transition-duration: 1s; -webkit-transition-timing-function: linear, ease-out; -moz-transition-property: margin; -moz-transition-duration: 1s; -moz-transition-timing-function: linear, ease-out; -moz-border-radius: 0px 0px 0px 0px; -webkit-border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px; } :hover { margin-left: XXpx; width: 350px; height: XXpx; }

You need to set a height to , and different widths for when the tab isn't hovered over, and for when it is. I'm not sure why you've set your div to hide the overflow, but everyone's computer may read font sizes differently, and if the text goes further than the height of your div, they won't be able to read the rest of the story because hiding the overflow stops the scrollbar from showing up.

Play with the radius to get the right top and bottom corners to be as round as the corners in your tab. Set a background color of the same blue as well.

And this is just a suggestion, but you should add some text over the bookcase image to let people know that there's a TC there. Otherwise if their mouse doesn't move over that area they won't know that there is a TC there. Something small, and you can say either 'hover' or 'TC' or whatever you want. That way it's a bit more obvious that something is there that the viewer should know about.

That looks so much better. Now how do I get rib of the scroll bar that's showing. Or get his name/info/minion too.

; You don't have to show the minion, but you have to keep the pet name, info, and owner on the profile per the site rules. A good position for them would be over the bookcase picture. If you don't want the minion, just set column 3 to display: none.

As far as the scroll bar, you can set the overflow to hidden on just the story div, but not the hover part of it.

I would like for his friend minion and name/info to be in the hover as well if possible. If I set his overflow to hidden in either of them it cuts off his story.

; You can do the webkit scrollbar then, to make it less distracting. This is the code that I use for my scrollbars. Fully customizable!

In order to put everything in the div, you're going to have to spend more time in the code. You'll have to put the sliding code on the pet_info div, and take it off the story div. Then you'll have to readjust the positioning of literally everything. It can be tedious and time consuming.

Thank you so much for all your help. I think I have him figured out now. You have been so much help. I am sorry if I bothered you.

; You're welcome! And you weren't a bother at all; I was happy to help. :)