Need help? Check out our Support site, then


Removing Elements From New Header

  1. Hello there. I don't really know much about CSS, so I am asking for some help.

    I am setting up a new blog, and it's pretty much ready to go, however before I dive in and buy the CSS upgrade, I want to know if and how I can do two things.

    Here is a screenshot of where I'm up to before I got stuck... http://img805.imageshack.us/img805/5668/screeny1.jpg

    What CSS code do I use to get rid of the grey line which obscures my logo?

    Secondly, how can I get my AfriGoal logo to marry up to the Search/Home/Archive etc bit on the right, so it looks fairly slick. I also don't want as much space between the bottom of the logo/that bit and the start of the header.

    Sorry for being a dimwit and asking so many questions, but I need to know!

    The blog I need help with is afrigoal.wordpress.com.

  2. This would get rid of the line.

    #header #logo .title .desc {
    border-top: medium none;
    }
  3. Thanks my friend.

    Do you know anything about the second part I asked? The area on the right is lopsided and too high up, which looks a bit weird. I'd like it more in line with the AfriGoal logo.

    How can I fix this?

    Many thanks.

  4. I can't really tell since I see no logo. What I see is just a blank spot on the left above the menu.

  5. I can't really work off a screen shot.

  6. With that new bit of code you provided it looks just like the screenshot I provided, but without the grey line. As you'll see, the right hand side looks off from the AfriGoal header.

  7. Ok, I will try and work it out.

  8. Don't mess with moving the stuff on the right, align your header image with the stuff on the right.

  9. How do I do that?

  10. Again, I can't even identify the element that you placed the image into. Where did you declare the image? #header? #logo?

  11. This is the code currently in place...

    #logo {
    background:url('http://afrigoal.files.wordpress.com/2011/08/afrihead450106.jpg') no-repeat scroll 0 0 transparent;
    height:106px;
    margin-bottom:0;
    width:450px;
    padding:0px 0 0;
    }

    #logo h1,#logo h2 {
    display:none;
    }

    #header #logo .title .desc {
    border-top:medium none;
    }

  12. There we go, I can work with that.

    Add the following to #logo and then adjust the value to where it aligns like you want it. The 20px is just a placeholder.

    margin-top: 20px;

  13. That's worked. Thanks very much!

  14. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic