Forums

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

Home Forums CSS Image overlapping two different colored divs

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

    Hi – I’m trying to build a page with an image that overlaps two different coloured divs – here’s an example:

    http://i.imgur.com/ghbtSvi.png

    What’s the best way to achieve this in CSS? I’m a newbie so apologies if this is a really stupid question.

    #256411
    Beverleyh
    Participant

    Here’s a good place to start http://learnlayout.com/ and I think the “position” chapter would be particularly useful to you.

    Short of someone writing the code for you (which we aren’t here to do), have a go at mocking something up in in CodePen and post back with your attempt. From there we’ll be able to give more useful/specific suggestions based on your code.

    #256419
    jammycodger
    Participant

    Thanks (and apologies) – that tutorial was great. I’ve managed to get the image to overlap but text below it doesn’t shift up.

    I’ve dropped my code into Codepen. Do I make the text below relative as well?

    https://codepen.io/thisisnotmeno/pen/QgrNgQ

    #256423
    Beverleyh
    Participant

    I should have stressed that we only need/want a minimal demo – as in, just enough HTML and CSS to illustrate the immediate problem you’re having. We don’t need to see everything.

    Unfortunately, folks wont want to sift through an almost 4000 line CSS file to work out which parts relate to what. Its just too overwhelming for us when we’re browsing in our spare time.

    Demos that are least likely to scared potential helpers off usually consist of a handful of elements, and less-than 40 lines of CSS. The fewer lines, the better.

    #256424
    Paulie_D
    Member

    Assuming you know the height of the image…and you want the content to shift up then negative margin is probably the most logical way to go.

    https://codepen.io/Paulie-D/pen/owdLXB

    #256425
    Paulie_D
    Member
    #256428
    jammycodger
    Participant

    Thanks – I’ve updated the Pen removing all of the unused css

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