SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    USA
    Posts
    1,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to horizontally align selector boxes?

    With the following code snippet, I want to display a selctor box on the left, and a sector box on the right with the action controls in between the boxes without using tables. Any ideas how to display it correctly? Thanks!

    HTML Code:
    .selectorA, .actions, .selectorB{ width: 200px; float: left}
    ....
    <div>
    	<span class="selectorA">
    	<SELECT NAME="list11" MULTIPLE SIZE=20 onDblClick="moveSelectedOptions(this.form['list11'],this.form['list21'],true)">
    			<? echo $computedSelections; ?>
    	</SELECT>
    	<span class="actions">
    		<A HREF="#" onClick="moveSelectedOptions(document.forms[0]['list11'],document.forms[0]['list21'],false);return false;">&gt;&gt;</A>
    		<A HREF="#" onClick="moveAllOptions(document.forms[0]['list11'],document.forms[0]['list21'],false); return false;">All &gt;&gt;</A>
    		<A HREF="#" onClick="moveSelectedOptions(document.forms[0]['list21'],document.forms[0]['list11'],false); return false;">&lt;&lt;</A>
    		<A HREF="#" onClick="moveAllOptions(document.forms[0]['list21'],document.forms[0]['list11'],false); return false;">All &lt;&lt;</A>
    	<span class="selectorB">
    	<SELECT NAME="list21" MULTIPLE SIZE=20 onDblClick="moveSelectedOptions(this.form['list21'],this.form['list11'],true)">
    	</SELECT>
    </div>

  2. #2
    SitePoint Enthusiast newdaynewdawn's Avatar
    Join Date
    Aug 2003
    Location
    Central KY
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is just a real quick glance... first I'll say either I haven't had enough coffee just yet or you did not CLOSE your span tags to begin with.

    Secondly, while you could probably use span if ya heart is set on it I chose to use nested divs. Yes, in my test the selector boxes did horizontally align though there are adjustments you'll have to play with on your end to fine tune things.

    See redone code below based on what I did or didn't understand:
    <div>
    <div class="selectorA">
    <SELECT NAME="list11" MULTIPLE SIZE=20 onDblClick="moveSelectedOptions(this.form['list11'],this.form['list21'],true)">
    <? echo $computedSelections; ?>
    </SELECT></div>
    <div class="actions">
    <A HREF="#" onClick="moveSelectedOptions(document.forms[0]['list11'],document.forms[0]['list21'],false);return false;">&gt;&gt;</A>
    <A HREF="#" onClick="moveAllOptions(document.forms[0]['list11'],document.forms[0]['list21'],false); return false;">All &gt;&gt;</A>
    <A HREF="#" onClick="moveSelectedOptions(document.forms[0]['list21'],document.forms[0]['list11'],false); return false;">&lt;&lt;</A>
    <A HREF="#" onClick="moveAllOptions(document.forms[0]['list21'],document.forms[0]['list11'],false); return false;">All &lt;&lt;</A></div>
    <div class="selectorB">
    <SELECT NAME="list21" MULTIPLE SIZE=20 onDblClick="moveSelectedOptions(this.form['list21'],this.form['list11'],true)">
    </SELECT></div>
    </div>

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    USA
    Posts
    1,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks - I'll give it a try. yeah I noticed the missing close tags right after I posted


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
  •