PDA

View Full Version : Having trouble with vertical centering and hover buttons



andrewmaul
Oct 17th, 2009, 07:38 AM
Hey there,

I'm pretty new to web design, I've searched heavily through google and forums and am finding myself pretty frustrated.

Basically I used this guide: http://www.alistapart.com/articles/sprites/ in order to create buttons and hover buttons that are irregularly shaped. However, I also would like the page to be perfect centered horizontally and vertically, which I hear can be quite difficult in CSS.

The problem is, on certain resolutions this will look perfect, but on others, the hover buttons misalign and it looks terrible.

Following is the code, any help is greatly appreciated! Thanks in advance.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style media="screen">
#buttons {
width: 800px;
height: 650px;
background: url(home.jpg) fixed center no-repeat;
margin: 10px auto; padding: 0;
position: relative;
}
#buttons li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;}

#buttons a {display: block;}

#about {left: 475px; top: 48px; width: 160px; height: 160px;}
#services {left: 570px; top: 188px; width: 160px; height: 160px;}
#reel {left: 570px; top: 351px; width: 160px; height: 160px;}
#contact {left: 475px; top: 488px; width: 160px; height: 160px;}
#about a {height: 160px;}
#services a {height: 160px;}
#reel a {height: 160px;}
#contact a {height: 160px;}

#about a:hover {background: url(home_2.jpg) -475px -600px no-repeat;}
#services a:hover {background: url(home_2.jpg) -570px -1340px no-repeat;}
#reel a:hover {background: url(home_2.jpg) -570px -903px no-repeat;}
#contact a:hover {background: url(home_2.jpg) -475px -1640px no-repeat;}
</style>

<body>
<ul id="buttons">
<li id="about"><a href="#"></a></li>
<li id="services"><a href="#"></a></li>

<li id="reel"><a href="#"></a></li>
<li id="contact"><a href="#"></a></li>
</ul>
</body>
</html>

abduraooft
Oct 17th, 2009, 09:16 AM
The problem is, on certain resolutions this will look perfect, but on others, the hover buttons misalign and it looks terrible. Please be more specific.
btw, the above code alone doesn't display anything for us. Could you post a link to your page?

andrewmaul
Oct 17th, 2009, 10:06 PM
www.gopherhole.tv/test.html

When I view this in Firefox normally, the hover buttons align properly. However, if I do full view (hit F11) or if I resize my browser window to something smaller, the hover buttons are no longer aligned with the image.

abduraooft
Oct 18th, 2009, 01:54 PM
I don't think it's wise to keep such large images as a whole to make the roll over effect. I'd seperate the circles and group each one with its alternatives (which may save a lot of CSS coding too.)