Solved

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

Posted on 2011-09-14
5
702 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

687 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