MyBB Community Forums

Full Version: HELP: Searchbar Position Issue
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi all

I have installed the search bar similar to mybb forum.

i have added this in my header template below logo div
<div id="search">
<form action="{$mybb->settings['bburl']}/search.php" method="post">
<fieldset class="noborder">
<label for="search_box"><span id="search_left"></span></label>
<input name="keywords" id="search_box" title="Enter your search keywords" type="text">
<input value="Search Forum" name="submit-search" id="search_button" type="submit">
<input type="hidden" name="action" value="do_search"></fieldset></form>
</div>

and added this in global.css
div#search {
	top: 165px;
	right: 120px;
	height: 26px;
	position: absolute;
	display: inline-table;
	float: right;
}

span#search_left {
	background: url(images/toplinks/search_left.gif) no-repeat;
	width: 3px;
	cursor: text;
	height: 26px;
	display: block;
	position: relative;
	float: left;
	top: 0;
	
	font-size: 2px;
}

input#search_box {
	background: #fff url(images/toplinks/search.gif) 5px no-repeat;
	width: 150px;
	border: 1px solid #024570;
	border-left: 0;
	padding: 5px;
	padding-left: 25px;
	height: 14px;
	float: left;
	top: 0;
	
	font-family: Tahoma, 'Trebuchet MS', Arial, sans-serif;
}

input#search_button {
	background: url(images/toplinks/search_button.gif) 100% 0% no-repeat;
	width: 99px;
	color: #fff;
	border: 0;
	padding: 4px 6px 4px 6px;
	float: left;
	top: 0;
	height: 26px;
	cursor: pointer;
	
	font-family: Tahoma, 'Trebuchet MS', Arial, sans-serif;
}

input#search_button:hover {
    background-position: 100% 100%;
}

fieldset.noborder {
    border: 0;
}


but the bar is placed under the logo image. how to bring it over the logo.



i have figured out the issue and its rectified now.

but i have a different issue now. that is the search bar is in correct position when the window is maximized. but when the window is restored to a smaller size the bar keeps moving in as the window gets smaller. how do i make it in a fixed position.

visit www.techtimes.co.in to see what i am trying to say. try maximize and resize the window.