This is just a general question. I have a few webpages where when you go over the link and it moves right one and down one. People think its neat and awsome, but when you go there often and its at the top, and the whole page goes down 1px and to the left 1px every time you move over a link it makes me aggrivated (sp?). Is there any way, you can move the Links, letting them still have their neatness, or for example have a hover over bold, and keep the page from being tossed arround for the ride?you can give them a right and bottom margin that you remove when the link is hovered overEdit: Wait, do you mean put a margin on everything after a link? Or do you mean put a padding on the link as I played with after reading your response.
<head>
<style type=text/css>
a
{
padding-right:1px;
padding-left: 1px;
}
a:hover
{
padding-right:0px;
padding-left:2px;
}
</style>
</head>
<body>
sdfsa;dlfkjasdf <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">blah</a> adsfasdfasdf
</body>look I used the search!!!
Anyway, I found this solution above, but it doesn't work fully. Check out:
<!-- m --><a class="postlink" href="http://hookedonwinter.com/seth/index.htm">http://hookedonwinter.com/seth/index.htm</a><!-- m -->
Here's the CSS:
#navcontainer{
border-bottom:#FDEA8C thin solid;
margin-left:-5px;
margin-right:-5px;
height:1em;
padding-bottom:5px;
}
#navcontainer ul{
padding-bottom: 5px;
padding-left: 0;
margin-top: 0;
margin-left: 0;
line-height:normal;
}
#navcontainer ul li{
display: inline;
padding-left: 5px;
padding-right: 5px;
}
#navcontainer ul li a{
color: #FDEA8C;
text-decoration: none;
margin-right:3px;
padding-left: 15px;
padding-right: 15px;
}
#navcontainer ul li a:hover{
color: #FDEA8C;
font-weight:bold;
margin-right:0;
}
If you look at the site, the above fix (margin-right:3px, 0 on hover) works for the first two links, but longer links, i.e. more bold difference, isn't fixed. Any ideas? without using absolute? Thanks!
PJ
<head>
<style type=text/css>
a
{
padding-right:1px;
padding-left: 1px;
}
a:hover
{
padding-right:0px;
padding-left:2px;
}
</style>
</head>
<body>
sdfsa;dlfkjasdf <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">blah</a> adsfasdfasdf
</body>look I used the search!!!
Anyway, I found this solution above, but it doesn't work fully. Check out:
<!-- m --><a class="postlink" href="http://hookedonwinter.com/seth/index.htm">http://hookedonwinter.com/seth/index.htm</a><!-- m -->
Here's the CSS:
#navcontainer{
border-bottom:#FDEA8C thin solid;
margin-left:-5px;
margin-right:-5px;
height:1em;
padding-bottom:5px;
}
#navcontainer ul{
padding-bottom: 5px;
padding-left: 0;
margin-top: 0;
margin-left: 0;
line-height:normal;
}
#navcontainer ul li{
display: inline;
padding-left: 5px;
padding-right: 5px;
}
#navcontainer ul li a{
color: #FDEA8C;
text-decoration: none;
margin-right:3px;
padding-left: 15px;
padding-right: 15px;
}
#navcontainer ul li a:hover{
color: #FDEA8C;
font-weight:bold;
margin-right:0;
}
If you look at the site, the above fix (margin-right:3px, 0 on hover) works for the first two links, but longer links, i.e. more bold difference, isn't fixed. Any ideas? without using absolute? Thanks!
PJ