?
Solved

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

Posted on 2011-09-14
5
Medium Priority
?
755 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 1000 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 1000 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 100 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 900 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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
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 code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses

752 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