Solved

Placing rectangle and line shapes in an HTML table cell by DIV

Posted on 2011-09-14
5
659 Views
Last Modified: 2012-05-12
I want to build a flow chart diagram in a single HTML table cell, by creating and positioning the individual rectangles and arrowed lines to form the chart components.

1. I have a DIV within a table cell:

<table border="1">
<tr>
<td>100</td>
        <td>200</td>
        <td>300</td>
</tr>
<tr>
             <div id="my_box">
                    <td colspan = 2>
                            <p>I'm text in a div.</p>
                    </td>
</div>
        <td>600</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

2. I have a specification for one rectangle:

<div class=rectangle/>

.rectangle
{
   width:100px;
   height:100px;
   border: 1px solid #000;
   background-color: pink;
}

How do I use these two code sets to create the rectangle within the cell?
How do I add another rectangle at another (actually, non-overlapping) position within that same cell?
How do I use px coordinates to define the position of these two shapes within the same table cell?

Many thanks
Kelvin
0
Comment
Question by:Kelvin4
5 Comments
 
LVL 8

Assisted Solution

by:Jen0910
Jen0910 earned 250 total points
ID: 36537882
You have wrong code in there.

<tr>
             <div id="my_box">
                    <td colspan = 2>
                            <p>I'm text in a div.</p>
                    </td>
</div>
        <td>600</td>
</tr>

Open in new window


The div needs to be within the table cell. So it should look like this:
<tr>
<td colspan = 2>
<div id="my_box">
<p>I'm text in a div.</p>
</div>
</td>
        <td>600</td>
</tr>

Open in new window


to place the rectangle into "my_Box", do this:

<tr>
<td colspan = 2>
<div id="my_box">
<div class=".rectangle">I'm the rectangle in a div.</div>
</div>
</td>
        <td>600</td>
</tr>

Open in new window


You can set relative positioning for the individual elements within "my_box", which in this case would be ".rectangle". Overlapping elements use absolute positioning, so just avoid that. Study up on floats and margins, and that should help you.
http://css.maxdesign.com.au/floatutorial/
http://www.w3schools.com/cssref/pr_class_float.asp
0
 
LVL 8

Assisted Solution

by:Jen0910
Jen0910 earned 250 total points
ID: 36537923
whoops! I have a typo in there--copy & paste fail. >:-[
Eliminate the period from the class in the HTML:

<tr>
<td colspan = 2>
<div id="my_box">
<div class="rectangle">I'm the rectangle in a div.</div>
</div>
</td>
        <td>600</td>
</tr>

Open in new window

0
 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 25 total points
ID: 36538276
Have you thought about using a 3rd party plugin for the charts?  

Google: http://code.google.com/apis/chart/image/docs/gallery/chart_gall.html
0
 
LVL 18

Accepted Solution

by:
Rartemass earned 225 total points
ID: 36542849
While Jen0910's answer is accurate, I think it may have been interpreted slightly askew.
Correct me if I'm wrong, but you want the CSS for .rectangle {...} to assign to the <div id=my_box>.
Is that right?

If so then only the CSS or HTML need to change slightly.

To make the existing CSS work, simply change the html to be <div class="rectangle"> instead of <div id="my_box>
To make the existing HTML work, change the CSS to:

#my_box
{
   width:100px;
   height:100px;
   border: 1px solid #000;
   background-color: pink;
}

The rest of Jen0910's responses address the remaining questions well.
0
 

Author Closing Comment

by:Kelvin4
ID: 36548370
Thanks everyone.
Kelvin
0

Featured Post

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Hide cell in a table 2 27
REST endpoint query with a parameter 1 18
Are these icons a web font? 3 21
Can anyone see what is the fault in my javascript code? 8 31
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question