SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Styling header sections that are just a graphic

    Hi, everyone. Sometimes the top of the webpage is just a graphic, so you can code it with just CSS, like this:
    Code:
    #header {
         height: 154px;
         background: #FDF7F1 url(images/banner.gif) no-repeat center;
    }
    But then the HTML looks weird because it's empty:
    Code:
    <div id="header">
    </div><!-- header -->
    So I've taken to inserting a heading, like this
    Code:
    <div id="header">
         <h1>Name of Website</h1>
    </div><!-- header -->
    And then in CSS
    Code:
    #header h1 {
         display: none;
    }
    What is your opinion? Are there any drawbacks to this? Is there a better way of doing it?

  2. #2
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    I don't think there is anything wrong with the way you had it originally with an empty div. For clarity you could put a html comment above the div stating its purpose and noting it has a background image assigned in the css. I don't see the point of having a dummy <h1> in the div with display: none; unless of course you are trying to fool a search engine bot with a fake heading tag.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Bobby Hall View Post
    What is your opinion? Are there any drawbacks to this? Is there a better way of doing it?
    There are better ways, yes. The problem with the first version is that it's basically meaningless. Whatever information is in the background image (e.g. title) is will not be seen by some visitors, and it won't be seen by search engines either. The second method is a little better, in that you at least have some h1 text in there that search engines can see. But some people (such as those using screen readers) won't see it (because of display: none), so they will get no title at all.

    The best method is to use image replacement, whereby the H1 is in place but an image is placed over the top of it. See a simple example here:

    http://www.pmob.co.uk/temp/headerreplacement2.htm

    http://www.pmob.co.uk/temp/headerreplacement3.htm

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much, Ralph. I'll check out that method. I didn't realize that display:none meant readers also ignored it, so that's no good. My intent was precisely to provide text for both accessibility and SEO (but not trying to fool any search engine, Max! )

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Bobby Hall View Post
    My intent was precisely to provide text for both accessibility and SEO
    I still recommend the method I links to above, but for future reference, if you want to hide text like that but make it available to readers, giving it position: absolute and left: -9999px (or similar) seems to be a better method. Most readers (as I understand) ignore something with display: none, but not when it's just moved off screen like that.


Tags for this Thread

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
  •