Need advice on css coding for staggered headlines

[janet4now]

I’m building a new website and on every page there is a headline — 2-4 lines each — which is “staggered”. (not left, centered, or right) Each line will be at a different left position depending how it looks visually.

Inline styling makes more sense to me because each “left-position style” will be unique.

My question is this:

Should I use a span tag with margin-left, padding-left, text-indent or ??

I don’t see where to upload an image for you to see on here, but I’m hoping this makes sense!

[Paulie_D]

I would suggest that you upload an image to an image hosting site (such as photobucket) and link it so we can see what you are after…perhaps more than one if you have a variety of options.

I certainly wouldn’t be using inline styles except as a last resort. Pick a style, code it and stick to it.

There are a number of css techniques to achieve a staggered look but until we see an idea of what you are after, it’s tough to help.

[Paulie_D]

Certainly you could re-position h tags to achieve this effect but there is nothing ‘pure’ css to make items adjust like that of their own accord at present. CSS ‘regions’ are on the cards but they are, AFAIK, merely being suggested at this time.

If the ‘headlines’ aren’t going to change then the simplest solution is to just do one large image.

If they are going to be variable then re-positioning them would seem to be the option and I would do this with a single div with multiple h tags and adjust the left margin on those.

[Paulie_D]

Here is one option: http://jsfiddle.net/Paulie_D/D2SfQ/

[toddmotto]

I’d simply float:right; the h2 tags and stick width, padding and margin on them accordingly.

[Paulie_D]

There are a number of ways to do it…but I still think it depends on whether the the headlines are going to change.

[Paulie_D]

“I didn’t want to set up a css style for each line indent, on each page. I think that would incur more code than inline styling.”

It’s the same amount of work, it’s just a question of where the styling is listed..in the page on in the stylesheet.
In fact, inline styling might actually be more work as you can’t re-use a previous style with inline.

As for targeting then the ‘nth-of-type’ I showed in the fiddle is one option.

[Author]

Posts