Video
1. Start By Writing H1 Tags
We want to wrap our link in an h1 tag to let search engines know that the text in our link (which will be replaced by an image) is very important text. Drop an opening and closing h1 tag where you want the logo to appear.
2. Place Our Link
We now need to code in our link within our h1 tag. Check out my code. NOTE: I’ve placed the company name and geo-tagged “Philadelphia” in the text in our link. This is a great line for SEO.
[code type=”css” title=”Code”]Magic Hat Independent Film Festival, Philadelphia[/code]
3. Add Our Class
The next step is to place a class on our anchor tag (our link). I’m going to make up a new class and call it “header-logo”.
[code type=”css” title=”Code”]Magic Hat Independent Film Festival, Philadelphia[/code]
4. Start Writing The CSS
We are going to target our class using CSS. Check out my code below:
[code type=”css” title=”Code”].header-logo {
}[/code]
5. Display:Block
We need to take our inline element (our link) and convert it to a rock solid “block level element” which we can size and set an exact background to. Check out my updated code below:
[code type=”css” title=”Code”].header-logo {
display:block;
}[/code]
6. Set The Width & Height
Now that we have a block level element we can set our link (which you can now think of as a box) to have the exact width and height of our logo file. Go check out the width and height of your logo and set a width and height in CSS for the class. As of right now, we still don’t have a logo image, but this will start to constrain our text within this invisible box.
[code type=”css” title=”Code”].header-logo {
display:block;
width:506px;
height:119px;
}[/code]
7. Set Background Image
It’s time to drop in our logo image. Setting a background image for our “a” tag is a breeze with CSS.
[code type=”css” title=”Code”].header-logo {
display:block;
width:506px;
height:119px;
background:url(../images/logo.png) no-repeat;
}
[/code]
8. Text Must Disappear
Using a method developed by Scott Kellum[http://scottkellum.com/], we will push this type out of the way so we can see our image, but hide the type. We’re going to set our text to be indented 100%. This will always make sure our type is outside of the logo. The white-space:nowrap will ensure that our text doesn’t wrap around to a new line. Overflow:hidden ensures that once the text is pushed outside of our invisible box, it’ll be hidden.
[code type=”css” title=”Code”].header-logo {
display:block;
width:506px;
height:119px;
background:url(../images/logo.png) no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}[/code]
9. Center The Logo
The last step here will be to center this logo using CSS. Set the margin as I have in CSS and check out the results. This is a simple, no-nonsense way to quickly and effectively place your logo, or other image, using CSS.
[code type=”css” title=”Code”].header-logo {
display:block;
width:506px;
height:119px;
background:url(../images/logo.png) no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
margin:0 auto;
}[/code]
Leave a Reply