(Solved)Search box in Global content block

[Neo]

Hi,

I was researching the ways to include a search box in the global content block and included the following code in the GCB. But it did not solve the purpose. The code is given below.

Code: Select all

<div id="utilitycontainer">
<div id="utility">
<ul>
    <li id="utility-map"><a href="http://gtalumni.org/campusmap/">CAMPUS MAP</a></li>
    <li id="utility-directories"><a href="http://www.gatech.edu/directories.php">DIRECTORIES</a></li>
    <li id="utility-sitemap">{cms_selflink page='sitemap' text='SITE MAP'}</li>
    <li id="utility-help">{cms_selflink page='help' text='HELP'}</li>
    <li id="utility-search"><a href="http://search.gatech.edu/">SEARCH</a></li>
   <li id="utility-searchbox"> 

<form id="searchform" name="seek" method="get" action="http://search.gatech.edu/custom/query.html">
   <input id="search" type="text" name="qt" size="20" value="" maxlength="500" />
   <input type="image" src="http://www.gatech.edu/images/transparency.gif" name="submit" alt=" " id="searchsubmit" value="Search" />
	</form>
</li>
</ul>
</div>
</div>

Since this was placing the text box outside the page margins, I removed the code for the search box. The link for the website is given below.

http://cms.ce.gatech.edu/ceetest/

Any pointers to this would be greatly appreciated.


Thanks,
Neo

[Nullig]

Did you play around with the following styles:

#searchbox {
position: absolute;
top: 0px;
right: 19px;
display: block;
width: 160px;
height: 54px;
z-index: 10; }

#search {
width: 125px;
margin: 2px;
height: 16px;
position: absolute;
top: 1px;
left: 12px;
padding: 0px;
display: block; }

Perhaps if you place the code back into your page, we could see what is happening.

Nullig

[Neo]

Hi Nullig,

I tried to make the position of search box relative but it did not help. I have put the code for search box now back in the GCB.  The search box is placed in the top corner in the left hand side. Not sure why the search box is always placed there. The link for the website is below.

http://cms.ce.gatech.edu/ceetest/

I was trying to achieve the functionality in the original website. The link for the old website is below.

http://www.ce.gatech.edu/

Any pointers to this would be of great help.

Thanks,
Neo

[Nullig]

Change the styling for "search" to something like:

#search {
width: 125px;
margin: 2px;
height: 16px;
top: 1px;
left: 12px;
padding: 0px;
display: inline; }

Nullig

[Neo]

Thanks a lot Nullig. It resolved the problem  .

Regards,
Neo