|
|
Posted by BootNic on 11/06/06 15:58
> z <news01.web@mailnull.com> wrote:
> news: 12kukm5jcqmeo92@corp.supernews.com
> I'm trying to recreate a header image in proper HTML with an <h1>
> header.
>
> The <h1> header is of variable length, but should cover the
> background image (header.gif) which is just a straight fixed-length
> grey line like this:
>
> The Header -------------------------------|
>
> The width of "The Header" will change with the length of the text and
> with the font size. The line is a gif, so it shows through the text
> if it overlaps, which looks bad.
>
> Is there a way to cover up the background line with the <h1> so that
> it doesn't show through the text? The following HTML/CSS is just
> from my first tests. There must be a better way to do it.
>
[snip]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content=
"text/html; charset=windows-1252">
<title></title>
<style type="text/css">
#head {
background-image: url('http://files.photojerk.com/BootNic/border.gif');
background-position: center;
background-repeat: repeat-x;
border-right: 0.1em ridge #808080;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
width: 30em;
}
#head span {
background-color: #fff;
color: #f60;
padding-right:0.3em;
}
</style>
</head>
<body>
<h1 id="head"><span>The Header Title</span></h1>
</body>
</html>
--
BootNic Monday, November 06, 2006 10:58 AM
"I fought the Dharma, and the Dharma won."
*Allen Ginsberg*
[Back to original message]
|