CODEWITHSUNDEEP
csshtml
stevendesu
stevendesu

Reputation: 16771

Hiding contents without hiding the div?

This may be the simplest question ever, but try as I might I simply couldn't figure it out. I'm working on a website right now and I wish to use as few <div> elements as possible to keep the HTML pretty and easy to edit. At the moment I essentially have:

<html doctype etc etc>
<head>
    <title and meta tags>
</head>
<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="body"></div>
        <div id="sidebar"></div>
        <div id="footer"></div>
    </div>
</body>
</html>

Very simple and elegant, yes? However the client wants their header to consist of a single large image which contains their company name and logo. So my options were pretty clear - either use an <img> tag, or set the background-image property on the header <div>. However then I got to thinking about SEO. For Google's sake it would be nice if the header <div> contained an <h1> element with her website's title, but then this element would have to be hidden so that human users only see the background image.

Although if you were to use the display:none; css property then the entire <div> disappears, including the background. Is there a good way to hide the contents of a <div> without hiding the <div> itself?

Upvotes: 2

Views: 6301

Answers (3)

Joshua
Joshua

Reputation: 490

Have you tried to apply the hide on the H1 itself?

<div id="header">
    <h1>Company title</h1>
</div>

Your style would be: #header h1{display:none;visibility:hidden;}

UPDATE Apparently, we're both just having one of those days. If you want to make the H1 truly SEO/Screen reader friendly, it would be better to do this with your CSS:

#header h1{
    width:XXXpx;
    hight:XXXpx;
    background:url('image/location.png');
    text-indent:-9999px;
    overflow:hidden;
}

This way your text is actually there on the page and rendered, it's just kind of off screen.

Upvotes: 4

evil otto
evil otto

Reputation: 10582

Set display: none on the H1 tag rather than the div, and use the background image on the div.

Upvotes: 1

Litek
Litek

Reputation: 4888

You could replace #header div with h1 if you want this tag, set background image on said h1 and even put some text in it (company name) and use text-indent to hide it.

Plus, in your quest to minimize number of elements you can use body as a wrapper, and if you need full page background just set in on html element.

Upvotes: 1

Related Questions