table like structure using div

[zohab]

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?

 

[arbitter]

I just wonder why would you want to do this with div's?

[cssfreakie]

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

[crmamx]

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.

[dbrimlow]

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>

[crmamx]

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.

[cssfreakie]

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

[crmamx]

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!

[cssfreakie]

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

[crmamx]

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.

[KevinM1]

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.

[crmamx]

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.