Jump to content

Positioning jump menus with CSS


Spawny
 Share

Recommended Posts

Hi Lads and lasses, i'm getting to grips with CSS slowly and having some great results, but i'm trying now to position 2 jump menus inside an element/box. When i put them in, they position by default on the left of the box (i want them on the base of the box left and right). It also expands the box and throws the dimensions out.

<div class="searchbox">By Productsearch <form name="form1">  <select name="Searchbyproduct" onChange="MM_jumpMenu('parent',this,0)">    <option>Router</option>    <option>Server</option>    <option>Switch</option>    <option>Network</option>    <option>Backups</option>  </select></form><form name="form2">  <select name="Bymanuf" onChange="MM_jumpMenu('parent',this,0)">    <option>HP</option>    <option>Cisco</option>    <option>Brocade</option>    <option>Sun</option>    <option>More...</option>  </select></form></div>

Any help would be greatly appreciated. I'd also appreciate knowing how you position text around an element like these.

Link to comment
Share on other sites

float: left;to Your CSS file or CSS block in head part:

.left{float: left;}.right{float: right;}

and body:

<div class="searchbox"><div class="left">By Productsearch <select name="Searchbyproduct" onchange="MM_jumpMenu('parent', this, 0)">   <option>Router</option>   <option>Server</option>   <option>Switch</option>   <option>Network</option>   <option>Backups</option> </select></div><div class="right"> <select name="Bymanuf" onchange="MM_jumpMenu('parent', this, 0)">   <option>HP</option>   <option>Cisco</option>   <option>Brocade</option>   <option>Sun</option>   <option>More...</option> </select></div></div>

You can remove those forms if You are not sending with them.

Link to comment
Share on other sites

  • 2 weeks later...
float: left;to Your CSS file or CSS block in head part:
.left{float: left;}.right{float: right;}

and body:

<div class="searchbox"><div class="left">By Productsearch <select name="Searchbyproduct" onchange="MM_jumpMenu('parent', this, 0)">   <option>Router</option>   <option>Server</option>   <option>Switch</option>   <option>Network</option>   <option>Backups</option> </select></div><div class="right"> <select name="Bymanuf" onchange="MM_jumpMenu('parent', this, 0)">   <option>HP</option>   <option>Cisco</option>   <option>Brocade</option>   <option>Sun</option>   <option>More...</option> </select></div></div>

You can remove those forms if You are not sending with them.

Hi there, that kind of works but the boxes sit on different lines. I want them to horizontally align.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...