CSS Spirte help

I have combined four images into one



and want to display as



and when I click each seal, it should redirect to different domain. how to do it?

I tried few online CSS sprite generator but did not get it right. Some info to extract images .
Image1 : width: 240px; height: 45px; background-position: 0px 0px;
Image2 : width: 143px; height: 45px; background-position: 0px -55px;
Image3 : width: 162px; height: 47px; background-position: 0px -110px;
Image4 : width: 165px; height: 45px; background-position: 0px -167px;

 

You are using four separate anchors, right?

 

Err.. You kind of gave the answer yourself.
Assuming you have a blank.gif file which you use for filling, and footer.jpg for the merged image.

Resulting code will be:

<a href="http://www.domainone.com" title="domainone"><img src="blank.gif" width="240" height="45" style="background: url(footer.jpg) 0px 0px;" /></a>
<a href="http://www.domaintwo.com" title="domaintwo"><img src="blank.gif" width="143" height="45" style="background: url(footer.jpg) 0px -55px;" /></a>
<a href="http://www.domainthree.com" title="domainthree"><img src="blank.gif" width="162" height="47" style="background: url(footer.jpg) 0px -110px;" /></a>
<a href="http://www.domainfour.com" title="domainfour"><img src="blank.gif" width="165" height="45" style="background: url(footer.jpg) 0px -167px;" /></a>

Code (markup):

 

... and somebody doesn't know enough about CSS sprites OR proper markup to be opening their mouth on the subject.

No offense, but people are dumber for having seen that code. Spacer gif's, what is this, 1997?

 

I am happy to see your contribution then. Would you rather using image maps?
Think first, what is this going to be used for? Do you really need the image itself visible on your page? Does it relate to your website's content? No. This is not the 'part of website', even a '97 kid can tell that, no offense.

 

I haven't implemented CSS sprites before, but if I may ask, isn't the point of CSS sprites to combine what would be many images into one, thereby reducing HTTP request overhead, and from there to use CSS positioning to bring each image out? Doesn't adding a spacer gif defeat the point of that? What are the spacer gifs accomplishing by being in there?

 

* ding ding ding, got it in one. It's an extra handshake defeating the point; also, it's inline STYLE defeating the point of using CSS, and IMG tags for absolutely zero legitimate reason. Invalid IMG tags at that lacking the alt attribute at that. It provides zero images off graceful degradation, zero actual content for search engines or screen readers to use, and on the whole it is presentational markup that misses the entire point of HTML, CSS AND the incorrectly named "CSS Sprites".

That HNC-Web's code slides the images the wrong direction for how they're combined in the OP's second image... well, that's just icing on the cake.

I thought it was a bit premature, given the OP didn't provide enough information about what they're trying to do -- and the obvious question, are they actually using separate anchors for each of them?

However, if I was to make wild guesses, assuming the first one is NOT a link (doesn't look like it would be):

If one doesn't give a flying purple fish about accessibility, there is little reason for the markup to be more than:

<div id="trustedByMillions">
	<h2>Trusted By Millions</h2>
	<ul>
		<li class="trustE"><a href="http://www.domainOne.com">TRUSTe Certified Privacy"></a></li>
		<li class="positiveSSL"><a href="http://www.domainTwo.com">Positive SSL Secured Website"></a></li>
		<li class="securi"><a href="http://www.domainThree.com">Securi - Protect your Interwebs"></a></li>
	</ul>
</div>

Code (markup):

The above's CSS would put the image on the UL, pad the UL, then on the anchors, size the anchors as appropriate, and slide the text out of the way with text-indent:-999em; -- but that's accessibility rubbish since it fails "images off/CSS on".

Really, it should be using something like gilder-levin image replacement so that CSS on and images off, there's actually something for the user to, well... use. Likewise a few simple extra tags can be leveraged to give it a useful appearance images off. (I might even go so far as to color it the same -- but for now let's just keep it simple).

