1. Home
  2. Forums Index
  3. Browser Side / CSS 4:26 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Sprites.[help!]

Vertical Sprites not aligning with jpeg.

         

JRoo

2:45 am on Jul 14, 2010 (gmt 0)

10+ Year Member



Hi, I'm new to programming and am trying sprites on for size. I've researched a bunch of code for the image and wording on image I want to align with links, but none seem to work with the image. Help! I'm not quite sure how to make the links 1.)invisible (as I want to align each link with the lettering on image, but don't want "Noise" to cover image...) and 2.)how do I move links up, so that the piece of the jpg pertaining to each link is clickable? I hope this makes sense.
Current, the picture is up top, but the links are below the jpeg. I want them to be one. Thanks for any and all help provided.
Here is my relevant code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<style type="text/css">
#navigationbar {
width: 250px;
height: 355px;
background: url('menubarindex-pg.jpg');
margin: 0; padding: 0;
position: relative;
}
#navigationbar li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;}

#navigationbar a {display: block;}


#navigationbar-01 {left: 10px; top: 7px; width: 86px; height: 15px;}
#navigationbar-02 {left: 40px; top: 16px; width: 79px; height: 12px;}
#navigationbar-03 {left: 70px; top: 0px; width: 112px; height: 10px;}
#navigationbar-04 {left: 100px; top: 57px; width: 120px; height: 8px;}
#navigationbar-05 {left: 85px; top: 102px; width: 98px; height: 6px;}
#navigationbar-01 a {height: 15px;}
#navigationbar-02 a {height: 12px;}
#navigationbar-03 a {height: 10px;}
#navigationbar-04 a {height: 8px;}
#navigationbar-05 a {height: 6px;}

#navigationbar-01 a:hover {background: url('menubarindex-pg.jpg') -40px -307px no-repeat;}
#navigationbar-02 a:hover {background: url('menubarindex-pg.jpg') -77px -166px no-repeat;}
#navigationbar-03 a:hover {background: url('menubarindex-pg.jpg') -160px -300px no-repeat;}
#navigationbar-04 a:hover {background: url('menubarindex-pg.jpg') -250px -207px no-repeat;}
#navigationbar-05 a:hover {background: url('menubarindex-pg.jpg') -110px -402px no-repeat;}


body
{
background-color:#F6F6E0;
}
div {
background: url('menubarindex-pg.jpg');
}
</style>
</head>
<body>

<br /><br /><div style="background-position: -0px -0px; width: 261px; height: 346px">&nbsp;</div>


</body>
</html>


<body>
<ul id="navigation bar">
<li id="navigationbar-01"><a href="noise.html"><span>Noise.</span></a></li>
<li id="navigationbar-02"><a href="shows.html"><span>Shows.</span></a></li>
<li id="navigationbar-06"><a href="#"><span>Contact.</span></a></li>
<li id="navigationbar-04"><a href="photos.html"><span>Photos.</span></a></li>
<li id="navigationbar-05"><#"><span>Visit.</span></a></li>

morehawes

10:44 am on Jul 14, 2010 (gmt 0)

10+ Year Member



Hi, I can't delve into your code right now but I only use CSS Sprites when optimising for page load times - which is a really good practise because the browser only needs to download one CSS image instead of many.

That said if I was you I would get everything looking how you want using individual background images and then if you want to optimise for page load use an online CSS sprite generator (do a web search) which will automatically combine the images into a sprite and give you the necessary CSS rules.

Doing it this way round means you don't have to fiddle with sprites when building your navigation - worry about that later.

brokenbynubs

1:05 pm on Jul 14, 2010 (gmt 0)

10+ Year Member



Right away what I noticed is that you're defining the background image many times, which will make the browser load the same image X amount of times instead of just once. As long as you define the background image in the parent element you will not need to re-define it in each place where it is displayed.

IE:
#navigationbar-01 a:hover{background-position:-40px -307px no-repeat}


Regarding your question, I'm not quite sure what you mean. You want the link text to be completely invisible, or you want the link text to sit on top of the images?

commanderW

12:26 am on Jul 15, 2010 (gmt 0)

10+ Year Member



Hi JRoo - I wonder if what you really want is an 'image map' ? I have never used 'sprites', but my understanding is that it is a way of displaying images where a bunch are grouped on a single image, and html is used to display only the part desired. This is supposed to save on load time.

An 'image map' is a way of using html to make one or more active hyperlink zones (called 'hot spots') on specific areas of an image.

I have seen plenty of tutorials on both, but never actually used either, so I can't offer more than this. 

#navigationbar-01 {left: 10px; top: 7px; width: 86px; height: 15px;}


Unless I'm missing something, you have not specified your 'left' and 'top'. I believe it should be 
margin-left: 10px;
or 
padding-left:10px;
or something else ?

JRoo

12:42 am on Jul 15, 2010 (gmt 0)

10+ Year Member



Hey, So I switched the code around (to the below...), it works a little bit better...but every time I try to add and define the "top" anywhere in the code, it messes with the image by putting a different part of the image on top of the image itself. I'm still a little lost.
The image basically looks like this:


1 2
3
4

The code that I'm currently using follows:

/* Default */

#nav {
width: 250px;
height: 350px;
position: relative;
background: url(menubarindex-pg.jpg);
margin: 0;
padding: 0;
}

#nav li {
float: left;
}

#nav li a {
position: absolute;
top: 0;
margin: 0;
padding: 0;
display: block;
height: 100px;
background: url(menubarindex-pg.jpg) no-repeat;
text-indent: -9999px;
overflow: hidden;
}

/*up state*/
li#nav_noise a {
left: 120px;
width: 50px;
background-position: -120px -400px;
}

li#nav_shows a {
left: 25px;
width: 50px;
background-position: 0 -500px;
}

li#nav_photos a {
left: 25px;
width: 50px;
background-position: -25px 0;
}

li#nav_visit a {
left: 100px;
width: 50px;
background-position: -100px 0;
}

li#nav_contact a {
left: 125px;
width: 50px;
background-position: -125px -800px;
}

/*hover state*/
li#nav_noise a:hover {
background-position: -120px -1000px;
}

li#nav_shows a:hover {
background-position: -25px -100px;
}

li#nav_photos a:hover {
background-position: -25px -2700px;
}

li#nav_visit a:hover {
background-position: -100px -200px;
}

li#nav_contact a:hover {
background-position: -125px -400px;
}

/*current state*/
#body_noise li#nav_noise a {
background-position: -120px -1000px;
}

#body_shows li#nav_shows a {
background-position: -25px -100px;
}

#body_photos li#nav_photos a {
background-position: -25px -3000px;
}

#body_visit li#nav_visit a {
background-position: -100px -200px;
}

#body_contact li#nav_contact a {
background-position: -125px -400px;
top: 150px;
}

commanderW

12:31 am on Jul 16, 2010 (gmt 0)

10+ Year Member



Hi JRoo - I had a chance to return here. Looking at the first block of code you posted, I have to say, your code is a mess !

- You have 2 sets of opening and closing body tags.
- The first body element begins with 2 break tags. Why?
- After that, there is only a 'div' which contains the text &nbsp; , which looks like it is supposed to be code. (Googling I get - A character entity reference for a 'non-breaking space' ? Gee I never knew about this).
This first body element looks like a total mistake. a large copy and paste error perhaps?

The next body element begins with your navigation bar.
- I notice that you only use id attributes. There are no classes. Usually this is not good. Id is the most powerful in the cascade. If you start out with this, the slightest conflict will send your page wonky.
- Each li has an a element with a span element inside it. But there is only one line of text, which is all inside the span. I don't see any styling for a span element in your css. It looks like the span tags are unnecessary.

In your old and new code
- I keep seeing position: absolute; and position: relative; but there are no further instructions. You have to declare the position with coordinates after you make this statement. Relative to what ? absolute exactly where ?

-You still have rules like 
top: 0
; and 
left: 120px;
Again, 
margin-top
? 
padding-top
? Broken looking phrases just like this do belong after the positioning rules discussed above. So the proper code would be like 

#youridhere
{
position:relative;
left: -20px;
}


Maybe your disembodied positioning rules and the half completed 'top' and 'left' etc. got accidentally separated.

This leads me to another question. Are you trying to modify a CMS template ? Because if you are I think you should forget it. You will only wind up beating your brains out against a brick wall. If you can't write your own, you are bertter off paying someone who you know can do it, to design one.

Finally - I would like to point you to w3schools. [w3schools.com ]. And for the position property [w3schools.com ] This site has a full reference with interactive examples for html, css, javascript and more. All the code, and how it is implemented. References are in right side column, tutorials in left.

