Posts: 2973
Joined: 2004-02-05 Location: A hilly place, UK
Posted: Thu, 2007-04-19 11:05
So
How do you:
# Replace a header tag with an image and leave the text in place for accessibility (maybe the stylesheet will be switched off) or for visitors with images off?
# Do the same with a hyperlink, or have the header as a hyperlink?
Bearing in mind that it is an idea to keep these type of images in the css (background) as they don't usually add much by way of meaning to the content.
Now, what I will post here IS NOT NEW. It just hasn't been posted up here in this 'How To' forum.
The code is remarkably simple, and it shows the two techniques, one for text replacement, one for hyperlink replacement. I have put the css in the head for simplicity:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Header Replacement</title> <style type="text/css" media="all"> html,body,h2{ margin:0px; padding:0px; border:0px; } body{ font-family:verdana,arial,sans-serif; font-size:100.1%; } h2 { height:44px; width:300px; position:relative; font-size:.8em; margin:50px; } /* hide from Mac IE5.x \*/ h2{overflow:hidden;} /* end hide*/ h2 span, h2 em { background: url(header-h2.jpg); position:absolute; left:0;top:0; display:block; height:44px; width:300px; } </style> </head> <body> <h2>This is the header text <span title="This is the header image"></span> </h2> <h2> <a class="text" href="#" title="This is the header link">This is the header link <em title="This is the header link"></em></a> </h2> </body> </html>
Enjoy! You'll need the attached image or make one of your own.
Moderator
Posts: 2973
Joined: 2004-02-05
Location: A hilly place, UK
Posted: Thu, 2007-04-19 11:05
So
How do you:
# Replace a header tag with an image and leave the text in place for accessibility (maybe the stylesheet will be switched off) or for visitors with images off?
# Do the same with a hyperlink, or have the header as a hyperlink?
Bearing in mind that it is an idea to keep these type of images in the css (background) as they don't usually add much by way of meaning to the content.
Now, what I will post here IS NOT NEW. It just hasn't been posted up here in this 'How To' forum.
The code is remarkably simple, and it shows the two techniques, one for text replacement, one for hyperlink replacement. I have put the css in the head for simplicity:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type"
content="text/html; charset=utf-8" />
<title>Header Replacement</title>
<style type="text/css" media="all">
html,body,h2{
margin:0px;
padding:0px;
border:0px;
}
body{
font-family:verdana,arial,sans-serif;
font-size:100.1%;
}
h2 {
height:44px;
width:300px;
position:relative;
font-size:.8em;
margin:50px;
}
/* hide from Mac IE5.x \*/
h2{overflow:hidden;}
/* end hide*/
h2 span, h2 em {
background: url(header-h2.jpg);
position:absolute;
left:0;top:0;
display:block;
height:44px;
width:300px;
}
</style>
</head>
<body>
<h2>This is the header text
<span title="This is the header image"></span>
</h2>
<h2>
<a class="text" href="#" title="This is the
header link">This is the header link
<em title="This is the header link"></em></a>
</h2>
</body>
</html>
Enjoy! You'll need the attached image or make one of your own.
Give your site a valid doctype | Uncollapsing Margins