Display Select box values in 4 columns

Discussion in 'JavaScript' started by baris22, Mar 8, 2011.

0
  1. #1
    hello all,

    I am trying to display select box values in 4 columns. How can i do this. I am going to use it on local server.
    I have got images to show you what i am trying to do.




    **this is what i have got just now.**


    [​IMG]


    **I am trying to turn into**


    [​IMG]


    this is the code i am using

        
<style type="text/css">
    <!--
    
    .myselectbox {
       
        font-family: Tahoma;
        font-size: 18px;
        background-color: #F5F5F5;
    	
    	
    }
        option {
    	font-family: Tahoma;
        font-size: 18px;
        	background-color: #fef5e6;
    		padding:8px;
    		margin:5px;
    		
    		border-top: 1px solid #ebdac0;
        	border-bottom: 1px solid #ebdac0;
        	border-right: 1px solid #d6bb86;
        	border-left: 1px solid #d6bb86;
        }
    -->
    </style>
    </head>
    
    <body>
    <center>
    <select name="amount_no1" class="myselectbox" id="amount_no1" >
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
    </select> 
    </center>
    </body>
    Code (markup):
     
    baris22, Mar 8, 2011 IP
  2. artus.systems

    artus.systems Well-Known Member

    Messages:
    87
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    103
    #2
    Dunno why you are trying to do this.

    Am I close ;) ? 
    <style type="text/css">
    <!--
    
    .myselectbox {
       
        font-family: Tahoma;
        font-size: 18px;
        background-color: #F5F5F5;
    	
    	
    }
        option {
    	font-family: Tahoma;
        font-size: 18px;
        	background-color: #fef5e6;
    		padding:8px;
    		margin:5px;
    		
    		border-top: 1px solid #ebdac0;
        	border-bottom: 1px solid #ebdac0;
        	border-right: 1px solid #d6bb86;
        	border-left: 1px solid #d6bb86;
			float:left; 
			display:inline
        }
		optgroup { margin:10px 0;}
		
		.clear { clear:both; display:inline-block }
    -->
    </style>
    </head>
    
    <body>
    <center>
    <select name="amount_no1" class="myselectbox" id="amount_no1" >
    <optgroup>
                  <option value="1">1</option>
                   <option value="3">3</option>
                   <option value="5">5</option>
                   <option value="7">7</option>
                   </optgroup>
                   <optgroup>
                  <option value="2" class="clear">2</option>
                  <option value="4">4</option>
                  <option value="6">6</option>
                  <option value="8">8</option>
                  </optgroup>
  
    </select> 
    </center>
    </body>
    HTML:
     
    artus.systems, Mar 10, 2011 IP