Hi everyone, sorry for the newb question.
But I was wondering if its possible to use html and css to nudge or move text a pixel or two to the right when your mouse hovers over it.
I know this is easily possibly using js but I dont want to go that route.
Thanks in advance.
you can just change the text container element’s margin-left or left position on :hover
Thanks for the input Kalon. I don’t know what im doing wrong, because the text just wont budge.
Im trying to make a button like affect when someone clicks on the one of links in my nav bar. I have the text-shadow making a glow like affect when someone hovers their mouse over a link. In addition to that, I am trying to get the text to move over a bit too.
This is what I have so far,
ul.nav {
list-style: none;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
text-decoration: none;
background: #999;
color: #0066cc;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: #666;
color: #00cc00;
left: 5px;
text-shadow: 0 0 0.2em #0033ff,
0 0 0.2em #0033ff,
0 0 0.2em #0033ff;
}
It creates a nice affect, I just can’t get the text to move.
Any ideas?
Thanks!
without seeing all your html and css it’s not obvious to me what the problem is. but I see you have a left style assigned but no position syle. I think top and left styles also need a position style for them to work.
Anyway, hopefully this demo will help you.
When you hover the “span text”, it moves to the right by 10px.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#container {
width: 300px;
border: 1px solid blue
}
#container div {
color: red;
margin-left: 100px
}
#container div:hover {
margin-left: 110px
}
</style>
</head>
<body>
<div id="container">
<div>span text</div>
</div>
</body>
</html>
Yes, thank you, it does help to a degree. But my problem may be more clear if you visited my testing page. http://www.free4blackberry.com/sitefiles/testing/test1/
Im trying to get the text in the nav menu to nudge left a bit individually, as a visitor hovers their mouse over each item. I understand what you are saying about adjusting the margin on :hover, but my site’s sections are scaled in percentages and the layout is liquid. Now I have no idea where to start 
Any help would really be appreciated, thank you!
You could adjust the padding on hover:
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
padding: 5px 5px 5px 20px;
}
Thanks donboe, that seems like a logical approach, but i think im missing something here. It doesnt seem to make an affect when I insert that code. I think it has something to do with the text being centered, not aligned to the left? would i just add more padding until i see a difference? But that causes another problem, the menu options all have different lengths, eg “home” and “phone selection”
Im so confused! thanks again if you think you can help.
Now i’m confused 
In the initial post I don’t see the text centered
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
text-decoration: none;
background: #999;
color: #0066cc;
}
Yes, sorry, the centering is applied page wide by this
.container {
text-align: center;
border: 1px solid #666;
}
Hope that helps. But I am right in saying that the problem here is lying with the centered text?
I really just dont want to resort to js, as this is a site designed for viewing on a Blackberry Smartphone. I dont want to throw a spanner in the works with java
Thanks.
I just have checked your website you havnt used the padding on hover. I tried the following code using firebug and it works
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background:none repeat scroll 0 0 #666666;
color:#00CC00;
padding-left:35px;
text-shadow:0 0 0.2em #0033FF, 0 0 0.2em #0033FF, 0 0 0.2em #0033FF;
}
sometimes you have to use !important if the elements are inheriting the more general styles.
To avoid more confusion, just post your complete css. Likewise ryanqm the padding was working for me, but probably there is something else. Don’t know why you center the entire content in the first place though!
Wait! hold up… I made a silly mistake, when i made that test page, i didnt link it to the style sheet i was editing, it linked to the sites main style. Now that I have changed it, when i insert
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: none repeat scroll 0 0 #666;
color: #00cc00;
padding: 10px;
text-shadow: 0 0 0.2em #0033ff,
0 0 0.2em #0033ff,
0 0 0.2em #0033ff;
}
It exceeds what I was trying to do here You nailed it spot on, thank you so much for your help everyone! It works nicely on my blackberry too…
Can you just explain to me quickly, what “background: none repeat scroll 0 0 #666;” does exactly? well i know the color part but the rest?
Yes, sorry about the confusion, i did post the website address though. I centered the content, because well… It mostly looks better at the moment centered, I just change a few parts as i need. Thank you for your help though.
none => no background image
repeat => for background image repeat, it could be repeat-x, repeat-y or no-repeat
0 0 => for background postion
Thanks for the info and thanks a lot for your help!
I now have found myself with another problem… I converted the bottom menu on my site to a horizontal list instead of just a paragraph. its working okay, and with a few tweaks should look the same at the menu on the left… The problem is this, when i add the code I added before to get the hover affect on my text… Well for some strange reason, it adds padding to the right hand side of page, pushing my background image a bit to the left… As you can see on my testing page.
I figured out that if I remove this section:
ul.foota {
list-style: none;
}
ul.foota li {
display: inline-block;
}
ul.foota a, ul.foota a:visited {
padding: 5px 5px 5px 15px;
text-decoration: none;
background: #999;
color: #0066cc;
}
ul.foota a:hover, ul.foota a:active, ul.foota a:focus {
background: none repeat scroll 0 0 #666;
color: #00cc00;
padding: 10px;
text-shadow: 0 0 0.2em #0033ff,
0 0 0.2em #0033ff,
0 0 0.2em #0033ff;
}
The mystery padding goes away. I tried removing bits and peices of it but tono avail…
Anyone have any ideas what is causing this?
I see no issue except the page background is aligned left. and to fix it you just need to change the body background line
background:url("/sitefiles/backgrounds/bg.jpg") repeat-y scroll 0 0 black;
to
background:url("/sitefiles/backgrounds/bg.jpg") repeat scroll 0 0 black;
I would just like to post an alternative, possibly better solution than changing the padding on the element.
if you declare the anchor links as position: relative, you can nudge them with the top, left, bottom, right properties.
ul.nav a:hover, ul.nav a:focus {
position: relative;
left: 10px;
}
The position: relative property states that you want to position the element relative to where it occurs naturally in the document. So even if the element occurs naturally in the center of the document, by declaring position: relative and nudging it with some left: 10px, you can move it 10px to the right wherever it is.
However, you will notice now that it moves to the right, out past the other elements, and shows a white strip to the left.
You can “fix” this by applying the same background color from your hover elements to the li elements so that when the li background peeks through, it appears the same:
ul.nav li {
background-color: #666;
I personally like the way it sticks out on the right, BUT if you didn’t like this, you could crop it out by setting the overflow of the ul to hidden, so it hides anything that moves past its boundaries:
ul.nav {
overflow: hidden;
}
Hope this helps!
Thank you so much ryan! There was like 2 px of the background black showing on the right next to the scroll bar. taking out the -y fixed that issue. Thank you!!!
But, I have found another issue that just doesnt seem to go away, I think there is something I am overlooking with this one…
It’s quite simple actually. All I want to do is add a bit to the left and right of the ad panel on the right, “.sidebar2”.
The problem, is that when I try to change this section of my css:
.sidebar2 {
float: left;
width: 20%;
background: #F4F4F4;
padding: 10px 0;
}
to this, notice the padding line,
.sidebar2 {
float: left;
width: 20%;
background: #F4F4F4;
padding: 10px;
}
It adds the padding as I want, but for some reason the div displays under my nav, and content divs. As apposed to being on the far right of the page.
I’d tried near everything I know but no difference. I tried changing the widths of .sidebar1 .content .sidebar2 to allow for some added spacing, but all that does is make the ad images wider. Im very confused, and am pretty sure that I am missing some crutial step. If you, or anyone else could help me out with this, and try to explain where I am going wrong. I will be forever in your debt
Thanks so much!!
so its fixed now?
Yes, the mystery padding disappears when I take out the “-y”