Forums

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

Home Forums CSS Aligning and Cropping Wide Image beside Text

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #43483
    copaesthetic
    Member

    Okay, the topic title is a bit ambiguous, but essentially this is what I want to do ([see example](http://imgur.com/vEY8lWy “see example”)). I have several categories of services in _h1_ tags and I want this diagonal graphic element to sit adjacent to each title. Since the graphic is too wide, I want it to be clipped on the right side and the left side intact.

    http://codepen.io/copaesthetic/pen/kfqdJ _img_ method

    http://codepen.io/copaesthetic/pen/cGdph _background img_ method

    Extra question: Why is it that _h1_ tags take the full width of the container instead of the inherit width of the text its wrapped around?

    #128704
    wolfcry911
    Participant

    http://codepen.io/wolfcry911/pen/EDcsL

    h1 elements are block level by default and take up all available width

    #128738
    Paulie_D
    Member

    Fork of @wolfcry911 Codepen without set width.

    http://codepen.io/anon/pen/wgbsc

    **May cause scrolling issues on mobile**

    #128864
    copaesthetic
    Member

    Thank you, nice use of the pseudo-element to create a block.

    I’ve never seen percentages used with absolute positioning, can you explain how the _left: 100%_ moves the background exactly right of h1? For instance, if the block comes immediately after h1, why doesn’t _left: 0px_ work if it even needs to be defined at all?

    #128918
    Paulie_D
    Member

    A **pseudo element** isn’t actually after the the h1 element…it’s after the **content** of the h1.

    It’s kind of like this

    [h1]
    [h1:before]
    Text In Here
    [h1:after]
    [/h1]

    If that make any sense.

    #128972
    copaesthetic
    Member

    Gotcha, thanks.

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