Page 1 of 1

Pls help me convert this table into div :'(

Posted: Thu Dec 09, 2010 9:42 pm
by revbackup

Code: Select all

<table cellpadding="0" cellspacing="0" width="100%">
          <tr>
           <td width="3"><img src="images/table_tl.gif" /></td>
           <td class="table_content_tm txt_16_white" align="left">Login Page</td>
           <td width="3"><img src="images/table_tr.gif" /></td>
          </tr>
         </table>
        </td>
       </tr>
       <tr>
        <td class="table_content_m">
         <table cellpadding="1" cellspacing="0" width="100%">
          <tr>
           <td bgcolor="#FFFFFF">
            <table cellpadding="0" cellspacing="0" width="100%">
             <tr>
              <td class="table_content_bg" valign="top" align="center" style="padding:30px 0px;">
               <table cellpadding="0" cellspacing="0">
                <tr>
                 <td>
                  <table cellpadding="0" cellspacing="0">
                   <tr>
                    <td class="txt_16 pad_10_right" style="color:#666666;" align="right">ID :</td>
                    <td>
                     <table cellpadding="0" cellspacing="0">
                      <tr>
                       <td width="3"><img src="images/curve_login_l.gif" /></td>
                       <td style="background:#F9FDFF; border-top:1px solid #A4A6A7; border-bottom:1px solid #D5D9DA;"><input name="" type="text" style="width:254px; border:0px; background:none;" class="txt_14" /></td>
                       <td width="3"><img src="images/curve_login_r.gif" /></td>
                      </tr>
                     </table>
                    </td>
                   </tr>
                   <tr><td colspan="2"><img src="images/b.gif" height="5" width="1" /></td></tr>
                   <tr>
                    <td class="txt_16 pad_10_right" style="color:#666666;" align="right">password :</td>
                    <td>
                     <table cellpadding="0" cellspacing="0">
                      <tr>
                       <td width="3"><img src="images/curve_login_l.gif" /></td>
                       <td style="background:#F9FDFF; border-top:1px solid #A4A6A7; border-bottom:1px solid #D5D9DA;"><input name="" type="password" style="width:254px; border:0px; background:none;" class="txt_14" /></td>
                       <td width="3"><img src="images/curve_login_r.gif" /></td>
                      </tr>
                     </table>
                    </td>
                   </tr>
                  </table>
                 </td>
                </tr>
                <tr><td><img src="images/b.gif" height="10" width="1" /></td></tr>
                <tr><td align="right"><a href="#" onMouseOut="swapImgRestore();" onMouseOver="swapImage('loginmain','','images/btn_loginmain_b.png',1);"><img src="images/btn_loginmain.png" name="loginmain" id="loginmain" /></a></td></tr>
                <tr><td><img src="images/b.gif" height="10" width="1" /></td></tr>
                <tr>
                 <td align="left">
                  <table cellpadding="0" cellspacing="0">
                   <tr>
                    <td><img src="images/bullet_arrow.gif" /></td>
                    <td><a href="#" class="link_12">text here</a></td>
                   </tr>
                   <tr>
                    <td><img src="images/bullet_arrow.gif" /></td>
                    <td><a href="#" class="link_12">Text here</a></td>
                   </tr>
                  </table>
                 </td>
                </tr>
               </table>
              </td>
             </tr>
            </table>
           </td>
          </tr>
         </table>

Re: Pls help me convert this table into div :'(

Posted: Wed Dec 22, 2010 10:05 pm
by jzmwebdevelopment
Have you got a working example of this?

Re: Pls help me convert this table into div :'(

Posted: Thu Jan 27, 2011 6:50 pm
by Pazuzu156
I'm doong it I'll have it up soon.

Re: Pls help me convert this table into div :'(

Posted: Thu Jan 27, 2011 8:02 pm
by Pazuzu156
Every bit of code works all the styles are hot linked to my website where I have this stuff saved. Also, the images surrounding the inputs do not work because they are using the images you have so just add those images in a folder named images it should all work out.

Code: Select all

<html>
<head>
<title>Div Centering</title>
<link rel="stylesheet" href="http://lwd.jae-entertainment.we.bs/team_proj/styles/html.css" type="text/css" />
</head>
<body>

<!--DIV Redo-->
<div id="container">
<p>Login Page</p>
<img alt="tl" src="http://lwd.jae-entertainment.we.bs/team_proj/images/tl_curve_white.gif" height="6" width="6" id="tl" /> 
<img alt="tr" src="http://lwd.jae-entertainment.we.bs/team_proj/images/tr_curve_white.gif" height="6" width="6" id="tr" />
<img alt="bl" src="http://lwd.jae-entertainment.we.bs/team_proj/images/bl_curve_white.gif" height="6" width="6" id="bl" /> 
<img alt="br" src="http://lwd.jae-entertainment.we.bs/team_proj/images/br_curve_white.gif" height="6" width="6" id="br" />
<form method="POST" action="login.html">
<table align="center">
	<tr>
		<td align="right">ID:</td>
		<td><img src="images/curve_login_l.gif" /></td>
		<td style="background:#F9FDFF; border-top:1px solid #A4A6A7; border-bottom:1px solid #D5D9DA;"><input name="" type="text" style="width:254px; border:0px; background:none;" class="txt_14" /></td>
		<td><img src="images/curve_login_r.gif" /></td>
	</tr>
	<tr>
		<td align="right">Password:</td>
		<td><img src="images/curve_login_l.gif" /></td>
		<td style="background:#F9FDFF; border-top:1px solid #A4A6A7; border-bottom:1px solid #D5D9DA;"><input name="" type="password" style="width:254px; border:0px; background:none;" class="txt_14" /></td>
		<td><img src="images/curve_login_r.gif" /></td>
	</tr>
	<tr>
		<td colspan="3" align="right"><a href="#" onmouseover="document.login_btn.src='http://lwd.jae-entertainment.we.bs/team_proj/images/btn_loginmain_b.png'" onmouseout="document.login_btn.src='http://lwd.jae-entertainment.we.bs/team_proj/images/btn_loginmain.png'"><img src="http://lwd.jae-entertainment.we.bs/team_proj/images/btn_loginmain.png" name="login_btn" border="0" /></a></td>
	</tr>
	<tr>
		<td><img src="images/bullet_arrow.gif" /></td>
		<td><a href="#">Link 1</a></td>
	</tr>
	<tr>
		<td><img src="images/bullet_arrow.gif" /></td>
		<td><a href="#">Link 2</a></td>
	</tr>
</table>
</form>
</div>
</body>
</html>