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;
}
#logoto8pxinstead of10pxand the logo will sit inline with the background better.