CSS - How

suarve · 23 Jun 2009 at 12:05

Hi,

Have been given a design and have the following and can't for the life of me think how to get the header text and border like this. Initial thought was to use a legend, but that's not very semantic, as this isn't a form.

How can I get the title like without using images - need text.

Thanks

suarve · 23 Jun 2009 at 12:45

Sorted, cheers people - was a h1 tag with a negative top margin. For anyone who cares here what's I used:

Code:

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css">
#wrapper { border: 1px solid; width: 400px; height: 150px; margin-top: 50px; background: #fff; }
#wrapper h1 { font-variant: small-caps; font-size: 2.0em; font-family: Georgia, "Times New Roman", Times, serif; margin: -20px 0 0 90px; background: #fff; width: 240px; }
</style>
</head>

<body>
<div id="wrapper">
<h1>Introduction</h1>
</div>
</body>

</html>

CSS - How

suarve

suarve

suarve

suarve