Profile hover

[Ohhh H2o]

Solved.

[trezoid]

CSS transitions.

[Ohhh H2o]

trezoid

CSS transitions.

I dont even know sad

[Ogamdo]

Something like

a:link{
text-decoration: none; color: pink; font-size: 9px;}

a:hover{
-moz-transition: margin-left 1s, margin-top 1s; margin-left: 8px; margin-top: 6px; text-decoration: underline; color: skyblue; font-size: 12px; font-weight: bold;}

[Ohhh H2o]

Ogamdo

Something like

a:link{
text-decoration: none; color: pink; font-size: 9px;}

a:hover{
-moz-transition: margin-left 1s, margin-top 1s; margin-left: 8px; margin-top: 6px; text-decoration: underline; color: skyblue; font-size: 12px; font-weight: bold;}

I wouldn't say slide instantly, more like sliding slowly heart

[Ogamdo]

Ohhh H2o

Ogamdo

Something like

a:link{
text-decoration: none; color: pink; font-size: 9px;}

a:hover{
-moz-transition: margin-left 1s, margin-top 1s; margin-left: 8px; margin-top: 6px; text-decoration: underline; color: skyblue; font-size: 12px; font-weight: bold;}

I wouldn't say slide instantly, more like sliding slowly heart

Change the numbers after -moz-transition. You should be able to understand how it works after changing the values a couple times.

[Ohhh H2o]

I did but it only changes the size :

Ogamdo

Ohhh H2o

Ogamdo

Something like

a:link
text-decoration: none; color: pink; font-size: 9px;}

a:hover
-moz-transition: margin-left 1s, margin-top 1s; margin-left: 8px; margin-top: 6px; text-decoration: underline; color: skyblue; font-size: 12px; font-weight: bold;}

I wouldnt say slide instantly, more like sliding slowly heart

Change the numbers after -moz-transition. You should be able to understand how it works after changing the values a couple times.

[Knight Yoshi]

Ohhh H2o

^-- Are you using Firefox? If you're using IE8 or lower, it won't support it, and currently IE9+ doesn't either, though I'm sure they'll hop on board sometime.

He also didn't include for Chrome/Safar or Opera, or initial values for the transition.

a:link{
text-decoration: none;
color: pink;
font-size: 9px;
padding: 0;
}

a:hover{
-moz-transition: padding1s;
-o-transition: padding 1s;
-webkit-transition: padding 1s;
padding: 0 0 0 15px;
text-decoration: underline;
color: skyblue;
font: bold 12px verdana;
}

Ogamdo

^-- Learn that not everyone uses firefox, "-moz-"
You shouldn't just set things for a single browser, because then not everyone gets the same affect.
As well, learn to collapse multiple properties of the same type into a single property, e.g. margin, and font.

Also you set a transition for margin(s), but neither margin has an initial value. You shouldn't use margin to move it though, because then the whole link physically moves, which means the mouse will move off of it, and so the user will have to try and follow the link. Use padding so that the user doesn't have to try and follow a moving link, the link will still readjust, but the user won't have to follow it.

Both of you
See my thread for more CSS properties via the image link in my signature

[Ohhh H2o]

Knight Yoshi

Ohhh H2o

^-- Are you using Firefox? If you're using IE8 or lower, it won't support it, and currently IE9+ doesn't either, though I'm sure they'll hop on board sometime.

He also didn't include for Chrome/Safar or Opera, or initial values for the transition.

a:link{
text-decoration: none;
color: pink;
font-size: 9px;
padding: 0;
}

a:hover{
-moz-transition: padding1s;
-o-transition: padding 1s;
-webkit-transition: padding 1s;
padding: 0 0 0 15px;
text-decoration: underline;
color: skyblue;
font: bold 12px verdana;
}

Ogamdo

^-- Learn that not everyone uses firefox, "-moz-"
You shouldn't just set things for a single browser, because then not everyone gets the same affect.
As well, learn to collapse multiple properties of the same type into a single property, e.g. margin, and font.

Also you set a transition for margin(s), but neither margin has an initial value. You shouldn't use margin to move it though, because then the whole link physically moves, which means the mouse will move off of it, and so the user will have to try and follow the link. Use padding so that the user doesn't have to try and follow a moving link, the link will still readjust, but the user won't have to follow it.

Both of you
See my thread for more CSS properties via the image link in my signature

How can you include Chrome/safar or opera?

[Knight Yoshi]

Ohhh H2o

Knight Yoshi

Ohhh H2o

^-- Are you using Firefox? If you're using IE8 or lower, it won't support it, and currently IE9+ doesn't either, though I'm sure they'll hop on board sometime.

He also didn't include for Chrome/Safar or Opera, or initial values for the transition.

a:link{
text-decoration: none;
color: pink;
font-size: 9px;
padding: 0;
}

a:hover{
-moz-transition: padding1s;
-o-transition: padding 1s;
-webkit-transition: padding 1s;
padding: 0 0 0 15px;
text-decoration: underline;
color: skyblue;
font: bold 12px verdana;
}

Ogamdo

^-- Learn that not everyone uses firefox, "-moz-"
You shouldn't just set things for a single browser, because then not everyone gets the same affect.
As well, learn to collapse multiple properties of the same type into a single property, e.g. margin, and font.

Also you set a transition for margin(s), but neither margin has an initial value. You shouldn't use margin to move it though, because then the whole link physically moves, which means the mouse will move off of it, and so the user will have to try and follow the link. Use padding so that the user doesn't have to try and follow a moving link, the link will still readjust, but the user won't have to follow it.

Both of you
See my thread for more CSS properties via the image link in my signature

How can you include Chrome/safar or opera?

I did that for you above, if you visit my thread it talks about browser prefixes though.

[Ohhh H2o]

Ohhh H2o

Knight Yoshi

Ohhh H2o

Knight Yoshi

Ohhh H2o

^-- Are you using Firefox? If you're using IE8 or lower, it won't support it, and currently IE9+ doesn't either, though I'm sure they'll hop on board sometime.

He also didn't include for Chrome/Safar or Opera, or initial values for the transition.

a:link{
text-decoration: none;
color: pink;
font-size: 9px;
padding: 0;
}

a:hover{
-moz-transition: padding1s;
-o-transition: padding 1s;
-webkit-transition: padding 1s;
padding: 0 0 0 15px;
text-decoration: underline;
color: skyblue;
font: bold 12px verdana;
}

Ogamdo

^-- Learn that not everyone uses firefox, "-moz-"
You shouldn't just set things for a single browser, because then not everyone gets the same affect.
As well, learn to collapse multiple properties of the same type into a single property, e.g. margin, and font.

Also you set a transition for margin(s), but neither margin has an initial value. You shouldn't use margin to move it though, because then the whole link physically moves, which means the mouse will move off of it, and so the user will have to try and follow the link. Use padding so that the user doesn't have to try and follow a moving link, the link will still readjust, but the user won't have to follow it.

Both of you
See my thread for more CSS properties via the image link in my signature

How can you include Chrome/safar or opera?

I did that for you above, if you visit my thread it talks about browser prefixes though.

Ah thanks!
But do you know how to add curves on the panels?
Code for curved panel:

.panel{-moz-border-radius: 50px; -webkit-border-radius: 50px;}

but i want them like this:
[x]

All in one panel, how do you do that?
I mean, I got the code for the panel but it doesn't have curved edges.

[Knight Yoshi]

Ohhh H2o

Knight Yoshi

Ohhh H2o

Knight Yoshi

Ohhh H2o

^-- Are you using Firefox? If you're using IE8 or lower, it won't support it, and currently IE9+ doesn't either, though I'm sure they'll hop on board sometime.

He also didn't include for Chrome/Safar or Opera, or initial values for the transition.

a:link{
text-decoration: none;
color: pink;
font-size: 9px;
padding: 0;
}

a:hover{
-moz-transition: padding1s;
-o-transition: padding 1s;
-webkit-transition: padding 1s;
padding: 0 0 0 15px;
text-decoration: underline;
color: skyblue;
font: bold 12px verdana;
}

Ogamdo

^-- Learn that not everyone uses firefox, "-moz-"
You shouldn't just set things for a single browser, because then not everyone gets the same affect.
As well, learn to collapse multiple properties of the same type into a single property, e.g. margin, and font.

Also you set a transition for margin(s), but neither margin has an initial value. You shouldn't use margin to move it though, because then the whole link physically moves, which means the mouse will move off of it, and so the user will have to try and follow the link. Use padding so that the user doesn't have to try and follow a moving link, the link will still readjust, but the user won't have to follow it.

Both of you
See my thread for more CSS properties via the image link in my signature

How can you include Chrome/safar or opera?

I did that for you above, if you visit my thread it talks about browser prefixes though.

Ah thanks!
But do you know how to add curves on the panels?
Curve panel:

.panel{-moz-border-radius: 50px; -webkit-border-radius: 50px;}

but i when them like this:
[x]

All in one panel, how do you do that?
I mean, I got the code but it doesn't have curved edges.

Because you're using browser prefixes.
border-radius is a CSS3 standard recognized on all major browsers now. No browser prefix is needed.

As well, what you have is for the panels. The profile you're directing to is using the #columns element, which is the main container element in the profile.