Comments on: CSS Trickery Part 4: Semantic Image Replacement

By: peter

peter — Fri, 28 Sep 2007 11:10:26 +0000

what about to change color in mastehead to black

By: Bikram

Bikram — Thu, 05 Jul 2007 08:31:48 +0000

Why would I go into so much pain when I can simply use -

–>

By: maribel

maribel — Wed, 11 Apr 2007 16:07:53 +0000

im learning html but i can not see CSS codes in Dreamweaver>? why?

By: Amit Lamba

Amit Lamba — Mon, 08 Jan 2007 05:48:56 +0000

There is a more accessible way to do image replacement (IR). There are pros and cons for all the variations out there, but I like the Leahy/Langridge and Gilder/Levine IR techniques which both deal specifically with the CSS on, Images Off problem.

You can find more info here:
http://www.mezzoblue.com/tests/revised-image-replacement/

By: Arnor

Arnor — Thu, 10 Aug 2006 13:03:26 +0000

Now; I use this technique myself – and it was just a matter of hours after I published the new design, that someone pointed out the fact that if you (for some reason) choose to browse with CSS – but sans images – nothing at all shows up…

I honestly doesn’t think it’s much of problem, as both text-browsers and screenreaders just turnn the whoe CSS off.. As for low-bandwith-users, I usually reccomend they do the same…

But it’d still be nice if anyone knew of a workaround…

By: Rogie

Rogie — Fri, 21 Jul 2006 16:56:50 +0000

@Andrew: Sure you could man. I created a div for the masthead because a lot of times, people want to put more in their masthead than just a header. But, it looks like you got it nailed, so either way works.

By: Andrew Ingram

Andrew Ingram — Fri, 21 Jul 2006 16:18:04 +0000

hm, it seems the tags in my comment were stripped, but basically it was the same as your markup but with the div removed and the id moved to the h1 tag.

By: Andrew Ingram

Andrew Ingram — Fri, 21 Jul 2006 16:16:43 +0000

I had heard that you’re only really supposed to use h1 once per page, but I imagine this is a subjective issue.

But couldn’t you achieve the same results with the following?

Rogie’s site

and

h1#masthead{
display:block;
width:450px;
height:100px;
background:url(http://komodomedia.com/wp-content/uploads/2006/07/sample_header.gif) left top no-repeat;
overflow:hidden;
text-indent:-9000px;
}

By: Rogie

Rogie — Thu, 20 Jul 2006 14:21:08 +0000

@greengnn: Thanks, this tutorial is not intended to be a new thing, but merely a recap of CSS tricks I use often. It is an attempt to help people new to CSS have a collection of general tricks and techniques to help them on their way :) @Sam: If you are using a link, you would probably want to change all of the CSS rules that target div#masthead to target a link within the masthead, like this:

div#masthead a#home-link.



By: greengnn
greengnn — Thu, 20 Jul 2006 11:18:35 +0000
this is  not a new thing! :D,but your desgin is very good!