Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- Dotted line through Header


greencode - 7:13 pm on May 5, 2011 (gmt 0)


Umm, struggling to get this to work. Not sure how I get the dots to appear either side of the title and for them to be fluid in width. Obviously the title may change width and then so too will the dots. So all elements need to be fluid to fit the width of the containing div. So far I have this, which I know doesn't work?!


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div class="ctn">
<h1>Title</h1>
</div>
</body>
</html>


.ctn {
text-align: center;
height: 30px;
width: 600px;
overflow: hidden;
}

h1 {
line-height: 30px;
margin: 0;
font-size: 22px;}

h1:before
{
width: 30px;
content:"..........";

}

h1:after
{
content:"..........";
}

[edited by: engine at 7:58 am (utc) on May 6, 2011]
[edit reason] sidescroll [/edit]


Thread source:: http://www.webmasterworld.com/css/4305784.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com