jump to navigation

Headings, Image Replacement and CSS May 27, 2008

Posted by fofo in CSS.
Tags:
trackback

When we design our website or write an article that is going to be posted on a website we need to make this website or article to stand out. We need to draw the attention of our web visitors. One way to accomplish that is to create and style really attractive headings that give the visitor or the reader a quick idea of what the text underneath contain.We style headers with the use of CSS to try to make them unique for each site we create. We have a very limited number of fonts to use in our web site. We have to rely on these fonts(Arial,Tahoma,Times New Roman) if we want our headings to be reliably represented by most browsers across the Web. There is a problem in differentiating our site from the next one due to the limited number of fonts to use in a browser. What we can do is to create a very attractive header like an image and then replace the text with that image. One of the most popular ways to achieve that is to use the text-indent property.

Before we explain what we are about to do, here is the contents of the html file.

********************************************************

<DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
 <title></title>
 <meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
 <style type=”text/css” media=”screen”>
  @import “headimagereplacement.css”;
 </style>
</head>
<body>
 <h1>
  .NET ROCKS
 </h1>

</body>
</html>

******************************************************

save this file with a .html extension to your desktop or any other folder.

The .css file for the .html file follows:

**********************************

h1 {
 height: 33px;
 background-image: url(images/NET.jpg);
 background-repeat: no-repeat;
 text-indent:-9999px;
}

*********************************

you must save this file in the same folder with the .html file and with the name headimagereplacement.css.

We will try to make the text in the h1 element to move off the screen and replace it with the image below.

 

 

Save this image in an “images” folder inside the directory where you place the .html and .css file. 

If we do not use the text-indent property then the text of the h1 element will be visible. So that is why we use the text-indent:-9999px, to move it to so far in the left that that does not appear in the screen.Also note that we have to specify the height for the heading element so that it is the same with the height of the image. That solves the problem so far.  But happens in the case that users have their images turned off in their browser?

The solution we have so far is inadequate. We must provide some alternative text for those users with images turned off. So instead of moving the text itself we need to hide it behind the image we will replace it with. Thus the image will appear to those who have images enabled while the text will display for those who don’t. we have to cgange slightly the HTML file

*****

 <h1>
 <span></span> .NET ROCKS
 </h1>

****

we need another element inside the h1 element so we can apply a background image to cover up the HTML text. The changes in the .css file follow

*********************

h1 {
 height: 33px;
 width:169px;
 position:relative;
 overflow:hidden;
 }

h1 span {
 position: absolute;
 left: 0;
 top: 0;
 z-index: 10;
 width: 100%;
 height: 100%;
 background-image: url(images/net.jpg);
 background-repeat: no-repeat;
}

*********************

We set the height and width of the h1 element to the dimensions of the image so we do not face the problem of the text becoming greater than the image. We also use the overflow:hidden property to make sure no text exceeds the boundaries of h1.

We set the width and the height of the span to 100% so that it has the same size of the h1.

By setting the position:absolute of the span tag, it takes the span tag out of the document flow, so the text of the h1 flows below it. 

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: