SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Search box in unordered list

    Has been bugging me for a while this one. I want to use an unordered list for a top nav with the last item being a search box. The label for the search is aligned bottom, how do I get all of my text in my nav to align perfectly?

    Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>test</title>
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css">
    #topmenu {
     background-color: #005AAD;
     width: 100%;
    }
    #topmenu ul {
     margin: 0;
     padding: 0;
     display: inline;
     list-style-type: none;
    }
    #topmenu li {
     margin: 0;
     padding: 0;
     float: left;
     list-style-type: none;
    }
    #topmenu a {
     display: block;
     width: 100px;
     text-align: center;
    }
    #topmenu a:link {
     color: #fff;
     text-decoration: none;
    }
    #topmenu a:visited {
     color: #fff;
     text-decoration: none;
    }
    #topmenu a:hover {
     color: #ffcc00;
     text-decoration: underline;
    }
    #topmenu form {
     margin: 0;
     color: #fff;
    }
    </style>
    </head>
    <body>
    <div id="topmenu">
     <ul>
      <li><a href="water_Service_index.htm">Home</a></li>
      <li><a href="#">Text Only</a></li>
      <li><a href="#;">About Us</a></li>
      <li><a href="#">Feedback</a></li>
      <li><a href="#">Help</a></li>
      <li><a href="#">Site Map</a></li>
      <li>
       <form name="kbs">
       <label for="qt">Search</label>&nbsp;<input name="qt" id="qt" class="qt" size="14" maxlength="1000"> <input class="submit" type="submit" value="Go">
       </form>	 
      </li>
     </ul>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I've just stumbled upon a solution, doesn't work in Opera 7.23 tho

    Code:
    #topmenu label {
    display: block;
    float: left;
    vertical-align: middle;
    }

  3. #3
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #topmenu label { vertical-align: top; }
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  4. #4
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *bump*

    Redux's solution doesn't work but mine does except in Opera, suggestions anyone?

  5. #5
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Daz
    *bump*

    Redux's solution doesn't work but mine does except in Opera, suggestions anyone?
    hmmm...works for me (only did a quick check in Firefox, though)
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI Darren,

    Try this:
    Code:
    #topmenu form {
     margin: 0;
     padding:0;
     color: #fff;
     float:left;
    }
    #topmenu ul {line-height:24px}
    #topmenu label {vertical-align:top}
    * html #topmenu label {float:left}
    Paul

  7. #7
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, I'm just revisiting this problem as I still have an issue with Opera. Your solution did help but the submit button is now floating outside of the nav bar under the search label - any suggestions as to how I can fix?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Darren,


    Have you gor some updated code or is it the same as above with the fixes. The above code looks ok in opera 7.5

    Paul

  9. #9
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, this is the first part of the coding where the menu is.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
     <style type="text/css">
    #masthead {
     width: 100%;
     height: 80px;
     background: url(banner.jpg) no-repeat fixed;
    }
    #menu {
     width: 100%;
    }
    *html #menu { height: 23px; }
    html>body #menu { height : 22px; }
    #menu ul {
     margin: 0 0 0 5px;
     padding: 0;
     display: inline;
     list-style: none;
    }
    #menu li {
     margin: 0 10px 0 0;
     display: inline;
     list-style: none;
    }
    #menu a {
     padding: 0 3% 0 0;
     font-weight: bold;
     border-right: 1px solid #fff;
    }
    #menu a:link {
     color: #fff;
     text-decoration: none;
    }
    #menu a:visited {
     color: #fff;
     text-decoration: none;
    }
    #menu a:hover {
     color: #000;
     text-decoration: underline;
    }
    #menu form {
     margin: 0;
     padding: 0;
     position: absolute;
     top: 81px;
     right: 0;
    }
    #menu label {
     display: block;
     float: left;
     padding: 0 1% 0 0;
     color: #fff;
     font-weight: bold;
    }
    #menu .srchbx {
     display: block;
     float: left;
    }
    #menu .go {
     display: block;
     float: left;
     background: #999;
     color: #fff;
     font-weight: bold;
     border: 1px solid #eee;
    }
     </style>
    </head>
    <body>
    <div id="masthead"></div>
    <div id="menu" style="background-color:#6599FE;">
     <ul>
      <li><a href="index.htm">Home</a></li>
      <li><a href="links.htm">Organisation chart</a></li>
      <li><a href="a-z.htm">A-Z</a></li>
      <li><a href="links.htm">Links</a></li>
      <li><a href="feedback.htm">Feedback</a></li>
     </ul> 
     <form>
      <label for="search">Search</label>
      <input type="text" name="search" class="srchbx" id="search" style="border: 1px solid #6599FE;" />
      <input type="submit" name="submit" value="Go" class="go" />
     </form>
    </div>
    </body>
    </html>

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure what you are trying to do with that absolute positioning as it doesn't display in any browser lol

    I would do something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
     <style type="text/css">
    #masthead {
     width: 100%;
     height: 80px;
     background: url(images/pmoblogo7.jpg.jpg) no-repeat fixed;
    }
    #menu {
     width: 100%;
    }
    *html #menu li{ height: 22px; }
    html>body #menu li{ height : 22px;line-height:22px; }
    #menu ul {
     margin: 0 0 0 5px;
     padding: 0;
     display: inline;
     list-style: none;
    }
    #menu li {
     margin: 0 10px 0 0;
     display: inline;
     list-style: none;
    }
    #menu a {
     padding: 0 3% 0 0;
     font-weight: bold;
     border-right: 1px solid #fff;
    }
    #menu a:link {
     color: #fff;
     text-decoration: none;
    }
    #menu a:visited {
     color: #fff;
     text-decoration: none;
    }
    #menu a:hover {
     color: #000;
     text-decoration: underline;
    }
    #menu form {
     margin: 0;
     padding: 0;
     float:right;
     width:14.8em;
    }
    #menu label {
     display: block;
     float: left;
     padding: 0 1% 0 0;
     color: #fff;
     font-weight: bold;
    }
    #menu .srchbx {
     display: block;
     float: left;
    }
    #menu .go {
     background: #999;
     color: #fff;
     font-weight: bold;
     border: 1px solid #eee;
    }
    * html #menu input,* html #menu input {vertical-align:bottom}
     
     </style>
    </head>
    <body>
    <div id="masthead"></div>
    <div id="menu" style="background-color:#6599FE;">
     <form>
      <label for="search">Search</label>
      <input type="text" name="search" class="srchbx" id="search" style="border: 1px solid #6599FE;" />
      <input type="submit" name="submit" value="Go" class="go" />
     </form>
     <ul>
      <li><a href="index.htm">Home</a></li>
      <li><a href="links.htm">Organisation chart</a></li>
      <li><a href="a-z.htm">A-Z</a></li>
      <li><a href="links.htm">Links</a></li>
      <li><a href="feedback.htm">Feedback</a></li>
     </ul> 
    <br style="clear:both" />
    </div>
    </body>
    </html>
    But I'm not reallay sure what you were trying to do exactly. Input buttons and submit buttons are hard to line up and pu will probably end us using classes and manipulating the padding on each.

    Paul


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
  •