471,598 Members | 1,241 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,598 software developers and data experts.

align fieldsets with css

realin
254 100+
hi guys,

i wanna set my fieldsets properly without using table.. like two fields in one row... here are my fieldsets..


Expand|Select|Wrap|Line Numbers
  1.             <fieldset>
  2.                             <legend>Personal Information</legend>
  3.                             <p><label>First Name</label><br/>
  4.                             <input type='text'size='38' name='fname'/></p>
  5.                             <p><label>Last Name</label><br/>
  6.                             <input type='text'size='38' name='lname'/></p>
  7.                             <p><label>Display Name</label><br/>
  8.                             <input type='text'size='38' name='dname'/></p>
  9.                             <p><label><input type='checkbox' name='chk'onClick='en_bday(this)'/>Fill Birthday</label><br/>
  10.  
  11.                             Day<select name='bday' id='bday' disabled='disabled'>
  12.                             <?php $i=1;
  13.                             while($i!=32){
  14.                             echo"<option>$i</option>";
  15.                             $i++;
  16.                             }?>
  17.                             </select>
  18.                             Month<select name='bmon' id='bmon' disabled='disabled'/>
  19.                             <option>Jan</option><option>Feb</option><option>Mar</option>
  20.                             Year<select name='byr' id='byr' disabled='disabled'/>
  21.                             <?php $j=1900;
  22.                             while($j!=2002){
  23.                             echo"<option>$j</option>";
  24.                             $j++;
  25.                             }?></select>
  26.                             </p>
  27.                             <p><label>Few Lines About yourself<br />
  28.                                 <textarea cols='25' rows='5' name='yrself'></textarea></label></p>
  29.  
  30.                     </fieldset>
  31.  
  32.                         <fieldset><legend>Websites</legend>
  33.                                 <p><label>Website<br/><input type='text' name='web' size=38/><br /></p>
  34.                                 <p>Yahoo ID<br/><input type='text' name='ymsg' size=38/><br /></p>
  35.                                 <p>MSN ID<br/><input type='text' name='msn' size=38/><br/></p>
  36.                                 <p>GTalk ID<br/><input type='text' name='gtalk' size=38/></label></p>
  37.                         </fieldset>
  38.  
  39.  
  40.  
  41.                         <fieldset>
  42.                                 <legend>Change Password</legend>
  43.                                 <p><label>Old Password<br />
  44.                                 <input type="password" name="opass" size='38' /></p>
  45.                                 <p>New Password<br />
  46.                                 <input type="password" name="npass1" size='38' /></p>
  47.                                 <p>Repeat New Password<br />
  48.                                 <input type="password" name="npass2" size='38' />
  49.                                 </label></p>
  50.                         </fieldset>
  51.  
  52.                         <fieldset>
  53.                                 <legend>Customize</legend>
  54.                                 <p><label>Do not like the GUI, 
  55.                                 Change the one you like</label></p>
  56.  
  57.                         </fieldset>
  58.  
  59.  
And here is the CSS i am using

Expand|Select|Wrap|Line Numbers
  1. fieldset {
  2.  
  3.     padding: 0px 50px 10px 50px;
  4.     border:1px solid blue;    
  5.     float:left;
  6.     margin-right:5px;
  7.     color:black;
  8.     position:relative;
  9.  
  10.  
  11.  
  12. }
  13.  
  14.  
  15. fieldset legend {
  16.     padding: 0px .1em 0px .3em;
  17.     color:blue;
  18.     font: 13px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana;
  19.  
  20. }
  21.  

Please help me.. the one with legend customize.. comes really down.. i also wanna add three buttons .. but it doesnt come below the fieldsets.. please help me.. do i need to add one more div for button ??

sorry for my n00bness in css :(

thanks for ur time :)
Aug 15 '07 #1
1 3601
realin
254 100+
well i couldnt edit the above post so i have to reply to it and to make my post more clear i am adding the actual picture of the layout.. now the problem/issue is more clear to you experts, please help me guys



i hope you can see the image, the direct link is here

Direct Link
Aug 15 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by PatD | last post: by
3 posts views Thread by Trent | last post: by
4 posts views Thread by andrew | last post: by
2 posts views Thread by yangtono | last post: by
40 posts views Thread by maya | last post: by
2 posts views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.