- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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.
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.
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?
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.
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.
See also this
Thanks – I’ve updated the Pen removing all of the unused css