Treehouse: Grow your CSS skills. Land your dream job.

Need advice on css coding for staggered headlines

  • # April 10, 2012 at 10:59 am

    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!

    # April 10, 2012 at 12:20 pm

    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.

    # April 10, 2012 at 12:33 pm

    Thanks Paulie.

    here is a sample of how the headlines will look.

    # April 11, 2012 at 4:59 am

    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.

    # April 11, 2012 at 5:21 am

    Here is one option:

    # April 11, 2012 at 6:05 am

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

    # April 11, 2012 at 10:08 am

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

    # April 12, 2012 at 3:00 pm

    Thanks Paulie… I want to avoid using images, though.

    Because each page with have a different headline, 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.

    My question was really what the best way to target the different indents on each line.

    Thanks all for your help…

    # April 13, 2012 at 4:02 am

    “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 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.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.