CODEWITHSUNDEEP
htmlcssnavigationsemantic-markupimage-replacement
AmbroseChapel
AmbroseChapel

Reputation: 12087

Semantic logo with H1 image-replacement ... leaves nothing to click?

I'm coding a site which has a big company logo at the top left.

So I code it with the logo as the background image, the company name in an H1, and hide the H1 using image-replacement techniques.

But there's no "home" link in the rest of the site's navigation. The logo is probably intended to be the "home" link. But because of the semantic/image-replacement technique, there's nothing to click.

What would you do in this situation? Position something transparent over the logo is my first thought, but I'd like to hear other suggestions.

Upvotes: 0

Views: 1794

Answers (1)

Ben Hull
Ben Hull

Reputation: 7673

Very simple - put an <a href="/home">Company name</a> inside your H1 element, and apply your image replacement styles to h1#logo a (or whatever selector you use). You'll need to add display:block; to the styles, to have the anchor behave correctly.

Let me know if you need more detail than this!

Extra detail:

OK - I usually use the following HTML and CSS for image replacement:

HTML:

<h1 id="logo">
    <a href="/home" title="Back to the home page">[Company name]</a>
</h1>

CSS

#logo a {
  display:block;
  width: 200px; /* Or whatever you like */
  height: 0;
  padding-top: 100px; /* The required height */
  text-indent: -999em; /* negative text indent, leaves the box alone, and in ems to scale with text */
  overflow: hidden;
  background: /*whatever you like */;
}

This is a kind of 'double-strength' - the height:0/padding-top technique creates a box the size you need, but without any room for text to display (the background image will appear in the top padding, but the text won't). The big negative-text-indent is just a safety for browsers that get things wrong occasionally (old webkit used to have problems - not much of an issue nowadays).

Let me know how you go!

Upvotes: 6

Related Questions