Solved

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

Posted on 2011-09-14
5
620 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks everyone.
Kelvin
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

728 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now