How to make box offset when hovered over?

[BobMCT]

Gents;

I'm working on a page with a left side column of several boxes each containing text. Using a css with .hover I am able to get some of the effect I desire to work, but not all.

What I would like to see is that when hovered over the box actually drops down 1 or 2 pxs and shifts to the right the same amount. The effect is that the box appears to move slightly when being selected. Of course, when the cursor is moved out of the area the position would go back to the default defined.

The technique I tried was to have a 1px border and a 2px margin for the defaults. For the .hover I used a 3px margin-top and margin-left and a 1px margin-bottom and margin-right assuming this would reposition the box. It didn't.

Also, according to my manuals, the margin is outside of the border, whereas in my testing the margin seems to effect inside the border (I thought that was padding).

Can anyone please provide a little insight and guide me in the right direction?

Thanks - Bob

 

[Vragabond]

Your idea should work and I have implemented it in the past. Could you please show us your code so that we will be able to identify your specific problem easier?

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[BobMCT]

OK - Here are some snippets. I hope they make sense:

#content_main, #content_sidebar {
margin-bottom: 3ex;
}

#content_sidebar {
margin-top: 2ex;
}

div.block {
color: #777;
background: #E3E3E3 url("../img/box-bg.png") top left repeat-x;
border: 1px solid #777;
padding: 1ex;
}

#content_sidebar div.block {
margin: 1em;
font-size: 80%;
}

#content_sidebar div.block a:hover { /* added */
color: #000000;
}

div.block {
margin: 0 1em 1ex 1em;
}

Now- in the current state I am only changing text color to black. What I did do previously was to add margin declaratives to the .hover section that increased the top and left by 1 and decreased the right and bottom by 1. However, this only resulted in what appeared as a greater margin at the top and the entire box, along with the others below it, in moving down somewhat. Not a desirable nor pretty sight.

So, hopefully someone can advise how I can reposition the box slightly to look slightly animated when hovered over.

Thanks for ANY ideas/suggestions. I'm trying to learn this css stuff and other than the basics, to me anyway, its not easy.

Bob

 

[Vragabond]

Your description sounds like it has to do with the collapsing margins. However, based on your css (and no html), I cannot be sure. Here's a few observations:

1. If you are altering anchor element (a) on hover, then know that by default this element is inline and so margins do not work on it. You would need to make it a block level element first.

2. If you would like to move the background box, you might want to try to shake the positioning of the background itself. That could be simpler.

3. In the code provided, you're defining div.block three times. Two times you're defining its margins, with the common margin (1em) being applied to the element at the end, based on the highest specificity. You might want to organize your code a bit better.

4. If it is the collapsing margins issue, then try to work it out by reading this article:

http://www.andybudd.com/archives/2003/11/no_margin_for_error/.

If you cannot figure it out or think this is not it, please post both your CSS and HTML (or even better a link to the demonstration page) and we'll try to make sense of what you have.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]