SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast noy1213's Avatar
    Join Date
    Aug 2010
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css sprites and repeat

    hi everone, i am starting to work with css sprites on my new website and i have some problems with repeat-x part of the png image

    the html:
    http://sware.co.il/exp/index-new.html

    the css:
    http://sware.co.il/exp/css/main2.css

    the image:
    http://sware.co.il/exp/images/bar-background2.png

    some one have idea how i can pix it? my work type is correct?
    or maybe repeat with "css sprites" cant be doing?

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    The problem is with your sprite image. The repeat-x portion in the middle of your image is only 1px wide while the total image is 32px wide.

    It is giving you the 31px gaps as it repeats. Just make that middle section the full 32px width and you should be fine.

  3. #3
    SitePoint Enthusiast noy1213's Avatar
    Join Date
    Aug 2010
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Hi,
    The problem is with your sprite image. The repeat-x portion in the middle of your image is only 1px wide while the total image is 32px wide.

    It is giving you the 31px gaps as it repeats. Just make that middle section the full 32px width and you should be fine.
    hi thanks,

    sprites can only be done with ul li list?
    i dont know if its good idea to us ul li list in the bar on my site

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noy1213 View Post
    hi thanks,

    sprites can only be done with ul li list?
    i dont know if its good idea to us ul li list in the bar on my site
    No, they don't have to be lists. That is what is common because the sprites change position when you hover on a link.

    The basic principle of a sprite image is that it contains all aspects in one image to save server requests.

    Your right, you really don't want to use a UL for a header div. You could just nest and float (or Absolute Position) two empty elements left and right in your header for the side caps. It is just a matter of setting the BG positions for their background image.

  5. #5
    SitePoint Enthusiast noy1213's Avatar
    Join Date
    Aug 2010
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    No, they don't have to be lists. That is what is common because the sprites change position when you hover on a link.

    The basic principle of a sprite image is that it contains all aspects in one image to save server requests.

    Your right, you really don't want to use a UL for a header div. You could just nest and float (or Absolute Position) two empty elements left and right in your header for the side caps. It is just a matter of setting the BG positions for their background image.
    thanks again

    1. you just say left and right div's what about the center div?
    2. so what your recommend to do?

    - 3 div's with same image and different BG positions
    or
    - 3 div's with differnet images
    ?

    thanks

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    1. you just say left and right div's what about the center div?
    2. so what your recommend to do?
    You don't need a center div, that would be the middle portion of your image repeating on the header div itself.

    <div id="header">
    <div id="left"></div>
    <div id="right"></div>
    </div>

    - 3 div's with same image and different BG positions
    Yes, that is the whole point of using sprites (one image)

    Get your image fixed and I will help you knock the code together.
    ^ EDIT:
    Make your Image a height that is divisible by three. It is 677px tall right now.
    Either make it 675 or 678px tall so the three sections will be equal heights.

  7. #7
    SitePoint Enthusiast noy1213's Avatar
    Join Date
    Aug 2010
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    You don't need a center div, that would be the middle portion of your image repeating on the header div itself.

    <div id="header">
    <div id="left"></div>
    <div id="right"></div>
    </div>


    Yes, that is the whole point of using sprites (one image)

    Get your image fixed and I will help you knock the code together.
    done the fixed image is up. (trying to change css but not working yet)

    maybe its a better idea to put all the repeat images along (i have only 2 repeat images in this page)
    and 1 more image with all the other images (i have like 10 images in this page)

    so it will be only 3 http reqest's

    what your think?


    EDIT
    its 675 now, but i dont understand why

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Here is an example with the 675px tall image that assumes each section is 225px tall.

    3 x 225 = 675

    Your three sections don't appear to be equal though so my BG positions are a bit skewed.
    ( I had to make the div 220px tall because of the gaps)

    You don't need the 8px gaps between each section. Try again
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Sprite Header</title>
    
    <style type="text/css">
    body {
        margin:0;
        padding:0;
        font: 100%/1.4 arial,helvetica,sans-serif;
        background:#CCC;
    }
    h1 {
        margin:.25em;
        font-size:1.5em;
        text-align:center;
    }
    p {margin:1em}
    
    #header {
        width:60%;
        height:220px;
        margin: 50px auto;
        padding:0 32px; /*space for side caps*/
        position:relative;/*containing block for AP children*/
        overflow:hidden;
        background:url(http://sware.co.il/exp/images/bar-background2.png) repeat-x 0 -228px;
    }
    #lt-cap {
        position:absolute;
        top:0; left:0;
        width:32px;
        height:220px;
        background:url(http://sware.co.il/exp/images/bar-background2.png) no-repeat 0 0;
    }
    #rt-cap {
        position:absolute;
        top:0; right:0;
        width:32px;
        height:220px;
        background:url(http://sware.co.il/exp/images/bar-background2.png) no-repeat 0 -456px;
    }
    </style>
    
    </head>
    <body>
    
    <div id="header">
        <h1>Fluid Width Header</h1>
        <p>Lorem ipsum dolor sit amet consectetuer quis a ante Nam odio. Aenean ullamcorper 
        velit aliquam volutpat Nam fermentum Phasellus fringilla ipsum id. Nec Cum elit Phasellus 
        vel a faucibus sollicitudin nec sapien ornare. Quam enim tortor nunc ut accumsan eleifend 
        vel fringilla Nullam eget. Velit aliquam Pellentesque Cum congue.</p>
        <div id="lt-cap"></div>
        <div id="rt-cap"></div>
    </div>
    
    </body>
    </html>

  9. #9
    SitePoint Enthusiast noy1213's Avatar
    Join Date
    Aug 2010
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks alot.

    what about this:

    maybe its a better idea to put all the repeat images along (i have only 2 repeat images in this page)
    and 1 more image with all the other images (i have like 10 images in this page)

    so it will be only 3 http reqest's

  10. #10
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    If you can make on sprite image with all your calculations correct then that's fine.

    Are you understanding why I needed the three sections to be equal heights on that image now?

  11. #11
    SitePoint Enthusiast noy1213's Avatar
    Join Date
    Aug 2010
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    If you can make on sprite image with all your calculations correct then that's fine.

    Are you understanding why I needed the three sections to be equal heights on that image now?
    for now not really (i am still read your code). i you have a good explanation i be glad to read :]

    (sorry about the unnecessary explanations(

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    3 x 225 = 675
    Well if each section would have been 225px tall the BG positions would have been as simple as this:

    In pixels:
    Code:
    #header {
        background: url(images/bar-background2.png) repeat-x 0 -225px;
    }
    #lt-cap {
        background: url(images/bar-background2.png) no-repeat 0 0;
    }
    #rt-cap {
        background: url(images/bar-background2.png) no-repeat 0 -450px;
    }
    In percentages:
    Code:
    #header {
        background: url(images/bar-background2.png) repeat-x 0 50%;
    }
    #lt-cap {
        background: url(images/bar-background2.png) no-repeat 0 0;
    }
    #rt-cap {
        background: url(images/bar-background2.png) no-repeat 0 100%;
    }

  13. #13
    SitePoint Enthusiast noy1213's Avatar
    Join Date
    Aug 2010
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ohh so all of this is to get a simple calculation

    thanks. have a great day


Bookmarks

Posting Permissions

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