Dotted line through Header

Forum Moderators: not2easy

Message Too Old, No Replies

Dotted line through Header

greencode

9:18 am on Apr 29, 2011 (gmt 0)

I am trying to create an effect whereby there's a dotted line with middle alignment on either side of a title. Now, I just wanted to ask people's advice on the best way of doing this. I don't think I'll be able to use a dotted border property as I won't be able to control the spacing between dots and therefore I think I'll have to create a single dot image that's added as a background to the heading with the actual title surrounded by a span tag with a solid background colour so the dot image does not show through.

Does this sound about right? Here's a visual…

[i746.photobucket.com...]

Cira

1:07 pm on Apr 29, 2011 (gmt 0)

That's how i would go about doing it.

Cira

1:13 pm on Apr 29, 2011 (gmt 0)

Actually i would put the background properties for the text in the CSS

alt131

5:33 pm on Apr 29, 2011 (gmt 0)

This is similar to "dot leaders" which are provided for in the draft generated content module. However, as the effect is just visual have you considered using pseudo elements to serve styled "full stops"? That avoids an image and any extra presentational elements (such as the span) as well.

greencode

6:12 pm on Apr 29, 2011 (gmt 0)

Umm, no hadn't thought of that - how would I go about creating a repeating "full stop" though?

alt131

5:09 am on Apr 30, 2011 (gmt 0)

how would I go about creating a repeating "full stop" though

By not trying to create repeating dots, instead ordering enough to display to achieve the desired visual affect.

Set more "full stops" than actually required (so it doesn't matter if the user's resolution is different), set a width (% is probably the most robust for this), and overflow:hidden (to hide any extra "dots").

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]

greencode

7:14 pm on May 5, 2011 (gmt 0)

I need to get this to work without adding a background colour to the span - as per my first post - as the pages sometimes have backgrounds and so the block background on the span would be visible against the image background.

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>

greencode

8:39 am on May 6, 2011 (gmt 0)

Thanks so much for this - I think this is definitely the way to go. Now, I'm presuming that this won't work in IE7? If that's the case I may need to use something like a jQuery Pseudo Plugin such as [jquery.lukelutman.com...] to help with this?

alt131

6:01 pm on May 7, 2011 (gmt 0)

Hi greencode, yes – the above won’t work in ie<8. But good support in other browsers, so unless your target audience is definitely using legacy versions, probably only legacy ie to be concerned about.

I think the best way depends on your coding philosophy. jquery may suit you well, but note that script will brute-force ie6 (I think), but doesn’t provide for min-width, so ie6 will treat the specified min-width as the width. Probably not critical, but you may wish to check. Plus ie<9 doesn’t understand opacity either, so needs a filter. If you want the flexibility to use other selectors and properties elsewhere, you might consider a less specific library. I just noticed the latest version of Dean Edwards script has increased from 77kb to 117kb’s though – something to watch.

Another option is to feed a degraded version to ie<8. I detest elements for presentational purposes. But you could attach an image to spans, and use something like the AlphaImageLoader to reproduce opacity and scale. Or do something like below. It looks nasty (and is) ... but it is only a few bytes, avoids server hits for an image and can be hidden from assistive devices and understanding browsers.

<h1><span>• • • •</span>My Title<span>• • • •</span></h1>
You could enclose the spans in a conditional comment so only ie gets them, but I’d be inclined to have something in the main style sheet so I don't forget that eye-sore is in the html ;) so:
span {
display:none;
}
and then the style via a conditional comment:


You could use more/less bullets and style the span more accurately, but unless ie<8 is really important, I would suggest not being too concerned - the goal is a close representation, not an exact reproduction.

[Edit]
A last quick thought and needs exploring properly, but if you're using jqeuery, prepend and appemd might be an option - and they're already in the library so no additional code.