Quick question about headers and CSS3

I am trying to design a site using nothing but pure HTML5 and CSS3. Now I realize that CSS3 is not set in stone yet but I am working on the header and what I used to do on the HTML page was have the <h1>Name of Site or whatever</h1> then in CSS have header {text-align: -90000px;}. This would cause the text to be moved WAY over to the left so basically it would not show behind a header image. Is there another way to do this in CSS3 or should I still use this method? Thanks.

In reality, CSS3 is a lot more ready that HTML5, which is also prenatal, so you are really jumping the gun with it. At the moement, ‘pure’ HTML5 is not possible, as it is not yet supported by any browser, so needs to be supported with some CSS and JS hacks.

Anyhow, image replacement is still a CSS2 domain. If your image is not transparent, a better image replacement method is the ‘Gilder Levin’ strategy, demonstrated here:


If the image is transparent, then you are best off doing what you’ve descried above. :slight_smile:

Thanks Ralph. You have come through for me again. The header is not transparent so I will continue to use the old standby way of styling it. I will also keep reading and learning about what HTML5 and CSS3 have in store for the future. Besides the books here, do you have any other recommendations for reference type books? What I mean by that is a book I can pick up, look for what I want to do and flip to a page that has a code snippet for what I am trying to accomplish? Thanks again.

The Ultimate HTML and CSS references book(s) are great. There are no code snippets but it has al the properties and lists the support. It’s very useful :).

To be honest, these days I find the internet is better for that purpose. There are, however, lots of HTML5/CSS3 books around. But they fall out of date quickly, because the ground keeps shifting daily. Proposed elements etc. come and go rapidly … which is another reason why online sources can be more reliable, as many of the better sites that track HTML5 and CSS3 closely keep track of these changes.

Thanks Ryan and Ralph. Any good sites you can recommend that keep up with the constant changes? Of course, besides Sitepoint! :wink:

For CSS3, http://www.css3.info/

For HTML5, check out something like http://html5doctor.com/

Go to W3C.org.

Read everything there.