PDA

View Full Version : Getting Menu and Search Form on Same Plane?



spinenergy
20 Jan 2011, 12:59 PM
How can I get my search form on the same plane as my menu on the left? beforeicroak.com (http://beforeicroak.com) Here's the CSS of my header:

/* HEADER */
#header {
margin-bottom:0px;
height:173px;
background: url(images/header-bg.gif) repeat-x;
}

#header h1 {
font: 48px "Georgia";
color:#e4e4e4;
padding:0;
margin:0;
overflow:hidden;
}

#header h1 a {
color:#d4d4d4;
text-decoration:none;
}

#logo {
margin:0;
padding:0;
height:127px;
}

#logo h1 a {
background: url(images/logo.jpg) bottom left no-repeat;
height: 127px;
display: block;
}

#sf-menu {
margin:0;
height:33px;
padding-top:10px;
}

#sf {
padding:0;
margin:0;
}

#menu {
padding:0;
margin:0;
height:33px;
padding-left:20px;
width:610px;
}

#menu ul {
clear: both;
font-size:12px;
text-transform:uppercase;
padding:0;
margin:0;
}

#menu ul li {
float: left;
display: block;
margin:0;
padding:0;
}

#menu ul li a {
padding: 10px 30px;
margin:0;
float: left;
font-size:12px;
color: #d2d2d2;
text-decoration: none;
line-height:25px;
font: 12px Arial;
margin-right:5px;
background:#363636;
}

#menu ul li a.active {
background:#fff;
border-bottom:1px solid #fff;
color:#444;
font-weight:bold;
}

#menu ul li a.active:hover {
color:#444;
}

#header ul li a:hover {
color:#fff;
}

#searchform {
padding-top:2px;
text-align: right;
}

#searchform #s {
width:198px;
color:#000;
background: #696969;
border:1px solid #9e9e9e;
}

#header-ads {
color:#fff;
margin:0;
padding:10px;
height:75px;
padding-top:35px;
}
/* END HEADER */

resdog
20 Jan 2011, 01:09 PM
add "float:left" to your #menu.

You'll need to adjust the spacing b/t your menu and the content, due to losing the space from the search bar.