line of stars

how to create a line of asteriks that fill 100% of page

[stitchy]

Hi,

I'm a bit of an amateur and know this may sound like a bit of a basic question but I can't find anything relating to this anywhere..

Basically i'm trying to create a line of asteriks to fill one line of one row that will expand [or retract] to fill 100 per cent of the page, without wrapping.

I've tried background images but they create problems of their own and it would be much prefered if I could do this with just plain old text.

Not sure if this is possible. Any help gratefully appreciated.

[Robin_reala]

Welcome to WebmasterWorld stitchy!

Something like this will probably do what you want:

<div style="white-space: nowrap; overflow: hidden;">
*************************************** etc.
</div>

That’s not semantic though and would cause problems for screen readers etc. Could you elaborate on why a background image wasn’t suitable? I’d guess that the ideal solution for you would be a styled <hr> with a tiled background image of an asterisk.

[stitchy]

Thanks for the welcome. Nice to be here.

The person I'm doing the site for doesn't like background images for this as you often get half an asteriks hanging off on one side (she's a designer with the usual obsession on small details...).

Overflow seems to do the trick nicely, but i'm a bit worred about it being unsemantic. I did look at the hr tag but didn't know you could use background images for these. Would that be something like <hr style="background-image:url(images/asterix.gif)">?

Cheers.

[Robin_reala]

So she’s a designer that prefers visuals to accessibility? Oh well, you can’t win them all :) For what it’s worth, I’m not certain there’s any solution that will justify asterisks so that they’ll never clip unless you can control the width of the page exactly. If you can do that then background images will be fine because you can just divide your page width into equal blocks and size your image to fit.

I probably should have elaborated a bit on the background-image on <hr> solution as it’s not as simple as I made it out to be originally. While most browsers do let you style <hr>s with background-images there’s a load of cross browser compatibility issues that make it easier to enclose the <hr> in a <div> and style that instead:

HTML:

<div class="separator"><hr></div>

CSS:

.separator { background: url(my_image.png) repeat-x 50% 50%; }
.separator hr { position: absolute; left: -9999px; }

(we’re hiding the <hr> here with the ‘off left’ technique)

[edited by: Robin_reala at 10:51 pm (utc) on Feb. 11, 2007]

[tedster]

That's pretty darned clever, Robin.

[stitchy]

Thanks mate, I think she will just have to forgoe the design for accesibilty this time and just be happy..

Its probably just my limited experience with css but I couldn't make your css solution work. I'm using dreamweaver and while the line of stars would appear inside d/weaver, they would disappear when loaded up in a browser.

Its a moot point really because while it might be nicer and neater to do this using css, the end result will be the same [i think] as just using a background image.

Cheers.