Welcome guest. Before posting on our computer help forum, you must register. Click here it's easy and free.

Author Topic: html madness - vertical list with search box  (Read 3769 times)

0 Members and 1 Guest are viewing this topic.

wigglywink

  • Guest
html madness - vertical list with search box
« on: September 25, 2011, 06:10:01 AM »
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">

Rob Pomeroy



    Prodigy

  • Systems Architect
  • Thanked: 124
    • Me
  • Experience: Expert
  • OS: Other
Re: html madness - vertical list with search box
« Reply #1 on: September 30, 2011, 08:11:58 AM »
First, please post code between code tags: [code]...[/code].

Second, this is not valid CSS or XHTML:

<ul#header ul {
    list-style: none;
    padding:0;
    margin:0;
}>

There is no HTML element "<ul#header>".  Did you mean <ul class="header">...?
Only able to visit the forums sporadically, sorry.

Geek & Dummy - honest news, reviews and howtos

Rob Pomeroy



    Prodigy

  • Systems Architect
  • Thanked: 124
    • Me
  • Experience: Expert
  • OS: Other
Re: html madness - vertical list with search box
« Reply #2 on: September 30, 2011, 08:17:39 AM »
Or, possibly, <ul id="header">?
Only able to visit the forums sporadically, sorry.

Geek & Dummy - honest news, reviews and howtos

kpac

  • Web moderator
  • Moderator


  • Hacker

  • kpac®
  • Thanked: 184
    • Yes
    • Yes
    • Yes
  • Certifications: List
  • Computer: Specs
  • Experience: Expert
  • OS: Windows 7
Re: html madness - vertical list with search box
« Reply #3 on: September 30, 2011, 09:00:07 AM »
I think he's just adding the CSS in an attribute-like way to the HTML....

Rob Pomeroy



    Prodigy

  • Systems Architect
  • Thanked: 124
    • Me
  • Experience: Expert
  • OS: Other
Re: html madness - vertical list with search box
« Reply #4 on: October 03, 2011, 06:09:59 AM »
Yep.
Only able to visit the forums sporadically, sorry.

Geek & Dummy - honest news, reviews and howtos