Useful to remember if you wish your h1 tags to actually be your logo. Can be created using simple CSS as shown below (below example also makes the logo a clickable link back to the homepage):
h1 a {
display: block;
text-indent: -9999px;
width: 538px;
height: 88px;
background: url(../images/logo.jpg) no-repeat left;
outline: none;
}
The first link of the CSS code is display: block - this displays the link as a block using the dimensions you specify later.
text-indent: -9999px - this will allow you to write your header copy (for SEO and for browsers not using CSS) without it being seen ordinarily.
width: 538px - typically the width of your logo image
height: 88px - typically the height of your logo image
background: - A link to your image with the specification that it doesn't repeat (you should have no problems with it repeating anyway due to the dimensions matching that of the image - however its best to use this anyway.
outline: none - when this is clicked on as a link there wont be a faint line around the edge of it (as there normally is by default in Firefox.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment