Uh-oh! How do I slice this image?

HTML & CSS
1

Hey guys,

I was trying to slice and code this design here, but I really don’t know how to make that header at the top extend to infinity on both sides…

I mean, usually I would just put 1px bg image on repeat-x or something…but I don’t know what to do in this case…the colors change…

any ideas? I am really stuck. Any ideas would help :frowning:

http://img198.imageshack.us/img198/8859/underconstructiono.jpg

2

Of course you could use a sprite and cut that image down to only 5k.

http://www.pmob.co.uk/temp/ontario2.htm

You would still need to add styling for when images are off as Jason has done but I was just showing how a sprite could work.:slight_smile:

3

Yeah, I just wanted to show that it can be done. I do like how it looks better images off, but really if you’re talking graceful degradation there’s no real reason to go THAT far in preserving it. My first example is the code I’d probably use for a deployment site.

Happens to the best of us when cutting and pasting from other people’s code. The sad part is you see it all the time in production code from many back-end developers.

4

oh wow, that last part was embarrassing.

What you said does make sense! Thanks a lot!! You are really awesome! :smiley:

5

I’m assuming the total loading time is based on you calling each of our servers instead of copies off the same server.

Why do I say that? Because off the same server there’s no reason for three files totalling 13k to take longer to load than 4 files totalling 21k… See the logic disconnect there?

Also you have to think his would be five files once you move the CSS into an external stylesheet. More files == bad since that will take longer to load due to more handshakes with the server.

Though from an SEO standpoint we’re about equal really. Empty tags have no semantic impact, SPAN and DIV has no semantic impact, so the only tag that implies meaning to the content is the H1 we both used.

You put the same text in each of ours, they shouldn’t really rank any differently; that’s what semantic markup is about.

The real difference between his and mine is graceful degradation - I put more effort into the images off appearance which also works well for handheld like in Opera Mobile and Mini.

Oh, and I advise against using Meyer’s reset, that fat bloated train wreck usually causes more problems than it solves, which is why I use a much smaller reset in my code as the only thing I want reset is margins and padding on some block level tags and borders on two tags. Not sure if that’s what’s messing it up, but I’d not be surprised. I’d also suggest losing the charset declaration in the CSS - it’s not breaking anything, but it also serves no purpose since valid CSS is ASCII7 only anyways, so character sets shouldn’t even be an issue. (I’ve NEVER understood why people bother with that)

That or it’s the fact you’ve got TWO doctypes and HEAD declarations.

6

The image is missing because you put the reset after the default css and therefore it rubbed out the background image on the body element because the reset sets the body to transparent. The reset styles should always be the first thing the page sees otherwise it will interfere with any settings you may have made previously.

You would have needed to change the top position of the background image to zero also to make it match up.

Jason spent more time on his example so I would run with that :slight_smile:

7

WOW! You guys are amazing!!! This was really smart thinking from both of you :slight_smile:

And deathshadow60, I looked at your code right now, and it is looking much cleaner!

Pingdom - Full page results:

Deathshadow60
Total loading time:2.4 seconds
Total objects:3 (13.1 KB)

Paul O’B
Total loading time:1.9 seconds
Total objects:4 (21.5 KB)

So which one is a better option to go with for SEO purposes??

And btw, I tried Paul’s method with the RESET, and for some reason its not working right…

check it out:
http://gauravmali.com/OTC/comingsoon.html

8

Nice work Jason. :slight_smile:

Yes if you are careful with how you make the images then sometimes a large image makes sense instead of slicing. The last example is good to show what can be done without using an image but as you say it makes the code more complicated than it needs to be and I would prefer to keep the code simple maybe at the expense of a larger image.

9

… and here it is with 90% of that drawn as borders and backgrounds instead of image:

http://www.cutcodedown.com/for_others/gmali90/lessImage/template.html

Shaves 4k off that center image (which I remastered slightly) bringing it down to 8k… Not sure it’s worth all the effort though given that the markup grew to:

<div id="headerWrap">
	<i></i><em><em></em></em>
	<h1>
		<span>
			Ontario
			<span>Table & Chair Inc</span>
		</span>
		<b></b>
	</h1>
	<div>CALL US: (519) 585 1000</div>
<!-- #headerWrap --></div>

and it’s more CSS as well… Just wanted to show that given it’s all flat borders and colors you don’t necessarily need the extra images at all. It really starts to border upon tag abuse, but I’ll do damned near anything to avoid using extra classes if it can be avoided.

10

Paul’s kind of on the right track, though really my answer might surprise you…

DON’T! Do not even bother ‘slicing’ it. This is part of why the PSD first approach is, well… flawed. I’d end up making an all new image to handle that.

First, to keep the filesize down, the 100% width uniform green bar? Use bottom-border to make that. Likewise, the “call us” text? GET THAT AS TEXT ON THE PAGE!

Though the real magic? That center 662x204 area is going to be 10-12k no matter how well you encode it unless you resort to going nuts with jpeg; Me, I’d use .png, but get this; I’d make it a single image with the entire background on it as 3072x224. PNG encoding will make that a single 12K file. Saves you two handshakes, which should balance out the half a k that extra long repeated area ends up.

Finally, I’d toss it ALL into a H1, no separate div needed, with a bunch of nested span, and a empty bold tag for the image replacement.


<h1>
	<span>Ontario
		<span>Table & Chair Inc
			<span>CALL US: (519) 585 1000</span>
		</span>
	</span>
	<b></b>
</h1>

Which ‘working’ looks something like this:
http://www.cutcodedown.com/for_others/gmali90/template.html

Be sure to look at it with images disabled to see what I was doing with all those extra span…

Though with that specific image, I’d consider taking it a step further, and removing almost ALL of the image elements. As it is you’ve got some rather ugly aliasing going on on those border lines – while HTML borders would be nice and crisp.

Gimme a bit, I needed a challenge, let’s see just how much of that ‘image’ we can just get rid of.

11

Here’s a rough example.

12

Hi,

There are a number of ways you could do this but probably the easiest is first to repeat the right side of the graphic as a slice applied to the body element and repeated along the x axis.

You could then just overlay an absolute element that was 50% wide and the correct height and repeat the left graphic section on it. This would then cover the left 50% only and give you the everlasting graphic effect you wanted.

You would then just again overlay the centered header section to hide the middle join.