Dotted border around headings

[Foamcow]

Anyone know a really clean way to do a dotted (round dots) border around <h1> tags?

Problem being I don't know the exact width of the heading or how many lines it will cover.

Im currently using

h1 { border:4px dotted #fdd8ea; }

But it's not a great solution since the "dots" are square.

Ideally I want to keep the code as semantic and clean as possible.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[dmacster]

Have you tried experimenting with the weight of the border - seems that heavier equals more clarifty in the dots:

i.e.

border-width: medium

Just a thought,
Donna

 

[Foamcow]

Actually yes. But a good point!

I originally did them at 8px, but they really looked square.

At 4px they kind of look rounded (or at least not square) but ideally I want bigger dots.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[dmacster]

I see. I experimented a bit - the 12px are pretty big, sometimes just leave at default (thick seems to work well) definitions without the actual sizing.

.hmm {
	font-family: Verdana, Tahoma, sans-serif;
	font-size: 12px;
	font-style: normal;
	border-top-width: 12px;
	border-right-width: thick;
	border-bottom-width: medium;
	border-left-width: 4px;
	border-top-style: dotted;
	border-right-style: dotted;
	border-bottom-style: dotted;
	border-left-style: dotted;
}

Donna

 

[JamesLean]

Foamcow, have you noticed that FF renders "dotted" as squares but IE renders it as circles?

Maybe there's a FF hack to make it do circles too?

--James

 

[Foamcow]

'course it does.

Actually I forgot that.

Considering the target audience for this site it will probably be fine. I'd just like to be able to do it so I KNOW it's going to be circles

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[ChrisHunt]

There's gonna be a property in CSS3 called [tt]border-image[/tt] that'll make this easy. I know Mozilla have implemented some of the CSS3 properties, so you could see if giving [tt]-moz-border-image[/tt] does anything.

Otherwise, I suppose you could do it with background images, kinda like the "sliding doors" method of doing drop shadows. Something like this:
[ul]
[li]Make two big images, one with dots along the top and left edges, the other with them along the right and bottom. Make them tall and wide enough to go behind any heading.
[/li]
[li]Mark your headings up like this:

<h1 class="dotted"><span>My heading text</span></h1>

(you could put that span in with Javascript, if you're more skilled at it than I am!)[/li]
[li]Your CSS will then be something like:

h1.dotted {
padding: 4px 0 0 4px;
background: url(topleft.gif) top left no-repeat;
}

h1.dotted span {
width: 100%;
padding: 0 4px 4px 0;
background: url(topleft.gif) bottom right no-repeat;
}

[/li]
[/ul]
I've not tested it, so you'll probably need to tinker with it to get it working. Even then, you'll get partial dots where the height/width isn't an exact number of dots.

Personally, I'd just leave it with whatever the browser-writers gave me for [tt]border: dotted[/tt]. The above approach seems too much like hard work.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Foamcow]

lol I've actually jotted down a similar thing based on sliding doors (I use the technique enough that you'd think I'd have it cracked now hehe), but not tested it.

I'm getting on with another job this morning, but I'll give it a go later. If it works I'll drop you a star

The border-image thing may be an option if it works. Most of my audience will be using IE anyway, but it would be great to cover FF/Moz too.



Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time