I am a total newbie to CSS - am just an iphone developer, and I want to put a home page together to promote my apps, basically just one background image with links to the app store, facebook, and twitter.
I received from my designer the image (1400x776) that contains all the UI elements that I need (facebook and twitter icons, etc.). Since I am very much not into slicing this image, I read that using CSS sprites may be a good option. I used the following code to "mask" the icons so I could attach links to them and make them "clickable" but once I checked on a smaller screen, while I did see the full image, the "link" were way outside the screen (as if not "attached" to the UI elements anymore).
My index.html:
<head>
<title>Delengo Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style media="screen">
#skyline {
background: url(delengo.jpg);
background-repeat:no-repeat;
background-position: top center;
width: 100%;
height: 100%;
margin: -10px;
padding: 0px;
min-height: 800px;
}
#skyline li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}
#skyline li, #skyline a {height: 200px; display: block;}
#panel1b {left: 1295px; top: 500px; width: 30px; height: 77px;}
</style>
</head>
<body>
<ul id="skyline">
<li id="panel1b"><a href="http://twitter.com/#!/delengo"></a></li>
</ul>
</body>
</html>
What is the best way to fix that, and is this the right way to utilize CSS sprints anyway?
Thanks for any help.