Solved

drop down menus side by side?

Posted on 2004-04-13
9
390 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>
0
Comment
Question by:Raftor
  • 3
  • 2
  • 2
  • +2
9 Comments
 

Expert Comment

by:dawnbudge
ID: 10815297
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10815324
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
 

Author Comment

by:Raftor
ID: 10815691
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
 
LVL 4

Expert Comment

by:monolith_888
ID: 10815740
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 4

Expert Comment

by:monolith_888
ID: 10815832
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
 

Author Comment

by:Raftor
ID: 10815914
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
 

Accepted Solution

by:
scottarius earned 30 total points
ID: 10821660
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
 

Author Comment

by:Raftor
ID: 10824281
That worked scottarius, cheers.  But how would i seperate them by about half an inch?
0
 

Expert Comment

by:scottarius
ID: 10824331
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Change month dropdown 5 34
HTML CSS 7 38
Bootstrap 3 application structure 7 45
HTML Relative path 9 29
Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
This article discusses four methods for overlaying images in a container on a web page
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now