SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Addict
    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 */
    To get rid of the margins, I added margin:0; to the h1 tags:
    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 */
    Why wasn't this in the orginal code? Is there something wrong with my method, or is there another way to do it?

  2. #2
    SitePoint Wizard DougBTX's Avatar
    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 */
    Just a stylistic thing, should make the code more legable, it is a tad bulky anyway...

    Douglas
    Hello World

  3. #3
    SitePoint Addict
    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 08:36.

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    If you have more than 6 levels of headings, you must have a REALLY detailed document!

  5. #5
    SitePoint Addict
    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.....

  6. #6
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tempus
    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
    Hello World

  7. #7
    SitePoint Addict
    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!

  8. #8
    SitePoint Evangelist ucahg's Avatar
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •