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 home page image (jpeg, 1400×776) and started to research different ways to build my site without slicing this image since it’s the last thing I’d want to do, and thats how I came across CSS sprites (literally yesterday). What I was looking to do is to “mask” some areas of the image and add links to them, and so I used the following code to “mask” some icons so I could attach links to them and make them “clickable” (things like facebook, twitter links, etc.). My problem is that once I checked my site on a smaller screen, while I did see the full image, the “links” 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;}
#twitterlink {left: 1295px; top: 500px; width: 30px; height: 77px;}
</style>
</head>
<body>
<ul id="skyline">
<li id="twitterlink"><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? I am trying to avoid any way possible to get into photoshop and slicing my image.
PS: there is a good chance that I have missed how CSS sprites work altogether, since I keep coming across sites that “assemble” your images into one file with CSS sprites, while my understanding was that the key value of this technology is that now you dont need to mess around with multiple images and you can just ask the designers to provide you one image with all the elements…is that not true?
Thanks a millions…
CSS Sprites are used sparingly and selectively, in order to improve performance. They’re not used as a way to “skip slicing”. You can make a sprite with some buttons and icons that are used decoratively, but still, you’ll need to cut them and reposition them in a new image. If I understand it correctly, you think you can just position your html over a huge background, which even if you find a way to do (!) I’m afraid it won’t look at all good if you want to promote yourself. (for once it is not flexible and fluid – for sure.)
CSS can be quite easy if you’re a developer already. I suggest you give it a try.