Removing Elements From New Header

afrigoal · Member · Aug 13, 2011 at 3:05 am
Copy link

Add topic to favorites
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: (visible only to logged in users)
thesacredpath · Member · Aug 13, 2011 at 6:34 am
Copy link
This would get rid of the line.
```
#header #logo .title .desc {
border-top: medium none;
}
```
afrigoal · Member · Aug 13, 2011 at 7:57 am
Copy link
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.
thesacredpath · Member · Aug 13, 2011 at 8:10 am
Copy link
I can’t really tell since I see no logo. What I see is just a blank spot on the left above the menu.
thesacredpath · Member · Aug 13, 2011 at 8:12 am
Copy link
I can’t really work off a screen shot.
afrigoal · Member · Aug 13, 2011 at 8:12 am
Copy link
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.
afrigoal · Member · Aug 13, 2011 at 8:13 am
Copy link
Ok, I will try and work it out.
thesacredpath · Member · Aug 13, 2011 at 8:35 am
Copy link
Don’t mess with moving the stuff on the right, align your header image with the stuff on the right.
afrigoal · Member · Aug 13, 2011 at 8:37 am
Copy link
How do I do that?
thesacredpath · Member · Aug 13, 2011 at 8:42 am
Copy link
Again, I can’t even identify the element that you placed the image into. Where did you declare the image? #header? #logo?
afrigoal · Member · Aug 13, 2011 at 8:50 am
Copy link
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;
}
thesacredpath · Member · Aug 13, 2011 at 8:53 am
Copy link
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;
afrigoal · Member · Aug 13, 2011 at 8:59 am
Copy link
That’s worked. Thanks very much!
thesacredpath · Member · Aug 13, 2011 at 9:04 am
Copy link
You are welcome.

No items found.