Results 1 to 4 of 4

Thread: customizing chrome drop down menu

  1. #1
    Join Date
    Apr 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default customizing chrome drop down menu

    I'm trying to add a search box to the chrome CSS drop down menu. I cannot get the search box to display in-line with the links.

    Following the example in the Modern Brick Menu I pasted the following code to the chrome menu-


    CSS:
    #myform{ /*CSS for sample search box. Remove if desired */
    float: right;
    margin: 0;
    padding: 0;
    }

    #myform .textinput{
    width: 190px;
    border: 1px solid gray;
    }

    #myform .submit{
    font: 1px Verdana;
    height: 22px;
    }



    HTML:

    <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="#" rel="dropmenu1">Resources</a></li>
    <li><a href="#" rel="dropmenu2">News</a></li>
    <li><a href="#" rel="dropmenu3">Search</a></li>
    </ul>
    <form id="myform">
    <input type="text" class="textinput" /> <input class="submit" type="submit" value="Find" />
    </form>

    </div>

  2. #2
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    And... You want what?
    Jeremy | jfein.net

  3. #3
    Join Date
    Apr 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I want the search box to display in line with the navigation bar as seen in the Modern Brick Menu. When I tried to adapt this style to the Chrome Menu the search box does not display correctly. Instead it appears in a columm below the menu like this.

    Home | Resources | News | Search
    [search box]



    Am I missing a property in the CSS or is there an HTML fix?

  4. #4
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Do you have a live page?!..Is that all your code?

    Floating your ul, should do this for you

    ...If nothing works, add display:inline;
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •