Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS sprites and links out of screen

    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.

  • #2
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    Could you give us a link to your problem?

    P.S. If you're having difficulties with sprites, try SpriteCow: http://www.spritecow.com/. Simple and fast


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •