SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    changing login table to tabless

    I have a logIn table at http://dot.kr/x-test/layOut/17/logIn...glish&deploy=1
    Code:
    <table class="marginAuto">
    <tr>
      <td>ID</td>
      <td class="p5"><input type="password" class="w100 b1_555"></td>
      <td rowspan="2"><input type="submit" value="logIn" class="w50 h50"></td>
    </tr>
    <tr>
      <td>password</td>
      <td class="p5"><input type="password" class="w100 b1_555"></td>
    </tr>
    <tr>
      <td colspan="3" class="bWhite alignCenter m-t5 p5 b1_555"><a href="/x-test/layOut/17/logIn/join/">join</a></td>
    </tr>
    <tr>
      <td colspan="3" class="h30"></td>
    </tr>
    </table>
    I like to make it tabless.
    The folloiwng code is one of my trials for it, but it seems not to work.
    Code:
    <div class="marginAuto">
      <span>ID</span><span><input type="password" class="w100 b1_555"></span> 
    </div>
    <div class="marginAuto">
    <span>password</span><span><input type="password" class="w100 b1_555"></span> 
    </div>
    How can I make the same result or the similar result without table?

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Let start by doing some markup corrections.
    It should be a form not a div. I also noticed you styled the login input. :/ That causes a lot of headaches as far as cross browser comp goes. I clanged it to a button. Accomplishes the same thing, in this case, but both webkit and moz will honor its styling. after that its simple:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
    	<head>
    		<title></title>
    		<style type="text/css">
    				form.marginAuto{ width:250px; margin:0 auto;}
    				form br {clear:left;}
    				.loginF label, .loginF input {float:left; margin-bottom: 10px}
    				.loginF input{margin-left:20px;}
    				.loginF label, #ID, #pass { width: 100px; }
    				.loginF label{ width: 50px; }
    				.loginF a{ display: block; padding:5px; border: 1px solid #000; text-align: center; text-decoration: none;}
    				 #loginB{ float: right; height:50px; width:50px; margin-top: -60px}
    			
    
    		</style>
    	</head>
    	<body>
    <form class="marginAuto loginF">
    	<div>
    		  <label for="ID">ID</label><input id="ID"type="password" class="w100 b1_555"><br />
    		  <label for="pass">password </label><input id="pass" type="password" class="w100 b1_555"> <br />
    		  <button id="loginB" type="submit" value="logIn" >Log In</button>
    		  <a href="/x-test/layOut/17/logIn/join/">join</a>
      	</div>
    </form>	
    </body>
    </html>
    You are floating the labels and inputs and clearing each row with the BR tag ( which has the added benefit of retaining this layout when CSS is off)
    We float the submit button in the opposite direction ( right), style it and bring it to the top of the form by adding a negative top margin that is = to its height. Then we make the "join" anchor a block and style it And there you are.. no greedy!


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
  •