WordPress.org

Ready to get started?Download WordPress

Forums

Problems trying to overlap elements (8 posts)

  1. rdbrotherton
    Member
    Posted 1 year ago #

    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:
    http://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:
    http://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.

  2. rdbrotherton
    Member
    Posted 1 year ago #

    Anyone?

  3. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  4. J
    Member
    Posted 1 year ago #

    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

  5. rdbrotherton
    Member
    Posted 1 year ago #

    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.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    1. I can't see what you mean.

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

  7. potentweb
    Member
    Posted 1 year ago #

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

    Change the background from white to black.

  8. rdbrotherton
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic