Problems trying to overlap elements

  • I’m new to WordPress but know the basics of html and CSS. I’m trying to get the blog content element to overlap my header image. Similar to what BBC Sport does, as demonstrated by the link below:
    https://www.bbc.co.uk/sport/0/formula1/19400192
    Notice how the white part of the article titled “Jaime Alguersuari column: Belgian Grand Prix preview” overlaps the image of the F1 car?

    This is what I’m trying to replicate, but keep the sidebar remain at its default position so you should end up with something like the example I’ve mocked up here

    I’ve tried editing the CSS stylesheet to

    #primary {
	float: left;
	margin: -50px -26.4% 0 22%;
	width: 100%;
	background:#fff;
}
#content {
	margin: -50px 34% 0 7.6%;
	width: 58.4%;
	background:#fff;
}
#secondary {
	float: left;
	margin-right: 7.6%;
	width: 18.8%;
}

    but while this does move the content to the position I want it, it doesn’t overlap my logo. I’ve tried playing around with z-index but the result was pretty much no different. This is what my blog looks like at the moment:
    https://rdb.x10.mx/blog/
    The sidebar is also moving with the blog articles, so info on how to put that back down the page would also be useful!

    I know its probably something simple that I’m missing…

    Thanks for any help you can give.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter rdbrotherton

    (@rdbrotherton)

    Anyone?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Apply position: relative; to these selectors .left-sidebar #content and .container.

    Hi rdbrotherton,

    As Andrew said you need to apply the Position rule for the z-index to work. As I can see at the minute your logo has a z-index of -500, once a position element is placed in the css this works correctly.

    hope this helps

    Patch

    Thread Starter rdbrotherton

    (@rdbrotherton)

    Hi guys thank you for your help so far. That’s done mostly done the trick, just two more things if you don’t mind please!

    1. If you visit my blog now you’ll note two small areas of white which shouldn’t be there. Do you know how I can remove these?

    2. My container div is set to a max of 1008px however the blog posts div doesn’t extend across to fill the right hand side. Which part of the CSS file should I be editing for this adjustment?

    Thanks again.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    1. I can’t see what you mean.

    2. Try a width of 66% to .left-sidebar #content.

    #main {
clear: both;
padding: 1.625em 0 0;
margin-top: -40px;
background: white;
}

    Change the background from white to black.

    Thread Starter rdbrotherton

    (@rdbrotherton)

    Thanks guys, appreciate it. Think I’ve got the idea of which tags control the main elements.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Problems trying to overlap elements’ is closed to new replies.