SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
-
Oct 5, 2003, 15:10 #1
- Join Date
- Jul 2003
- Location
- Texas
- Posts
- 330
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Doug's Header Image Replacement - Margins?
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:
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 */
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; margin:0;} /*/ h1 { text-indent: -100em; margin:0;} /* End Hack */
-
Oct 7, 2003, 11:04 #2
- Join Date
- Nov 2001
- Location
- Bath, UK
- Posts
- 2,498
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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:
Code:/* 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 */
DouglasHello World
-
Oct 8, 2003, 09:08 #3
- Join Date
- Jul 2003
- Location
- Texas
- Posts
- 330
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?Last edited by tempus; Oct 8, 2003 at 09:36.
-
Oct 8, 2003, 09:24 #4
If you have more than 6 levels of headings, you must have a REALLY detailed document!
-
Oct 8, 2003, 09:38 #5
- Join Date
- Jul 2003
- Location
- Texas
- Posts
- 330
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Well if you have many pages, each with the same header pictures but different sub header pictures.....
-
Oct 8, 2003, 09:46 #6
- Join Date
- Nov 2001
- Location
- Bath, UK
- Posts
- 2,498
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by tempus
hth,
DouglasHello World
-
Oct 8, 2003, 09:50 #7
- Join Date
- Jul 2003
- Location
- Texas
- Posts
- 330
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Haha....yeh, I just looked at my code and realized that a second ago, thanks for the assistance anyways!
-
Oct 8, 2003, 12:53 #8
- Join Date
- Apr 2001
- Location
- Sarnia, Ontario, Canada
- Posts
- 434
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
Love it? Hate it? Helpful? Useless?
Use the rate button to let me know what you think of my post!
Bookmarks