Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Senior Coder o0O0o.o0O0o's Avatar
    Join Date
    Jan 2008
    Location
    C:\Windows\System32
    Posts
    1,018
    Thanks
    19
    Thanked 9 Times in 9 Posts

    getting two columns inside fieldset

    i have following code

    PHP Code:
    <fieldset
    <
    legend>Daily Printing</legend>

    <
    p><label>Delivery Run suggestion 3</label>
    <
    input type="submit" name="submit" value="Show"> </p>



    <
    p><label>Show My Orders - <b>SUB DEPT VERSION</b></label>
    <
    input type="submit" name="submit" value="Show ">
    </
    p>

    <
    p><label>Show All Packing Slips - <b>Sorted by Delivery Run</b></label>
    <
    input type="submit" name="submit" value="Show"> </p>
    .
    .
    .
    .</
    fieldset


    and few more <p> s . Now i want e,g 5 labels with button on left and 5 labels with buttn on right in line like in tables with 4 columns. I am new to CSS . can anyone help
    Code:
    css is below
    
    fieldset {
    	
    	border: 1px dotted black;
    	padding-left: 30px;
    	border-top: 1px solid #C9DCA6;
    	background: url(9.png) left bottom repeat-x;
    	
    }
    
    	
    	label 
    	{
    	
    	
    	width: 200px;
    	display: inline-block;
    	line-height: 1.8;
    	vertical-align: top;
    	cursor: hand;
    text-align: left;
    	
    	}
    
    	p {
    	
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	
    }
    Please de-reputate me
    © 0o0o0o0

    Its better to rule in Hell then to serve in Heaven

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Try something like
    Code:
    <style>
    fieldset ul{
    list-style:none;
    width:650px;
    }
    fieldset ul li{
    clear:both;
    }
    fieldset label{
    float:left;
    width:250px;
    }
    fieldset input{
    float:left;
    margin-right:10px;
    }
    </style>
    Code:
    <ul >
    	<li><label>Delivery Run suggestion 3</label>
    		<input type="submit" name="submit" value="Show">
    		<label>Delivery Run suggestion 3</label>
    		<input type="submit" name="submit" value="Show">
    	</li>
    	<li><label>Delivery Run suggestion 3</label>
    		<input type="submit" name="submit" value="Show">
    		<label>Delivery Run suggestion 3</label>
    		<input type="submit" name="submit" value="Show">
    	</li>
    	<li><label>Delivery Run suggestion 3</label>
    		<input type="submit" name="submit" value="Show">
    		<label>Delivery Run suggestion 3</label>
    		<input type="submit" name="submit" value="Show">
    	</li>
    	<li><label>Delivery Run suggestion 3</label>
    		<input type="submit" name="submit" value="Show">
    		<label>Delivery Run suggestion 3</label>
    		<input type="submit" name="submit" value="Show">
    	</li>
    </ul>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder o0O0o.o0O0o's Avatar
    Join Date
    Jan 2008
    Location
    C:\Windows\System32
    Posts
    1,018
    Thanks
    19
    Thanked 9 Times in 9 Posts
    I got the list in tables with this method , but how can make the left list items on left and right list items on extreme right
    not just next to each other like


    LIST 1 ------------------------LIST2

    not just

    LIST1 LIST2
    Please de-reputate me
    © 0o0o0o0

    Its better to rule in Hell then to serve in Heaven

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Um.. try

    Code:
    <style>
    fieldset ul{
    list-style:none;
    
    }
    fieldset ul li{
    clear:both;
    }
    label.left, input.left{
    float:left;
    }
    label.right, input.right{
    float:right;
    }
    fieldset label{
    width:220px;
    }
    
    </style>
    Code:
    <fieldset> 
    <legend>Daily Printing</legend>
    <ul >
    	<li>
    	    <input class="right" type="submit" name="submit" value="Show">
    		<label class="right">Delivery Run suggestion 3</label>
    		
    		<label class="left">Delivery Run suggestion 3</label>
    		<input class="left" type="submit" name="submit" value="Show">
    		
    	</li>
    	<li>
    		<input class="right" type="submit" name="submit" value="Show">
    		<label class="right">Delivery Run suggestion 3</label>
    		
    		<label class="left">Delivery Run suggestion 3</label>
    		<input class="left" type="submit" name="submit" value="Show">
    	</li>
    </ul>
    </fieldset>
    Last edited by abduraooft; 05-20-2008 at 10:10 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Senior Coder o0O0o.o0O0o's Avatar
    Join Date
    Jan 2008
    Location
    C:\Windows\System32
    Posts
    1,018
    Thanks
    19
    Thanked 9 Times in 9 Posts
    IT is working but i want to understand one thing why the class right the submit button comes before the label . It is confusing


    Is it possible to put 5 list items inside e,g DIV tag and 5 items in another tag and then align the div tag inline
    Please de-reputate me
    © 0o0o0o0

    Its better to rule in Hell then to serve in Heaven

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Quote Originally Posted by o0O0o.o0O0o View Post
    IT is working but i want to understand one thing why the class right the submit button comes before the label . It is confusing
    Yes, that's the property of floats. Check and confirm yourself by changing the order!
    Quote Originally Posted by o0O0o.o0O0o View Post
    Is it possible to put 5 list items inside e,g DIV tag and 5 items in another tag and then align the div tag inline
    Give some samples, so that we can work on.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Senior Coder o0O0o.o0O0o's Avatar
    Join Date
    Jan 2008
    Location
    C:\Windows\System32
    Posts
    1,018
    Thanks
    19
    Thanked 9 Times in 9 Posts
    something like below

    div with id = left should come on left and with id = right on right side just like as they were appearing in float

    Code:
    <filedset>
    
    <div id = left>
                             <input type="submit" name="submit" value="Show">
    		<label>Delivery Run suggestion 3</label>
    
                              <input type="submit" name="submit" value="Show">
    		<label>Delivery Run suggestion 3</label>
    
                             <input type="submit" name="submit" value="Show">
    		<label>Delivery Run suggestion 3</label>
    
    </div>
    
    
    <div id = right>
                             <input type="submit" name="submit" value="Show">
    		<label>Delivery Run suggestion 3</label>
    
                              <input type="submit" name="submit" value="Show">
    		<label>Delivery Run suggestion 3</label>
    
                             <input type="submit" name="submit" value="Show">
    		<label>Delivery Run suggestion 3</label>
    
    </div>
    
    </fieldset>
    Please de-reputate me
    © 0o0o0o0

    Its better to rule in Hell then to serve in Heaven

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    You need to place the right floated sibling first in the markup order, to get the desired result!

    So, just put the html of id="right" (assume it has float:right in CSS) before id="left"
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •