Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

What I am going to show you is extremely simple and will create a consistant feel to your site by visitors. What we will achieve is a 1- pixel shift or "bump down" affect on all links. Links are inline elements, margin-top won't work. We don't want to use padding either, because that would change the size of the box itself which might leading to unwanted shifting of other elements around it as well, which is undesirable. The perfect fit is position: relative, which allows us to bump around elements from their original static positioning when visitors hover over a link.

For this example, I will show you how to how to apply this 1-pixel-shift effect to just TAB MENUS, LINKS INSIDE PARAGRAPHS and any <SPAN> Link.

Here is a Close Up Capture of the 1 Pixel Shift Effect on Links:

 

Example of Shift Effect on Tab Titles:

Example of Effect on Paragraph and Text Box Links:

 

Simply add this to your Advanced CSS in Dashboard

LI.tabContainerSection-tab:hover,p a:hover, span a:hover{
position: relative;
top: 1px;
}

 

If you would rather make the link bump to left or right (or diagonally) instead of vertically, change the

top: 1px;    to something like    top: 1px; left: 1px;

You may also like the link to change color on hover. In this case also add
something like this to the mix:
color: blue;



NOTE: And as Chris Coyier points out If you have any links on your site that are absolutely positioned, having the active state change to relative position will (probably) make them go flying away and render them unclickable. You can fix this on a case-by-case basis by making the active state of those links retain absolute positioning, and even make their top value one higher (or bottom value one lower) [reference]

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • Pretty cool tip, thanks!

  • Somehow I already have this and don't know how I did it.  How's that for dumb luck *lol*  

    • NC for Hire

      i think I may have made a post similar in history, but couldn't track it down.. nice!

  • NC for Hire

    3236820?profile=original

  • This reply was deleted.
  • Hey there. I love it! Where in the code do I put the color to change when hover? 

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Suzie Nielsen replied to J.Ayvar's discussion
When Activity Feed. 3.0?
"How do I get these? THanks in advance!
 "
3 hours ago
Angela Soto updated their profile
20 hours ago
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Tip: Build a Directory and Import It Into Your Community
"Opposite Trick/ Tip"
22 hours ago
⚡JFarrow⌁ posted a discussion
If you ever wondered what your community looks like in the mirror, here you go: :oƃ noʎ ǝɹǝɥ…
22 hours ago
Steve C replied to Steve C's discussion
Is there ANY way to export a Ning 2 Site?
"Exactly!"
22 hours ago
⚡JFarrow⌁ replied to Steve C's discussion
Is there ANY way to export a Ning 2 Site?
"if your N2 is migrated to a N3, one would think a backup could be made for you...no?"
23 hours ago
⚡JFarrow⌁ posted a discussion
Over the years, many Ning Creators have asked me the best way to build a directory for their…
yesterday
Roland Rupp updated their profile
Thursday
Gavin Brown and ⚡JFarrow⌁ are now friends
NC for Hire
Thursday
Rosas † Negras left a comment on Creatori NING Italiani
"La grafica è elementare e le attività nulle,sarebbe da lavorarci un Po,sono da oltre 15 su ning…"
Wednesday
Rosas † Negras replied to Steve C's discussion
Is there ANY way to export a Ning 2 Site?
"if you check this has been said there is a discussion, all for free and they think of everything"
Tuesday
Rosas † Negras replied to Steve C's discussion
Is there ANY way to export a Ning 2 Site?
"Yes,absolutely must be free as has been said, I have been on ning for 15 years and we have always…"
Tuesday
More…

Meanwhile, you can check our social media channels