Page is a not externally linkable
rocknbil - 5:23 pm on Jun 16, 2011 (gmt 0)
[edited by: tedster at 10:32 pm (utc) on Jun 16, 2011]
1. Assign a WIDTH to the container for the buttons.
2. Manhandle the containers as you will. :-) You can use align:center, but with a width the exact size of the buttons, you can use margin: auto on block elements.
Assuming they are 37px X 36px for example, you should be able to do
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
#social { width: 78px; margin: auto; } /* widths + margin */
#fb, #twitter, #fb a, #twitter a {
width: 36px;
height: 37px;
display: block;
border: none;
cursor: pointer;
outline: none;
text-indent: -50000px;
}
#fb, #twitter { float: left; }
#twitter { margin-left: 6px; }
#twitter a { background: transparent url(images/twitter.gif) left top no-repeat; }
#fb a { background: transparent url(images/facebook.gif) left top no-repeat; }
#fb a:hover, #twitter a:hover { background-position: bottom left; }
</style>
</head>
<body>
<div id="social">
<p id="fb"><a href="htt p://www.facebook.com/home.php#!/your-id" target="_blank">Find us on FaceBook</a></p>
<p id="twitter"><a href="htt p://twitter.com/#!/your-id" target="_blank">Follow us on Twitter</a></p>
</div>
</body>
</html>
If you're using Javascript, the concept is the same . . . center a container somehow and swap out the anchors for JS.
[edit reason] fix side-scroll [/edit]