I might markup the XHTML like the following:
<h1>Rogie's site</h1>
But, that is just too simple. I can’t very well replace all <h1> tags with a header, that would be ridiculous. I would create the XHTML like the following:
<div id="masthead">
<h1>Rogie's site</h1>
</div>
which looks like this:
Now, we are getting where we need to be to start the CSS. First, we need to have an image for the header instead of the text, so I have one here to use. This little bad boy is 450px wide by 100px high…sweet…good to know.
Let’s whip out some rockin’ CSS now:
div#masthead{
display:block; //just in case
width:450px;
height:100px;
background:url(http://komodomedia.com/wp-content/uploads/2006/07/sample_header.gif) left top no-repeat;
}
Whoa there fella. Ease up. Let’s not go too fast now. Let’s see what it looks like now:
Sweet, now we are getting closer, however, we still have one issue: The text is still showing up. This is where image replacement techniques come in. I personally like the text-indent method, but do your research and find which method is the best for your audience and purposes.
Alright, now I will add the new CSS:
div#masthead{
display:block; //just in case
width:450px;
height:100px;
background:url(http://komodomedia.com/wp-content/uploads/2006/07/sample_header.gif) left top no-repeat;
}
div#masthead h1{
text-indent:-9000px; //move the text 9000 pixels to the left (off the screen)
}
Let’s see what that does:
A problem may arise when the user resizes their browser text. To simulate this, I have made the header much larger. Check this out:
Do you notice that there is a large gap above the image? That is because the header margin, padding, and line-height has outgrown the height of the box. To correct this, we need to add one more CSS rule (changes in bold text):
div#masthead{
display:block; //just in case
width:450px;
height:100px;
background:url(http://komodomedia.com/wp-content/uploads/2006/07/sample_header.gif) left top no-repeat;
overflow:hidden;
}
div#masthead h1{
text-indent:-9000px; //move the text 9000 pixels to the left (off the screen)
}
Let’s see it now:
Great! Our technique is finished. Now we have a stylized header, but a semantic tag to describe it. Any questions/comments?
Nice ;-)
Tis logical and beautifull.
Now, as with most header images, how will you accomplish making it a link to the homepage?
this is not a new thing! :D,but your desgin is very good!
@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#mastheadto target a link within the masthead, like this:div#masthead a#home-link.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;
}
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.
@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.
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…
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/
im learning html but i can not see CSS codes in Dreamweaver>? why?
Why would I go into so much pain when I can simply use -
–>
what about to change color in mastehead to black