<div id="trustedByMillions">
	<h2>Trusted By Millions</h2>
	<ul>
		<li class="TRUSTe">
			<a href="http://www.domainOne.com">
				TRUSTe
				<span>Certified Privacy</span>
				<b><!-- image sandbag --></b>
			</a>
		</li>
		<li class="positiveSSL">
			<a href="http://www.domainTwo.com">
				Positive SSL
				<span>Secured Website</span>
				<small>All Transactions Are Protected</small>
				<b><!-- image sandbag --></b>
			</a>
		</li>
		<li class="securi">
			<a href="http://www.domainThree.com">
				Securi
				<span><span> - </span>Protect Your Interwebs</span>
				<b><!-- image sandbag --></b>
			</a>
		</li>
	</ul>
<!-- #trustedByMillions --></div>

Code (markup):

The CSS for that going something like this:

#trustedByMillions {
	position:relative;
	zoom:1; /* trip haslayout, fix legacy IE positioning bugs */
}

#trustedByMillions h2 {
	position:absolute;
	top:18px;
	left:16px;
	font:normal 24px/28px arial,helvetica,sans-serif;
	color:#6D1;
}

#trustedByMillions ul {
	list-style:none;
	position:relative;
	zoom:1; /* trip haslayout, fix legacy IE positioning bugs */
	overflow:hidden;
	padding-left:270px;
	font:bold 18px/20px arial,helvetica,sans-serif;
	background:url(images/trustedByMillions.png) 0 0 no-repeat;
}

#trustedByMillions li {
	float:left;
	overflow:hidden; /* prevent calculation bugs */
	height:64px;
}

#trustedByMillions a {
	position:relative;
	overflow:hidden;
	float:left;
	padding:14px 0;
	text-decoration:none;
}

#trustedByMillions span {
	display:block;
	font:bold 14px/16px arial,helvetica,sans-serif;
}

#trustedByMillions span span {
	display:none; /* hyphens for non CSS users */
}

#trustedByMillions small {
	display:block;
	font:bold 12px/16px arial,helvetica,sans-serif;
}

#trustedByMillions b {
	/*
		IF IE7 wasn't such a re-re, we could use :after instead of
		wasting markup on using B as a sandbag
	*/
	position:absolute;
	top:0;
	left:0;
	width:212px;
	height:128px; /* double height for hover */
	background:url(images/trustedByMillions.png) -270px 0 no-repeat;
}

#trustedByMillions a:active b,
#trustedByMillions a:focus b,
#trustedByMillions a:hover b {
	top:-64px;
}

#trustedByMillions .TRUSTe a {
	width:174px;
}

#trustedByMillions .positiveSSL a {
	width:202px;
	padding:6px 0;
}

#trustedByMillions .positiveSSL b {
	background-position:-444px 0;
}

#trustedByMillions .securi a {
	width:212px;
}

#trustedByMillions .securi b {
	background-position:-646px 0;
}

Code (markup):

I'd make it a 8 element image table, that way you can have hover states... something like this:
http://www.cutcodedown.com/for_others/buildSEO/images/trustedByMillions.png

Which put all together works something like this:
http://www.cutcodedown.com/for_others/buildSEO/template.html

Be sure to check it images off/CSS on, and CSS off... since that's one of the reasons to use image replacements and CSS sprites.

As with all my examples the directory:
http://www.cutcodedown.com/for_others/buildSEO/

... is wide open for easy access to what I did.

 

It is, I knew that. I just wanted to simplify the output ignoring that, but yeah, it does defeat the purpose.

@deathshadow
I haven't really paid attention to mark-up, like I said, just the output. But yeah, with your complete and detailed answer, you are absolutely right, and I am definitely wrong. Thanks for your answer, it is way better than the earlier one, at least now I was able to learn about my mistake, rather than just being pointed out rudely.

 

First off, apologies if that came off harsh; It's just how I am.

That's common enough a mistake -- HTML 3.2 (and by extension the idiocy known as transitional AND much of HTML 5) were built entirely from that type of thinking...

