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

simisker · 23 Jun 2009 at 12:21

Content area: just a simple DIV with 1px solid black border.

"Introduction": H1, H2 etc with negative top margin, a fixed width/min-width, a white background and some padding. Oh, and font-variant: small-caps too.

gord · 23 Jun 2009 at 12:22

Legend is the most efficient way. Otherwise you're just going to have to build it with divs.

<div style="border: 1px solid #000;">
<div style="background: #fff; margin: -10px 0px 0px 50px; padding: 10px; display: block;"> Introduction </div>
</div>

Not the greatest centralisation technique for the inner div but you need to position it over the border and Ive used a negative top margin to do that. It might not like it though and you'll have to float the divs.

edit: Simisker you.... RARRRR!

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>