It’ll ensure that those browsing your site without images will see a decent alternative, and provide search engines with a correct representation of your page title.

Let’s start with with HTML code. It needs to be as simple as possible, showing only the name of your site/logo enclosed within header tags and a link:

1

<h1><a href="http://designshack.co.uk">Design Shack</a></h1>

Now once you have the HTML code in place, it’s simply a case of styling it with some straight forward CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

h1 {
	text-decoration:none;
	border:0;
	width : 162px;
	height : 113px;
	margin : 0;
	padding : 0;
	background : url(/images/logo.gif) no-repeat 0 0;
}

h1 a {
	display : block;
	height : 113px;
	text-indent : -9999px;
}

This CSS does two main things:

• It tells the browser to create a certain area for your logo, and apply a background
• It moves the actual text to display out of view (9,999 pixels to the left)

If someone browses to your site with CSS and images enabled, they’ll see your beautiful logo. If not, the background image won’t display – but the text indent won’t be applied either – meaning they’ll see your heading text as normal. Perfect!

It’s a simple but effective way to ensure your logo displays correctly, remains accessible, and is picked up correctly by search engines.

ORIGINAL POST

http://feedproxy.google.com/~r/designshacklinks/~3/qMhWE_CgC8s/correctly-displaying-your-logo-with-css