alt131 - 8:07 am on May 6, 2011 (gmt 0)

Hi Greencode, Almost there. :)
I don't understand about the background colours as there is no requirement to set a background which means a page background can always show through. However this a start. It needs adjustment to get the actual look you want - but note there is a bit of a "domino" affect - for eg, adjusting font-size may require height/line-height/top etc.

Originally I used ems and % which I think is nicer, but as you've worked in px I've adjusted it. The only % left is widths - to try to keep the dots as fluid as possible. That works for the current text, but will need to be adjusted for the actual width of the text in the title.

CSS
h1 {
margin: 0 auto;
width:600px;
height:30px;
line-height:30px;
font-size: 22px;
text-align:center;
white-space:nowrap;
overflow:hidden;
}

h1:before, h1:after {
position:relative;
top:-6px;
display:inline-block;
overflow:hidden;
margin: 0 10px;
width:40%;
min-width:35%;
vertical-align:middle;
height:20px;
line-height:10px;
font-size:40px;
color:silver;
opacity: 0.2;
word-spacing:1px;
white-space:nowrap;
content: ". . . . . . . . . . . . . .";
}

HTML
<h1>My Title</h1>