Jump to content

table like structure using div


zohab

Recommended Posts

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?

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.