-2

When I try to research this I find it hard to separate this scenario from the much debated image replacement discussions and debates, but in my case I want to use BOTH and image and text.

The problem is that I want to have both a logo and image but obviously the header wants to be on it's own line, so i've floated the image left to get the desired effect. It seems fine to me but I don't recall coming across this problem before and I really need to get this one right first time, so my questions: Is there anything wrong with this method, are there any alternative methods worth considering and are there any further considerations, for instance I didn't see any need to clear the float but maybe I should do after the h1 tag.

<html>
<head>
    <style>
    h1 {
    line-height:100px;
    font-size:75px;
    background:#eee;
    }

    img#logo {
    margin-right:20px;
    float:left;
    }
    </style>
</head>

<body>
    <img id="logo" src="http://placehold.it/100x100">
    <h1>Title</h1>
    <p>Page Content ...</p>
</body>
</html>

Here's the JSFiddle http://jsfiddle.net/CAc3E/

byronyasgur
  • 4,627
  • 13
  • 52
  • 96
  • Having tried this out and eventually testing it a bit, I thought I'd mention that I did come across some strange problem when using this method with twitter bootstrap in a small screen configuration. I found that the H1 also needed a float left, and so this meant adding a clearfix. – byronyasgur Jun 05 '12 at 21:42

3 Answers3

2

Good enough, however it would make more sense to wrap your title and logo in a <header> tag:

<body>
    <header>
        <img id="logo" src="http://placehold.it/100x100">
        <h1>Title</h1>
    </header>

    <section role="main">
        ...
    </section>

    <footer>
        ...
    </footer>
</body>

Also the CSS isn't a concern to semantics, you can use a clear or omit it. It matters to your visitors only, not how the search engines see your website.

Zoltan Toth
  • 46,981
  • 12
  • 120
  • 134
1

I don't see anything wrong with this approach. Search engines should just ignore the image and everyone is happy. Personally I place the logo inside the h1 tag just because I'm lazy, but I haven't actually tested that for disadvantages, so take with a grain of salt.

Since you're forcing the heading to be the same height as the image, I don't foresee any problems caused by missing clear styles, either. But, of course, test in the worst case browser(s) (notably IE7 and IE6 if your target audience is really bad) before you ship stuff like this.

Jan Krüger
  • 17,870
  • 3
  • 59
  • 51
  • Actually funny I ended up doing it this way because putting an image inside the h1 tag seemed to up the height of the h1 by 2px more than the line-height ... even though the image was matched and had no border, margin or padding ... so i set up a test but ended up with a bit of a vertical align problem and thought this might be a better method ... anyway I haven't tested that properly, not sure if you noticed same problem, which is important for baseline grid work – byronyasgur Jun 04 '12 at 21:13
1

You should ask yourself if the logo image itself is providing any meaningful content to the page or if it's purely a visual aid. For instance, if your logo image's alternative text attribute would be something like "Company logo", then the latter is probably the case. I understand that you don't want to use an image-replacement technique in order to get rid of the text entirely, but what you might try is using the logo image as the background of the heading element, i.e.:

<head>
    <style>
    h1#logo {
        background:url("http://placehold.it/100x100") 0 0 no-repeat #eee;
        font-size:75px;
        height: 100px;
        line-height: 100px;
        text-indent: 120px;
    }
    </style>
</head>

<body>
    <h1 id="logo">Title</h1>
    <p>Page Content ...</p>
</body>
</html>

You'll need to tweak to your preference, but that's the general idea.

ngscheurich
  • 46
  • 4