You have to ask the question "Which output"? Big screen? Little screen? Screen Reader? Search Engine? Print? Teletype? Commodore VIC-20 tunneling through another machine? If all you think about is one screen resolution when making your HTML, you're missing the point of HTML -- Device and capability independent content. That's what semantic markup is about, and what separation of presentation from content is for. It returns HTML to the original intent of HTML 2, throwing all the mistakes of HTML 3 in the trash. (hence the deprecation of FONT and CENTER, and why how people are using 5's "ASIDE" is the exact same rubbish!)

It's why when I make a website layout and graphics are at the END of the process, not the start. Semantic markup of the content or at least a reasonable facsimile, so that I have a baseline that works CSS off and is useful for search engines, screen readers, and less capable devices. I then make my layout(s) in CSS (yes, that's plural) for each of my major targets -- then and only then do I start up the paint program or bring in the artist to make the graphics to be hung on the various layouts.

One of my older signatures used to read "If you are thinking about what it is going to look like when you choose your tags, you're probably choosing the wrong tags" -- and it's as true today as it was then.

 

Here's a general CSS sprites question, since I've never really used it, but am interested. I'm modifying a forum, which has a number of icons. For example: different icon images for read, unread, locked, and pinned threads. These will appear once per thread in the thread display. Would it be good practice to combine them all into one image, do a one-time figuring out of the pixels, and then use CSS sprites? It would cut 5-6 header requests out of the equation.

But the code would be more complicated as a result. Yuck! And to start with, the thread listing (for example) will list every "latest poster" 's avatar. So while I'm cutting a few header requests, it seems like a drop in the bucket. There are probably 10-20 distinct avatars anyway.

Second there are a variety of sets of icons. Not all icon sets will appear on every page (the index page, for example, has other icons but not the thread markers). When a CSS file references an image, will that automatically load the image as the CSS file is processed? Or will it depend on if the element in question exists as the page loads? If the former, I feel like I should combine every dang icon into one image. If the latter, I may as well keep it separate and have each page load only the imageset it needs.

 

I would say 5-6 is worth it even if there are 20 more files; in fact, with 8 being free and the overlap of requests depending on sizes that could still result in as much as a 50% reduction in page size... This is more true if you have a whole slew of icons and only some are used on certain pages -- because with CSS sprites you can think of the unused images as being pre-cached for the pages they are used on... meaning you might be sending a bit more data on firstload, but subsequent page-loads will need no extra transfers. That's a really good thing on something like a forums where the average visitor WILL go to multiple pages. (the average I found when I was maintaining a really large forums was around 24 pages per user per visit).

Likewise using CSS sprites means simpler markup (no big-ass img tag, just a class and a sandbag, possibly not even a sandbag) but more CSS -- with CSS being cached across pages you use less bandwidth if they visit more than one page, again thanks to caching; likewise the extra CSS for other pages can be considered pre-caching, all for just a hair more bandwidth used on firstload. This is why if you have an active forums, if you have the choice between using more HTML or using more CSS to do something, put it in the CSS.

... and sometimes you don't even need classes. Take the average forum's box where you have "unread", "you posted in this thread", "locked", etc, etc... you can use all the little phrase element tags empty instead of classes to say what image should be there.

<td class="statusIcon">
  <div>
    New<br />Locked<br />Sticky
    <b></b><del></del><strong></strong>
  </div>
</td>

Code (markup):

SPAN = read, B = unread/new, DEL = locked, STRONG = sticky... the div being a fixed sized position relative container to make it easier to chop off excess images-off text and to let you apo the phrase tags more easily. This way you don't end up using classes on a bunch of span. You just apo them one atop the other with transparency (B and SPAN likely being non-transparent so as to erase the images-off text). If you have all those images pre-combined, you could also just use a class on the TR, which could then be used to target not only the 'statusIcon' column, but also color code the row.

 

