Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I've almost got this figured out, but I'm a total newbie to coding and this last bit is confusing me.

I'm trying to get my logo "mascot" to be flush with the top line of my header, and sitting 'on' the navigation bar at the bottom. I have a pic on the website of exactly what I'm talking about on the website. (bloggingbuddhist.com)

I've figured out how to get it to sit up against the top of the header area, but getting it down all the way (and a bit overlapping even) is confusing me.

The code I'm manipulating is below, it looks like I have to actually manipulate the menu navigation bar as well... if not even more then that. Any ideas what to do to get that whole section to sit up flush like I have in that picture on the site? THANK YOU!

#logo {
float:left;
height:150px;
overflow:hidden;
padding:10px 0 0px 10px;
}

#logo #h1{
float:left;
font-family:Georgia, serif;
font-size:48px;
}

#logo #h2 {
color:#777;
float:left;
font-size:13px;
padding:5px 20px 10px;
}

#logo #h1 a {
text-decoration: none;
color:#999;
border:0;
}
#logo #h1 a:hover, #logo #h1 a:visited, #logo #h1 a:link {
border:0;
}

#header-icons {
position:absolute;
right:0;
margin-top:10px;
z-index:99;
}

#header-icons .twitter,
#header-icons .rss{
height:27px;
width:160px;
margin:16px 25px;
}
#header-icons .twitter{
background: url("img/twitter.png") no-repeat scroll 0 0 transparent;
}

#header-icons .rss{
background: url("img/rss.png") no-repeat scroll 0 0 transparent;
}

#header-icons .twitter a,
#header-icons .rss a{
padding:10px 80px;
border:0;
}

#menu {
background:url("img/menu-bg.png") no-repeat scroll 0 top transparent;
clear:both;
margin:0 auto 0 -4px;
width:1052px;
}

.menu-bottom {
background:url("img/menu-bottom-bg.png?m") no-repeat scroll 0 bottom transparent;
padding-bottom:16px;
}

#menu ul {
background:url("img/menu-curve-bg.png") no-repeat scroll left top #f1f1f1;
list-style:none outside none;
margin:0 30px;
padding:0px 10px 0 40px;
text-align:right;
float:right;
}

#menu li {
display: inline;
padding:14px 0 11px;
border-left:1px solid transparent;
border-right:1px solid transparent;
white-space:nowrap;
position:relative;
}

#menu li.current_page_item,
#menu li.current_page_item:hover {
background-color: #fafafa;
border-left:1px solid #E5E5E5;
border-right:1px solid #E5E5E5;
}

#menu a {
border:0 none;
color:#a1a1a1;
font-size:16px;
font-weight:bold;
text-decoration:none;
text-shadow:1px 1px 0px #fff;
padding:10px 40px;
line-height:40px;
}
#menu a:hover, 
#menu a:active,
#menu li.current_page_item a:link,
#menu li.current_page_item a:visited,
#menu li.current_page_item a:hover,
#menu li.current_page_item a:active{
color:#999;
border:0;
}

#menu li:hover {
background-color: #f7f7f7;
border-left:1px solid #E5E5E5;
border-right:1px solid #E5E5E5;
}
share|improve this question
    
Reduce the padding on #logo to 8px instead of 10px and the logo will sit inline with the background better. –  t31os Feb 18 '11 at 13:08

1 Answer 1

Adding this line to your css:

#logo img {height: 190px; position: absolute;}

That should do it, you will need to make the background of the image transparent though.

share|improve this answer
    
Wow... That did do it. –  user3267 Feb 18 '11 at 3:42
    
Oops hit enter way too fast. Thank you, sir. I've been banging my head on the keyboard modifying all the px areas, reloading the page, etc. One little line fixes it, haha. –  user3267 Feb 18 '11 at 3:42

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.