www.webdeveloper.com
Results 1 to 9 of 9

Thread: Need alternative way of showing logo that validates

Hybrid View

  1. #1
    Join Date
    Sep 2006
    Posts
    93

    Need alternative way of showing logo that validates

    Clever as I was, I thought I had come up with the ultimate way of displaying the logo on my web page.

    <h1><img src="mylogo" alt="mylogo" \></h1>

    What's so special about this?

    Well, if the browser has images enabled, it's nothing but a regular logo image.

    However, if they have images disabled (which is becoming more and more popular with small devices with browsers), then the alt text of the image will be shown instead. Due to that I've wrapped the image in <h1> tags, this alt text will be affected by them. I've styled the <h1> tag so that the alt text looks almost like my original image logo, the same font, same size, etc. This means that even browsers where images are disabled will see the same logo, although in text form, slightly more fuzzy.

    Next, if the browser even has CSS disabled, or my CSS style file is somehow blocked, then the alt text will be formated according to the standard setup for the <h1> tag. Although this isn't that close to my original logo, it's still pretty clear that this is the main logo on the page, and not just some text at the top.

    I was so happy with this solution, thinking I had thought of everything, without having to resort to JavaScript, until I tried to get it validated. I got this error:

    document type does not allow element "h1" here; missing one of "object", "ins", "del", "map", "button" start-tag.

    So, I ask you, is there a way to get all the features I mentioned, and still validate?

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    First of all, this has nothing to do with your image tag, it has to do with your surrounding code, or perhaps what I have to say in point number two:

    Secondly, it's supposed to be a forward slash that closes the tag, not a backslash

    Code:
    <h1><img src="mylogo" alt="mylogo" /></h1>
    I am assuming that you have height and width attributes in your real page on your logo image, because if you don't then they would also cause your page to fail validation.

    I think if you fix the closing tag (i.e. using a forward slash instead of a backslash) it might solve your error.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  3. #3
    Join Date
    Sep 2006
    Posts
    93
    ah, sorry, I rewrote the html in haste. The page tried to validate does have the right slash. It's only wrong here on the forum.

    Ah, you are right, when I read the error message again, I realize that it does indeed complain about what's around the <h1> tag, not the img tag.

    I have this:

    HTML Code:
    <div class="main">
    <a href="http://drakim.net/"><h1><img src="http://drakim.net/image/logo.png" alt="Drakim.net" /></h1></a>
    </div>
    I guess the problem is that I have a H1 within a link?

  4. #4
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    Inline elements, like the A element, cannot contain block level element, like H1.

    For another, perhaps more powerful, way to accomplish the same thing see http://www.csszengarden.com/ .
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  5. #5
    Join Date
    Sep 2006
    Posts
    93
    Uhm, but the logo in that site, it isn't clickable. It's not doing the same thing as me, so I don't see what I can draw upon to accomplish the same ting.

  6. #6
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    You wouldn't likethe following????
    Code:
    <div class="main">
    <h1><a href="http://drakim.net/"><img src="http://drakim.net/image/logo.png" alt="Drakim.net" /></a></h1>
    </div>
    Image is a link in this code.

  7. #7
    Join Date
    Sep 2006
    Posts
    93
    Aha! That validated, and worked! Thank you!

  8. #8
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Example</title>
    <style type="text/css">
    h1 a span {display:none}
    h1 a {background:url(http://drakim.net/image/logo.png); display:block; height:36px; width:207px}
    </style>
    <h1><a href="http://drakim.net/"><span>Drakim.net</span></a></h1>
    That'll allow you to do things like:
    Code:
    <h1><a href="http://drakim.net/"><span><em>Drakim</em>.net</span></a></h1>
    I've pretty much stopped using the IMG element.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  9. #9
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    Not sure if you were referring to my example, but you're very welcome.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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