• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 400
  • Last Modified:

drop down menus side by side?

how would i get this drop down menu to the right of a drop down menu like it?

<form>
    <select onChange="if(this.options[this.selectedIndex].value) top.location.href=(this.options[this.selectedIndex].value)">  
       <option>Hardware</option>
       <option value="comp.jsp">Computer</option>
      <option value="printer.jsp">Printer</option>
       <option value="scanner.jsp">Scanner</option>
       <option value="other_hardware.jsp">Other</option>
    </select>
</form>
0
Raftor
Asked:
Raftor
  • 3
  • 2
  • 2
  • +2
1 Solution
 
dawnbudgeCommented:
Best way to align dropdowns (in terms of getting it to look the same in different browsers and platforms) is to use a table with 1 row and 2 columns.  Put the form tag around the outside of your table tags.
0
 
COBOLdinosaurCommented:
style="float:right"  

If the selects are in seperate forms add that to the form tag.  If they are in teh same form add it to the select tag.

Cd&
0
 
RaftorAuthor Commented:
That 'sytle = "float:right"' worked but the drop down menus are right beside eachother and on the right hand side of the page. i want them separated a little and centred.  
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
monolith_888Commented:
Put them in a <DIV style="width:100%;text-align:center;"> and add padding:10px (or what you like) to the drop down menus to seperate them
0
 
monolith_888Commented:
Sorry, that won't work - try this... it's not the neatest in the world, but I had to make for that previous answer :-p

<div style="width:100%;text-align:center;">
      <div style="width:200;text-align:left;">
      <form>
            <select onChange="if(this.options[this.selectedIndex].value) top.location.href=(this.options[this.selectedIndex].value)" style="margin-left:10px;float:right;">
               <option>Hardware</option>
               <option value="comp.jsp">Computer</option>
              <option value="printer.jsp">Printer</option>
               <option value="scanner.jsp">Scanner</option>
               <option value="other_hardware.jsp">Other</option>
            </select>
      </form>
      <form>
            <select onChange="if(this.options[this.selectedIndex].value) top.location.href=(this.options[this.selectedIndex].value)" style="padding:10px;float:right;">
               <option>Hardware</option>
               <option value="comp.jsp">Computer</option>
              <option value="printer.jsp">Printer</option>
               <option value="scanner.jsp">Scanner</option>
               <option value="other_hardware.jsp">Other</option>
            </select>
      </form>
      </div>
</div>
0
 
RaftorAuthor Commented:
That did the same thing but on the left hand side this time. But it does have a small space between them which i was looking for.
0
 
scottariusCommented:
much easier to just use a table:

<table border="0" cellpadding="0" cellspacing="5">
      <tr>
            <form>
            <td>
                  <select onChange="if(this.options[this.selectedIndex].value) top.location.href=(this.options[this.selectedIndex].value)">  
                     <option>Hardware</option>
                     <option value="comp.jsp">Computer</option>
                    <option value="printer.jsp">Printer</option>
                     <option value="scanner.jsp">Scanner</option>
                     <option value="other_hardware.jsp">Other</option>
                  </select>
            </td>
            </form>
            <form>
            <td>
                  <select onChange="if(this.options[this.selectedIndex].value) top.location.href=(this.options[this.selectedIndex].value)">  
                     <option>Hardware</option>
                     <option value="comp.jsp">Computer</option>
                    <option value="printer.jsp">Printer</option>
                     <option value="scanner.jsp">Scanner</option>
                     <option value="other_hardware.jsp">Other</option>
                  </select>
            </td>
            </form>
      </tr>
</table>
0
 
RaftorAuthor Commented:
That worked scottarius, cheers.  But how would i seperate them by about half an inch?
0
 
scottariusCommented:
just adjust the cellspacing until you get the desired width, 20 should probably give you what your looking for:

<table border="0" cellpadding="0" cellspacing="20">
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

  • 3
  • 2
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now