We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

drop down menus side by side?

Raftor
Raftor asked
on
Medium Priority
412 Views
Last Modified: 2008-03-10
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>
Comment
Watch Question

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.
Top Expert 2013

Commented:
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&

Author

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.  
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
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>

Author

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.
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview

Author

Commented:
That worked scottarius, cheers.  But how would i seperate them by about half an inch?
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">
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.