noy1213
November 12, 2010, 10:00pm
1
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?
Rayzur
November 12, 2010, 10:47pm
2
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.
noy1213
November 12, 2010, 10:53pm
3
Rayzur:
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
Rayzur
November 12, 2010, 11:00pm
4
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.
Rayzur
November 12, 2010, 11:17pm
6
you just say left and right div’s what about the center div?
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.
noy1213
November 12, 2010, 11:30pm
7
Rayzur:
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
Rayzur
November 12, 2010, 11:48pm
8
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
<!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>
noy1213
November 12, 2010, 11:54pm
9
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
Rayzur
November 13, 2010, 12:01am
10
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?
noy1213
November 13, 2010, 12:09am
11
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(
Rayzur
November 13, 2010, 12:39am
12
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:
#header {
background: url(images/bar-background2.png) [B]repeat-x 0 -225px;[/B]
}
#lt-cap {
background: url(images/bar-background2.png) [B]no-repeat 0 0;[/B]
}
#rt-cap {
background: url(images/bar-background2.png) [B]no-repeat 0 -450px;[/B]
}
In percentages:
#header {
background: url(images/bar-background2.png) [B]repeat-x 0 50%;[/B]
}
#lt-cap {
background: url(images/bar-background2.png) [B]no-repeat 0 0;[/B]
}
#rt-cap {
background: url(images/bar-background2.png) [B]no-repeat 0 100%;[/B]
}
noy1213
November 13, 2010, 12:50am
13
ohh so all of this is to get a simple calculation
thanks. have a great day