Banners and Headings via CSS
A couple of styles borrowed from the pros that I like, one for rollover titles and other for the main page title both that degrade nicely. Note there are slight id name changes to protect page against the use of the style in the stylesheet attached to the page.
Rollover Banners
The banner in action:
What a beauty hey?
And here is XHTML markup and CSS that it uses:
div#wrapper {
background-color: #b5c490;
border: solid #000 1px;
width: 230px;
}
div#banners h5#ban1{
margin: 0;
padding: 0;
text-indent: -9999px;
width: 230px;
height: 28px;
}
div#banners h5#ban1 a{
display: block;
margin: 3px 0 0 0;
padding: 0;
width: 100%;
height: 100%;
text-decoration: none;
background: transparent
url("images/alaban.gif")
top left no-repeat;
}
div#banners h5#ban1 a:hover{
background: transparent url("images/alaban.gif")
0 -28px no-repeat;
}
<div id="wrapper">
<div id="banners">
<h5 id="ban1"><a href="http://www.alistapart.com/"
title="for people who make websites.">A List Apart</a></h5>
</div>
</div>
Title Banners
This is a demo of a heading banner that has a link over a background image and then it degrades smoothly to a plain textual title when CSS support is lacking in the end user agent.
The image is 1280x128px. This is produced by the following mark-up and styling:
<div id="sitemast">
<h1><a href="/"><span>meyerweb</span>.com</a></h1>
</div>
#sitemast {padding: 0; margin: 0;
overflow: hidden;
border-bottom: 1px solid #000;
height: 128px; width: 100%; position: relative;}
#sitemast h1 {font-size: 1.75em; letter-spacing: 0.13em;
padding: 0; margin: 0;
position: absolute; left: 0; top: 100px;
/* hide-from-IE5/Mac hack \*/
top: auto; bottom: 0;
/* end hack */}
#sitemast h1 a {padding: 0 0.25em;}
#sitemast h1 a {text-decoration: none;}
#sitemast {background: rgb(97%,99%,98%)
url(images/masthead.jpg) 0% 100% no-repeat;}
#sitemast h1 a {color: rgb(97%,80%,17%);
text-shadow: 0 0 3px #333;}
Malarkey Method for Image Replacement
Of this various Image Replacement methods SFIR, FIR, et al) this is recommended by Mezzoblue. It does not solve the no CSS and no Images problem but is neat and does not require an extra span as others do. There is also the transparent images issue.
.mir {letter-spacing : -1000em;}
/* Be nice to Opera, but hide for Mac IE \*/
html>body .mir {
letter-spacing: normal;
text-indent : -999em;
overflow : hidden;
}
/* end of hack */
The Malarkey Method
This example is for replacing an h6 element.
Image headings by WAI
Hidding text that is revealed in none CSS supporting browsers and available to screen readers is achiveved (as recommnded by WAI) by this styling.
.hidden {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
h4 {
height:60px;
background:url("images/h4.gif") top left no-repeat;
}
<h4><img src="images/h4" alt="h4." height="50px" width="100px">
<span class="hidden">This heading text is hidden.</span>
</h4>
This heading text is hidden.
Above should be an image 100px x 50px but no text if CSS is working or Just text if no styling applied. I have actually removed the img tag as it seems to be superfluous and doesn't align with the background image anyway!
E-mail
