html - How can I make my layout with no tables? -
i used tables layout must use divs instead because have forms in tables. mistake rendering code tables because has forms , form functionality experiencing unwanted sideeffects using tables must use divs instead layout. can me how achieve layout no tables?
here's fiddle code. html is
<body> <div id="wrapper"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- v2 --> <ins class="adsbygoogle" style="display:inline-block;width:728px;height:15px" data-ad-client="ca-pub-7211665888260307" data-ad-slot="9119838994"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="border1"></div> <div id="searchbox"> <form id="search_form" action="/account/do_login" method="post"> <div class="div-table"> <div class="div-table-row"> <div class="div-table-col">log in</div> <div class="div-table-col"><input name="email" size="35" title="email" type="text" ></div> <div class="div-table-col"><input name="password" size="35" title="password" type="password" ></div> <div class="div-table-col"> <input value="login" type="submit"></div> <div class="div-table-col"> </div> </div> <div class="div-table-row"> <div class="div-table-col logintext">your e-mail</div> <div class="div-table-col logintext">password</div> </div> </form> <form autocomplete="off" id="create_user" action="/create/" method="post"> <div class="div-table"> <div class="div-table-row"> <div class="div-table-col">create account</div> <div class="div-table-col"><input name="email" size="35" title="email" type="text" ></div> <div class="div-table-col"><input name="password" size="35" title="password" type="password" ></div> <div class="div-table-col"> <input value="create account" type="submit"></div> <div class="div-table-col"> </div> </div> <div class="div-table-row"> <div class="div-table-col logintext">your e-mail</div> <div class="div-table-col logintext">password</div> </div> <div class="div-table-row"> <div class="div-table-col">or log in with</div> <div class="div-table-col"><a href="/auth/google"><img id="googlelink" alt="login google" src="/_/img/transparent.gif"></a></div> <div class="div-table-col"><a href="/auth/linkedin"> <img id="linkedinlink" alt="login linkedin" src="/_/img/transparent.gif"></a></div> <div class="div-table-col"><a href="/auth/yahoo"><img id="yahoolink" alt="login yahoo" src="/_/img/transparent.gif"> </a></div> <div class="div-table-col"><a href="/auth/facebook"> <img id="facebooklink" alt="login facebook" src="/_/img/transparent.gif"></a></div> </div> </div> </form> </div> <div id="recover"><a href="/passwordreset/"><div class="reminderlink">click here recover account</div></a></div> </div> </body> </html> after while tried bootstrap didn't work @ all:
<!doctype html> <html dir="ltr" lang="en-in" class="js"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta charset="utf-8"> <meta name="description" content="find free ads different kind of items sale in {% if regionname , regionname != 'none' %}{{regionname}}{% else %}{% if cityname , cityname != 'none' %}{{cityname}}{% else %}{% if country , country != 'none' %}{{country}}{% endif %}{% endif %}{% endif %}"> <meta name="googlebot" content="noarchive"> {% if cursor %} <link rel="next" href="/delhi/?o=2"> {% endif %} <link rel="canonical" href="/q"> <title>login / create</title> <!-- css includes: --> <link href="/static/css/koolindex_in.css?{{version}}" rel="stylesheet" type="text/css"> <!-- latest compiled , minified css --> <!-- latest compiled , minified css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!-- latest compiled , minified javascript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <!-- headextras: --> <link rel="icon" href="/img/favicon_in.ico?07217" type="image/x-icon"> <!-- <link rel="shortcut icon" href="/img/favicon_in.ico?07217" type="image/x-icon"> <link rel="shortcut icon" href="/img/favicon_in.png?07217" type="image/png"> <link rel="apple-touch-icon" href="/img/favicon_ios_in.png?07217" type="image/png"> <link rel="icon" href="/img/favicon_us.ico?51340" type="image/x-icon"> <link href="https://plus.google.com/123122342342345" rel="publisher">--> <!-- javascripts: --> <script type="text/javascript" src="/static/js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="/static/js/common.min.js"></script> <script type="text/javascript" src="/static/js/arrays_v2.js"></script> <script type="text/javascript" src="/static/js/searchbox.min.js"></script> </head> <body> {% include "kooltopbar.html" %} <div id="wrapper"> {% if request.host == "www.koolbusiness.com" %} <a href="/"> <h1 id="logo" class="sprite_index_in_in_en_logo spritetext">koolbusiness.com - right choice buying & selling in india</h1></a> {% endif %} <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- v2 --> <ins class="adsbygoogle" style="display:inline-block;width:728px;height:15px" data-ad-client="ca-pub-7211665888260307" data-ad-slot="9119838994"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="border1"></div> <div id="searchbox"> <div class="container"> <form id="search_form" action="/account/do_login" method="post"> <div class="row"> <div class="col-md-1">log in with</div> <div class="col-md-1"><a href="/auth/google"><img id="googlelink" alt="login google" src="/_/img/transparent.gif"></a></div> <div class="col-md-1"> <a href="/auth/linkedin"> <img id="linkedinlink" alt="login linkedin" src="/_/img/transparent.gif"></a></div> <div class="col-md-1"><a href="/auth/yahoo"><img id="yahoolink" alt="login yahoo" src="/_/img/transparent.gif"> </a></div> <div class="col-md-1"><a href="/auth/facebook"> <img id="facebooklink" alt="login facebook" src="/_/img/transparent.gif"></a></div> </div> <div class="row"> <div class="col-md-1">log in</div> <div class="col-md-1"><input name="email" size="35" title="email" type="text"> </div> <div class="col-md-1"><input name="password" size="35" title="password" type="password"></div> <div class="col-md-2"><input value="login" type="submit"></div> </div> <div class="row"> <div class="col-md-1">.col-md-4</div> <div class="col-md-2 logintext">your e-mail</div> <div class="col-md-2 logintext">password</div> </div> </form> <form autocomplete="off" id="create_user" action="/create/" method="post"> <div class="row"> <div class="col-md-1">create account</div> <div class="col-md-1"><input name="email" size="35" title="email" type="text"> </div> <div class="col-md-1"><input name="password" size="35" title="password" type="password"></div> <div class="col-md-2"><input value="create account" type="submit"></div> </div> </form> </div> </div> <div id="recover"><a href="/passwordreset/"><div class="reminderlink">click here recover account</div></a></div> </div> </body> </html> edit
the way did twitter bootstrap , i'm happy it. rearranging divs didn't solve problem of autocomplete form had resort dirty trick clear form create field. strange thing had restart make twitter bootstrap work.
<div id="mybox"> <div class="container"> <form id="search_form" action="/account/do_login" method="post"> <div class="row"> <div class="col-md-1">log in with</div> <div class="col-md-2"><a href="/auth/google"><img id="googlelink" alt="login google" src="/_/img/transparent.gif"></a></div> <div class="col-md-2"> <a href="/auth/linkedin"> <img id="linkedinlink" alt="login linkedin" src="/_/img/transparent.gif"></a></div> <div class="col-md-2"><a href="/auth/yahoo"><img id="yahoolink" alt="login yahoo" src="/_/img/transparent.gif"> </a></div> <div class="col-md-2"><a href="/auth/facebook"> <img id="facebooklink" alt="login facebook" src="/_/img/transparent.gif"></a></div> </div> <div class="row"> <div class="col-md-1">log in</div> <div class="col-md-3"> <input name="email" size="35" title="email" type="text"> </div> <div class="col-md-3"> <input name="password" size="35" title="password" type="password"> </div> <div class="col-md-2"> <input value="login" type="submit"> </div> </div> <div class="row"> <div class="col-md-1"></div> <div class="col-md-3 logintext">your e-mail</div> <div class="col-md-3 logintext">password</div> </div> </form> <form autocomplete="off" id="create_user" action="/create/" method="post"> <input style="display:none"> <input type="password" style="display:none"> <div class="row"> <div class="col-md-1">create account</div> <div class="col-md-3"> <input name="email" id="email" size="35" autocomplete="off" title="email" type="text" value=""> </div> <div class="col-md-3"> <input name="password" id="password" size="35" autocomplete="off" title="password" type="password" value=""> </div> <div class="col-md-2"> <input value="create account" type="submit"> </div> </div> </form> </table> </div> </div> <div id="recover"><a href="/passwordreset/"><div class="reminderlink">click here recover account</div></a></div>
as may discovering, tables should not used layout. matter of fact, should used displaying data.
as far building layout divs, here's need know started.
use width, max-width, , min-width advantage create intuitive , responsive layouts.
use percent, em, , vh in place of pixels can.
consider learning , using floats, , clear: both responsive layout.
also, consider using twitter bootstrap css framework. grid functionality. can learn , use in minutes.
i hope helps.
Comments
Post a Comment