www.webdeveloper.com
Results 1 to 6 of 6

Thread: H1 and H2 inside clickable logo

  1. #1
    Join Date
    Dec 2002
    Posts
    216

    H1 and H2 inside clickable logo

    Hi guys!

    I've been trying the following, but got validation error:

    CSS:
    Code:
    #logo { width:100px; height:100px; background-color:#ffffff}
    #logo a { text-decoration: none; color: #ffffff; display:block; width:100px; height:100px; background:url(images/logo.jpg) no-repeat; text-indent:-9999em}
    #logo h1 { font-size:1px; color#ffffff; text-indent:-9999em}
    #logo h2 { font-size: 1px; color: #ffffff; text-indent:-9999em}
    HTML:
    Code:
    <div id="logo">
         <a href="index.html">  
              <h1>Website Title</h1>
              <h2>Awesome Slogan</h2>
         </a>  
    </div>
    Basically, I want to have the h1 and h2 written but not viewable inside the logo DIV. How can this be done the proper way?

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Why hide h1 and h2 ?
    Code:
    <h1 id="logo"><a href="index.html"><img alt="Website Title" src="images/logo.jpg" height="100" width="100"></a></h1>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Dec 2002
    Posts
    216
    Fang, thank you for your reply.
    I want to have h1 and h2 written as the website title and website slogan respectively, for bots or spiders that will scan the page, so that they can read those words. But then have a logo image cover those writing for aesthetical reasons.
    Also, if the logo image cannot be displayed on some systems, there will at least be h1 and h2 for the user to see.
    I'm not sure if that will bring anything to the ranking or accessibility of the site, please correct me if I'm wrong above.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    m not sure if that will bring anything to the ranking or accessibility of the site
    http://www.456bereastreet.com/archiv..._to_hide_text/
    Also, if the logo image cannot be displayed on some systems, there will at least be h1 and h2 for the user to see
    If the image is not being displayed then JavaScript is probably also disabled, so the header text won't be displayed.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Dec 2002
    Posts
    216
    I didn't know about that. Thank you for pointing it out.

  6. #6
    Join Date
    Jan 2009
    Posts
    3,346
    Quote Originally Posted by Fang View Post
    http://www.456bereastreet.com/archiv..._to_hide_text/
    If the image is not being displayed then JavaScript is probably also disabled, so the header text won't be displayed.
    Alternatively you could use the javascript or css to displace the h1 & h2 tags. This way those who can see images will and those who cannot won't.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles