1.

Solve : html madness - vertical list with search box?

Answer»

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.






    list-style: none;
    padding:0;
    margin:0;
}>


        display: inline;
    border: solid;
    border-width: 1px 1px 0 1px;
    margin: 0 0.5em 0 0;
}
>Topic 1,[/url]


        display: inline;
    border: solid;
    border-width: 1px 1px 0 1px;
    margin: 0 0.5em 0 0;
}
>
Topic 2,[/url]


        display: inline;
    border: solid;
    border-width: 1px 1px 0 1px;
    margin: 0 0.5em 0 0;
}
>
Topic 3,[/url]


        display: inline;
    border: solid;
    border-width: 1px 1px 0 1px;
    margin: 0 0.5em 0 0;
}
>
Topic 4,[/url]

        display: inline;
    border: solid;
    border-width: 1px 1px 0 1px;
    margin: 0 0.5em 0 0;
}
>
Topic 5,[/url]

        display: inline;
    border: solid;
    border-width: 1px 1px 0 1px;
    margin: 0 0.5em 0 0;
}
>
Topic 6,[/url]

        display: inline;
    border: solid;
    border-width: 1px 1px 0 1px;
    margin: 0 0.5em 0 0;
}
>
Topic 7[/url]




http://www.google.com/search
">



 maxlength="255" value="" />

 value="askmywebsite.com" checked /> only search mywebsite.com

















src="Background.jpg" width="95" height="81">First, please post code between code tags: [code]...[/code].

Second, this is not valid CSS or XHTML:

QUOTE from: wigglywink on September 25, 2011, 06:10:01 AM
<ul#header ul {
    list-style: none;
    padding:0;
    margin:0;
}>

There is no HTML element "".  Did you mean
    ...?Or, possibly,
      ?I think he's just adding the CSS in an attribute-like way to the HTML....YEP.


Discussion

No Comment Found