Thanks for the informative post! I followed you right up to that code block, where you really lost me. How does that not result in a td.statusIcon that always reads

? And what's the advantage of not using class names? I was thinking of just doing the following, in pseudocode:

if (read)
   <td class="icon read">read</td>

if (unread)
    <td class="icon unread">unread</td>

if (sticky)
    <td class="icon sticky">sticky</td>

...etc

Code (markup):

And then, via CSS, altering the background image positions and throwing a -3000em text-indent on there. Is any of that bad practice?

td.icon {background: url (...) ... }
td.read {background-position: ... }

Code (markup):

 

The example code was for a topic that was ALL THREE. Something you might not be thinking about, is what if a topic is sticky (or if you prefer pinned), unread AND locked? You want to show all the possible states -- doing it this way means you only need images for each state (in this case four) instead of all possible combinations (which works out to eight!)

Think about it, an unread topic can be sticky, not sticky, locked or not locked -- that's 4 possible outcomes just for unread...

Since the gilder-levins and overlays would be APO, you could actually do it thus in your PHP:

echo '
	<td class="statusIcon">
		<div>
			',
				$topic['read'] ? 'No New<span></span>' : 'New<b></b>',
				$topic['locked'] ? '<br />Locked<del></del>' : '',
				$topic['sticky'] ? '<br />Sticky<strong></strong>' : ''
			,'
		</div>
	</td>';

Code (markup):

The extra tags being there so that you can use gilder-levin over the text, instead of the inaccessible approach of nonsense like hiding the text with text-indent. Likewise the DIV is there so you can APO them, since APO off a TD is unreliable.

an unread non-sticky, non-locked post would output:

	<td class="statusIcon">
		<div>
			New<b></b>
		</div>
	</td>

Code (markup):

A post that's been read, is sticky/pinned and locked would output:

	<td class="statusIcon">
		<div>
			No New<span></span><br />Locked<del></del><br />Sticky<strong></strong>
		</div>
	</td>

Code (markup):

The CSS would then go something like this:

.statusIcon {
	width:0.1%; /* force to shrink to fit */
	padding:4px;
	text-align:center;
	vertical-align:middle;
}

.statusIcon div {
	position:relative;
	overflow:hidden; /* in case text is too big, cut it off */
	width:32px;
	height:32px;
	/* normally I bitch about fonts this small, but it's images off fallbacks so... whatever. */
	font:normal 10px/12px arial,helvetica,sans-serif;
}

.statusIcon div * {
	position:absolute;
	top:0;
	left:0;
	width:32px;
	height:32px;
	background:url(images/statusIcons.png) 0 0 no-repeat;
}

.statusIcon b {
	background-position:0 -32px;
}

.statusIcon del {
	background-position:0 -64px;
}

.statusIcon strong {
	background-position:0 -96px;
}

Code (markup):

The advantage being it's less code than the multiple sandbags you'd need to handle all your states -- unless of course you were to make pre-combined images for each state.

 

Ohhhhhhhhh, that makes *much* more sense now.


I see why I overlooked it. There would at most be one marker icon per topic, regardless of the state. At some point, I decided, it's useless to inundate the user with extra contextual information just because we can.


More specifically, there's
-Read
-Read&Posted
-Unread
-Unread&Posted
-Moved
-Locked
-Locked & Unread


The stickied threads have an icon in a separate place to differentiate them (to make it more obvious that they are stickied threads). Other than that, only one of the above states is possible at a time. There is *some* info lost - such as whether a locked thread is one you've posted in or not, but it isn't very important.


Anyway, all that is extraneous, just explaining the setup and the source of my initial confusion


I had to look up Gilder-Levin, but I see how you are 'hiding' the text now. I didn't know about that technique before - I like it. It makes more sense than text-indent, because in the event a fallback is actually needed, the text will actually be there rather than just existing, somewhere, in the HTML. And APO is 'absolute position', yeah?


Thanks!

 

Use anchor links and add the class you used for each sprites.