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,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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 09: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,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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
    •