It looks to me like you are new to code and are unsure of the syntax. Webmaster world and w3schools are all I've ever needed to learn to code my own pages.

Anyone - I seem to make a big stupid mistake every time I post advice like this on code. So if anyone spots an error in terminology or anything, I (and everyone else :) would be most grateful for a correction.

SuzyUK

9:00 pm on Jul 17, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



sprites and an "image imap" can and do go hand in hand, "placing the links" as the OP put it is still the hardest part as we can only "define" a rectangular area.. however with the exception of the most complicated map I've never really see it cause too much issues, you simply make your (positioned) rectangle fill the majority of the area the users mouse is likely to hit

I don't quite know how to explain it, have tried in the past, but this map [ago.tanfa.co.uk] is made with a sprite (sprite) [ago.tanfa.co.uk], and is also the equivalent of an image map, the HTML is a simple list which will work in any browser even of the "pretty" bit doesn't show

feel free to copy the source and see the co-ordinates in action in the CSS (it's europe.css which is applicable to this map) and I'm sure there's a lot more can be done these days via ajax!

brokenbynubs

1:28 pm on Jul 19, 2010 (gmt 0)

10+ Year Member



Regarding what CommanderW said:

No offense, but most of what you said doesn't apply with CSS or is heavily depreciated. Defining position: relative/absolute with no further positioning instructions will still make a difference. It will be positioned relative TO other elements on the page -or- absolute, which would ignore relative elements.

To OP:

For each element that is using a sprite(with background-position), you should be defining width and height. Without defining the size of each element, it will display incorrect locations on your sprite. If you would post your sprite I could define locations and sizes for you, if you'd like.

SuzyUK

8:17 pm on Jul 21, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You can (and often need to) use 
position:relative;
without co-ordinates..

using 
position:relative;
on an element is exactly the same as the default, which is 
position: static;
- except you can now not only use z-index (you can't do that with default static position) but it makes the element into a containing block [w3.org]

a Containing Block (CB) is not to be confused with a containing/wrapper div (common speak), the CB has much more important function when it comes to positioning other elements inside the element that has been designated the CB.

The other use which seems to confuse others is that relative positioning when used with co-ordinates is only offsetting the element it is not actually removing it from the flow, therefore if you have 2 paragraphs in a row and offset the first one using 
top: -100px; left: -100px;
the first should appear upward a bit and left a bit.. the second however will appear where it was always going to.. below where the first should have been not where it actually is offset to!

So it's confusing to say the least, it's not that you'd necessarily always want to position the element relative to another BUT that you want the elements inside it to be positioned relative to it - my non-tech way of thinking about it anyway! :)

The main use that position: relative; has in common usage is probably more the first way. You can use it without co-ordinates and with or without a z-index as necessary.
Then Absolutely Positioned element should be used inside the RP element. The AP elements will still be removed from the flow, but their "anchor point" will be secured avoiding having to calculate screen wide positions which would change on a centered layout anyway..

hope that helps a wee bit

commanderW

10:57 pm on Jul 21, 2010 (gmt 0)

10+ Year Member



Thanks for the education SuzyUK - Sorry you had to take the time to straighten that out for me. I did some research over the weekend and discovered that I am wrong about position: relative; , but I couldn't understand the rest of the explanation I read at all, and so wasn't sure it was correct. Your post here at Webmaster World makes sense of it though.

I've been learning and writing css/html for almost 4 full years now and I guess I still don't know much at all..

I saw your picture on your Twitter page. How can someone so young know so much ? You must have started writing code when you were like 9 years old or something !

SuzyUK

12:50 pm on Jul 22, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



LOL commanderW, you're Welcome! no need to apologise, it's good for me to stop me getting too rusty :)

and PS: flattery will get you everywhere HAHA! (of course I was only 9...!)

truth is I learnt the hard (or old school) way being a very early CSS adopter, and spent way too much of my [teenage years ;)] youth in the CSS Specs starting from CSS1 :o


PS: should also have added to that post above to clarify, the reasons for using margins instead of (or as well as) co-ordinates on a relatively positioned element is also legitimate - it may well be that you want the element to be a containing block, but that you don't want to offset it, you want to margin it so the following/preceding elements follow around it properly.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 4:26 pm May 1, 2026