Doug's Header Image Replacement - Margins?

[tempus]

I just used Doug's article (http://www.sitepoint.com/article/1221) on Header Image Replacement on my site. In the article he surrounds the image with <h1> tags. Because of this, it creates a margin around the picture.

Original code:

<h1 id="album"><span></span>My photo album</h1> 

/* repeated code per header */
#album, #album span {
 width: 300px; height: 75px;
 background-image: url(header.gif);
 background-repeat: no-repeat;
}
#album span { margin-bottom: -75px; }
/* non-repeated code */
h1 span {
 display: block;
 position: relative;
 z-index: 1;
}
/* IE5 Mac Hack \*/
h1 { overflow: hidden; }
/*/
h1 { text-indent: -100em; }
/* End Hack */

To get rid of the margins, I added margin:0; to the h1 tags:

<h1 id="album"><span></span>My photo album</h1>
 
/* repeated code per header */
#album, #album span {
 width: 300px; height: 75px;
 background-image: url(header.gif);
 background-repeat: no-repeat;
}
#album span { margin-bottom: -75px; }
/* non-repeated code */
h1 span {
 display: block;
 position: relative;
 z-index: 1;
}
/* IE5 Mac Hack \*/
h1 { overflow: hidden; margin:0;}
/*/
h1 { text-indent: -100em; margin:0;}
/* End Hack */

Why wasn't this in the orginal code? Is there something wrong with my method, or is there another way to do it?

[DougBTX]

Your call, it shouldn't affect the functionality of the code.

I would on the other hand not put the margin: 0; section inside the hacked area, instead I would put it just after the /* non-repeated code */ part, like so:

/* non-repeated code */

h1 { margin: 0; }

h1 span {
 display: block;
 position: relative;
 z-index: 1;
}

/* IE5 Mac Hack \*/
h1 { overflow: hidden;}
/*/
h1 { text-indent: -100em; }
/* End Hack */

Just a stylistic thing, should make the code more legable, it is a tad bulky anyway...

Douglas

[tempus]

Thanks for the help.

That question aside, what happens when you use up all h tags, i.e. h1...h2...h3 (arn't there only 6)? If so, What can you use as an alternative?

[vgarcia]

If you have more than 6 levels of headings, you must have a REALLY detailed document!

[tempus]

Well if you have many pages, each with the same header pictures but different sub header pictures.....

[DougBTX]

Well if you have many pages, each with the same header pictures but different sub header pictures.....

That's the fancy bit: each header image you want to use gets its own unique ID. You use that ID to set the image, width and height, so you can have as many headers as you like, but with different pictures/text.

hth,
Douglas

[tempus]

Haha....yeh, I just looked at my code and realized that a second ago, thanks for the assistance anyways!

[ucahg]

FYI H1 is the top-most heading, and H2 is a subheading of H1. H3 is a subheading of H2, and so on and so forth. So you should never use H2 without already having an H1 in a document, and so on and so forth with the other levels.