My code may be a little messy but here is my question.
I’ve created a horizontal list across the top of my website. I am attempting to add a search box as part of the horizontal list so that is minimizes the vertical distance to the rest of the content.
No matter what I do, the search box appears below the horizontal list.
If I use absolute or relative positioning, the box appears to overlap with some of the rest of the content below the horizontal list.
My code is below. For completeness, I’ve also added part of the code below the list (a side bar to be exact).
Also, if possible, I would like to put some distance between the search box and other elements of the horizontal list so that the search box appears toward the right side of the screen. Tips?
Can someone help please?!!!! Thanks to the forum readers.
<html>
<div id="header" style="margin:0px 0px 0px 130px">
<ul#header ul {
list-style: none;
padding:0;
margin:0;
}>
<li#header li {
display: inline;
border: solid;
border-width: 1px 1px 0 1px;
margin: 0 0.5em 0 0;
}
><a href="#">Topic 1,[/url]</li>
<li#header li {
display: inline;
border: solid;
border-width: 1px 1px 0 1px;
margin: 0 0.5em 0 0;
}
><a href="#">Topic 2,[/url]</li>
<li#header li {
display: inline;
border: solid;
border-width: 1px 1px 0 1px;
margin: 0 0.5em 0 0;
}
><a href="#">Topic 3,[/url]</li>
<li#header li {
display: inline;
border: solid;
border-width: 1px 1px 0 1px;
margin: 0 0.5em 0 0;
}
><a href="#">Topic 4,[/url]</li>
<li#header li {
display: inline;
border: solid;
border-width: 1px 1px 0 1px;
margin: 0 0.5em 0 0;
}
><a href="#">Topic 5,[/url]</li>
<li#header li {
display: inline;
border: solid;
border-width: 1px 1px 0 1px;
margin: 0 0.5em 0 0;
}
><a href="#">Topic 6,[/url]</li>
<li#header li {
display: inline;
border: solid;
border-width: 1px 1px 0 1px;
margin: 0 0.5em 0 0;
}
><a href="#">Topic 7[/url]</li>
<form method="get" action="
http://www.google.com/search">
<div style="border:1px solid black;padding:4px;width:20em;">
<table border="0" cellpadding="0">
<tr><td>
<input type="text" name="q" size="25"
maxlength="255" value="" />
<input type="submit" value="Google Search" /></td></tr>
<tr><td align="center" style="font-size:75%">
<input type="checkbox" name="sitesearch"
value="askmywebsite.com" checked /> only search mywebsite.com
</td></tr></table>
</div>
</form>
</ul>
</div>
<div id="content">
</div>
<sidebar width=”20%” LINK="black" VLINK="white">
<table align="left">
<tr> <td bgcolor="Lavender" align="center" border="3">
<font size="-1" color="black">
<img
src="Background.jpg" width="95" height="81">