Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #37571
    janet4now
    Participant

    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!

    #100960
    Paulie_D
    Moderator

    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.

    #101008
    Paulie_D
    Moderator

    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.

    #101009
    Paulie_D
    Moderator
    #101012
    toddmotto
    Member

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

    #101017
    Paulie_D
    Moderator

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

    #101107
    Paulie_D
    Moderator

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.