SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: GIF h1 image

  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    GIF h1 image

    I am currently working on creating a webpage Live Mosaics for a friend. I am trying to implement the graphic header method described here http://www.sitepoint.com/article/hea...es-css-xhtml/3 .
    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 */
    I had previously had everything working exactly the way I wanted, however there were many errors when running through the w3c validator. I used HTML tidy, and used the code they provided. Now the header has completely disappeared! Anyone able to let me know what I am doing wrong?

    Thanks!

    Zac

  2. #2
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah! I've found the issue. I was leaving the h1 tag in the head of the document. moved to body, all is well.


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
  •