zohab Posted March 14, 2011 Share Posted March 14, 2011 Hi, I have following table structure and i want to do same using div <table align="left"><tr><td><input type="button" name="button" id="button" class="button" title="Button"/></td><td><input style="display:none" type="image" src="themes\default\images\img_loading.gif" border="0" name="img_loading" id="img_loading"></td></tr></table> any idea? Quote Link to comment https://forums.phpfreaks.com/topic/230599-table-like-structure-using-div/ Share on other sites More sharing options...
arbitter Posted March 14, 2011 Share Posted March 14, 2011 I just wonder why would you want to do this with div's? Quote Link to comment https://forums.phpfreaks.com/topic/230599-table-like-structure-using-div/#findComment-1187481 Share on other sites More sharing options...
cssfreakie Posted March 15, 2011 Share Posted March 15, 2011 I just wonder why would you want to do this with div's? well because tables are not meant for layout, but to display data in an orderly way. @ topic starter maybe have a look here, it's guide how to make a media box. The same technique can be used for anything. Also i can recommend to separate your style from your content. So instead of using in-line style use an external style-sheet Quote Link to comment https://forums.phpfreaks.com/topic/230599-table-like-structure-using-div/#findComment-1187630 Share on other sites More sharing options...
crmamx Posted March 18, 2011 Share Posted March 18, 2011 Also i can recommend to separate your style from your content. So instead of using in-line style use an external style-sheet I think I am now qualified to give advice on that. Quote Link to comment https://forums.phpfreaks.com/topic/230599-table-like-structure-using-div/#findComment-1189269 Share on other sites More sharing options...
dbrimlow Posted March 18, 2011 Share Posted March 18, 2011 Without seeing the entire page and other container context or CSS rules, where you want the table placed, it is difficult to give a "default" answer. However, as a stand-alone, it is easy. Understanding floats is one of the most fundamental (and hardest to master) aspects of css. But once you can master floats, CSS is a breeze. Create, as follows, 3 css classes in your external file or within the head section CSS (adjust paddings, margins, widths, etc as needed): .buttonwrap {float:left: display:block; margin: 20px; padding: .5px 10px; width:70%; } .leftbutton {float: left; padding-left: 10px} .rightimg {float: right; padding-right: 10px} Now put this in your markup body in place of the table. <div class="buttonwrap"> <span class="leftbutton"><input type="button" name="button" id="button" class="button" title="Button"/> </span> <span class="rightimg"><input type="image" src="themes\default\images\img_loading.gif" name="img_loading" id="img_loading alt="ALWAYS USE AN ALT WITH IMAGE" width="???" height="???"></span> </div> Quote Link to comment https://forums.phpfreaks.com/topic/230599-table-like-structure-using-div/#findComment-1189295 Share on other sites More sharing options...
crmamx Posted March 18, 2011 Share Posted March 18, 2011 The hardest thing for me was the box concept, then float, positioning, div and wrap. Take the code that Dave has provided and go here to test it: http://www.w3schools.com/Css/tryit.asp?filename=trycss_default This is a great way to learn. Change all the values and see what happens. Quote Link to comment https://forums.phpfreaks.com/topic/230599-table-like-structure-using-div/#findComment-1189299 Share on other sites More sharing options...
cssfreakie Posted March 20, 2011 Share Posted March 20, 2011 The hardest thing for me was the box concept, then float, positioning, div and wrap. Take the code that Dave has provided and go here to test it: http://www.w3schools.com/Css/tryit.asp?filename=trycss_default This is a great way to learn. Change all the values and see what happens. Zohab, off topic, if your testing code just do it local. save you time, and avoids bad practices such as not using external stylesheets Quote Link to comment https://forums.phpfreaks.com/topic/230599-table-like-structure-using-div/#findComment-1189863 Share on other sites More sharing options...
crmamx Posted March 20, 2011 Share Posted March 20, 2011 Zohab, off topic, if your testing code just do it local. save you time, and avoids bad practices such as not using external stylesheets Are you insinuating I am using bad practices?... Your new avatar is GREAT! Quote Link to comment https://forums.phpfreaks.com/topic/230599-table-like-structure-using-div/#findComment-1189909 Share on other sites More sharing options...
cssfreakie Posted March 20, 2011 Share Posted March 20, 2011 Zohab, off topic, if your testing code just do it local. save you time, and avoids bad practices such as not using external stylesheets Are you insinuating I am using bad practices?... Your new avatar is GREAT! Ha thanks!, but no i really mean local testing is always better faster and secure Quote Link to comment https://forums.phpfreaks.com/topic/230599-table-like-structure-using-div/#findComment-1189912 Share on other sites More sharing options...
crmamx Posted March 20, 2011 Share Posted March 20, 2011 Zohab, off topic, if your testing code just do it local. save you time, and avoids bad practices such as not using external stylesheets Are you insinuating I am using bad practices?... Your new avatar is GREAT! Ha thanks!, but no i really mean local testing is always better faster and secure I know you are right. But I am not going thru all the aggravation of installing all the stuff needed on my computer. And it is too complicated for me anyway. If I was a developer I would. But this is my only site. So I just develop the code in the url mentioned, which works great, and transfer it to the css file when I get it the way I want it. Quote Link to comment https://forums.phpfreaks.com/topic/230599-table-like-structure-using-div/#findComment-1189922 Share on other sites More sharing options...
KevinM1 Posted March 20, 2011 Share Posted March 20, 2011 For HTML/CSS, you don't need any special software aside from a standards compliant web browser (Firefox, Chrome, Opera - take your pick). When testing your markup and styles, it's as simple as: Start browser -> Click 'File' -> Click 'Open File...' -> Open your HTML file Remember separation of concerns? Your PHP development should have no impact on your HTML/CSS development. Making a script work correctly is an entirely different process than making its output look pretty. HTML/CSS should be seen as putting a skin on top of the actual working bits. Quote Link to comment https://forums.phpfreaks.com/topic/230599-table-like-structure-using-div/#findComment-1189928 Share on other sites More sharing options...
crmamx Posted March 21, 2011 Share Posted March 21, 2011 When I started out I was running IE7, but the forum taught me that I needed to switch so now I am running Firefox with the Firebug addon. I understand how the external, internal and inline css files work. Except, I did not know what reset.css did. And it therefore was causing me 2 major problems whereby I would develop the code in the w3schools editor (and I have read the review about them that you reference) and when I moved it to my program it would not work. Now I can pretty much do what I want except with positioning. It is still a hell of a problem and takes me forever to figure it out. Quote Link to comment https://forums.phpfreaks.com/topic/230599-table-like-structure-using-div/#findComment-1190259 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.