Image Replacement

HTML & CSS
1

Spawing a new thread from my Moby-Dick one here.

(Stomme poes, if you are out there, please join in.)

So I caught HELL from DeathShadow for hiding my Company Name in an <h1> off screen so that search engines could find me, but so I didn’t have to have the un-needed text cluttering up my Home Page. (Especially since I have a logo.)

I have three issues…

1.) I’m not entirely certain that I understand which one to use or how to do it.

http://www.mezzoblue.com/tests/revis...e-replacement/
the last one.

Gilder-Levin image replacement is what we use to place an image on top of text. [/quote]

Problem is that “the last one” is the “Shea Enhancement”?! :-/

2.) The Gilder/Levin Method code on the page above seems broken?!

Attached is what I’m seeing on this website…

3.) My <h1> is going to be wider than my Company Logo unless I make the text pretty small.

Specifically, my actual logo is 220px x 36px - which is not the one on my Test Site here…
http://www.doubledee.byethost2.com/

The Text I want to have is…

<h1>My Company Name: How to start your Own Small-Business</h1>

Is that going to work?

Debbie

2

Hi,

The basic replacement goes like this:


h1, h1 span {
	width:220px;/* image width */
	height:36px;/* image height */
	display:block;
	overflow:hidden;/* hide overflow*/
	font-size:100%;/* or whatever it needs to be if images are missing */
	margin:0;
	position:relative;
	line-height:1.0;
}
h1 span {
	position:absolute;
	left:0;
	top:0;
	background:url(image/logo.gif) no-repeat 0 0;
}




<h1>My Company Name: How to start your Own Small-Business<span></span></h1>

The background is applied to the span which is placed on top of the text to hide it and the h1 sized to fit the image and any overflow:hidden.

It doesn’t matter that the text is too wide because it will be hidden with overflow:hidden. You should just make sure that the important part of the text is visible in that 220 x 86 space if images are missing. Or if you have room on the page you can make the header width wider to accommodate more text and just hide it with a background color on that background rule.

The technique has one drawback in that you cannot easily use transparent images because then the text shows underneath which is what is happening in that example you were posting above. You could possibly shim another image underneath depending on circumstance but its not usually viable. Therefore avoid transparent images if using this technique.

3

Paul,

Thanks for the response.

I am actually tripped up on a related issue, and didn’t have time to respond back sooner that I had figured some of it out. But - as always - I like your detailed explanations better than what is usually online! :slight_smile:

What exactly does adding a width and height to an <h1> do? (I mean it looks obvious enough, but I’d like to hear how you explain it.)

And why are we adding display: block; ??


h1 span {
	position:absolute;
	left:0;
	top:0;
	background:url(image/logo.gif) no-repeat 0 0;
}

The last line above is what has tripped me up this afternoon…

Off Topic:

I realized that there is some logic I need to figure out, because my Header will have this Image Replacement thingy for the Home Page, but on every other page, my Header needs to have my old-fashioned Logo. So I need to use some PHP to programatically shuffle the right HTML in at the right time… :-/

So that last line of your code above breaks when I reference it from a page in a different directory. See my other thread here… background: url() not working


<h1>My Company Name: How to start your Own Small-Business<span></span></h1>

The background is applied to the span which is placed on top of the text to hide it and the h1 sized to fit the image and any overflow:hidden.

Why does it hide it automatically?? (I would think you’d need a z-index…)

It doesn’t matter that the text is too wide because it will be hidden with overflow:hidden. You should just make sure that the important part of the text is visible in that 220 x 86 space if images are missing. Or if you have room on the page you can make the header width wider to accommodate more text and just hide it with a background color on that background rule.

Lemme see if I follow you…

If I want all of this to be displayed…

<h1>My Company Name: How to start your Own Small-Business<span></span></h1>

…if the Logo image is missing, then I could take my 220px wide logo and add some white space to the right of it thus maybe making it 500px wide and then all of the text above would be displayed if the Logo image was missing? Is that what you meant?

The technique has one drawback in that you cannot easily use transparent images because then the text shows underneath which is what is happening in that example you were posting above. You could possibly shim another image underneath depending on circumstance but its not usually viable. Therefore avoid transparent images if using this technique.

That won’t be a problem, so I’m good there.

As always, THANKS, Paul! :slight_smile:

Sincerely,

Debbie

4

[QUOTE=DoubleDee;5007320
What exactly does adding a width and height to an <h1> do? (I mean it looks obvious enough, but I’d like to hear how you explain it.)
[/quote]

By default the h1 would be width:auto which for a block element would expand horizontally to the edges of the containing block. It’s height would be whatever its content made it stretch to. Therefore by setting height and width we make the h1 match the size of your image exactly and thus fit into the space that the actual image would have taken up. Any content in the H1 that is greater than the width and height will just spill out unless we hide the overflow.

And why are we adding display: block; ??

That was a very old bug (safari IIRC) where it needed display:block on absolute elements (the span) but that bug is long gone so you can remove it. (As an aside Safari still has this bug on generated content that is absolutely placed and needs display:block also).

Anyway you can remove the display:block unless you want to also add an anchor into that rule to link back to the home page etc.

The last line above is what has tripped me up this afternoon…

Off Topic:

I realized that there is some logic I need to figure out, because my Header will have this Image Replacement thingy for the Home Page, but on every other page, my Header needs to have my old-fashioned Logo. So I need to use some PHP to programatically shuffle the right HTML in at the right time… :-/

That’s a PHP question if you want to deliver separate content although I guess you could just add a class to the body tag and hide and show content as required but inserting the correct html would be the correct approach.

So that last line of your code above breaks when I reference it from a page in a different directory. See my other thread here… background: url() not working

I’m not following you there. CSS paths are always relative to the CSS file so if you include a css file the paths don’t need changing in the css rules themselves because they are always related to that css file. You may have to adjust the path to the actual file itself but never the rules inside.

Why does it hide it automatically?? (I would think you’d need a z-index…)

Positioned elements always trump non positioned elements so you don’t need an explicit z-index in that simple situation.

Lemme see if I follow you…

If I want all of this to be displayed…

<h1>My Company Name: How to start your Own Small-Business<span></span></h1>

…if the Logo image is missing, then I could take my 220px wide logo and add some white space to the right of it thus maybe making it 500px wide and then all of the text above would be displayed if the Logo image was missing? Is that what you meant?

Yes that’s what I was saying but it depends on whether your page has the room for that scenario.

You can test the image replacement technique in Firefox by simply hiding images from the toolbar or by switching css from the toolbar or by switching both off and then you can see all the options and what it will look like (other browsers will also let you switch things off like that).

Things don’t have to be perfect in the alternate scenarios but just usable. Sometimes though you can make it look good and sometimes there just isn’t room on the page to display all the text that the image was hiding.

That won’t be a problem, so I’m good there.

As always, THANKS, Paul! :slight_smile:

Sincerely,

Debbie[/QUOTE]