Solved

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

Posted on 2011-09-14
5
644 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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
login jsp example 24 46
move widget title down 4 18
hosting images 4 27
Javasctipt 2 24
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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 embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

813 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

8 Experts available now in Live!

Get 1:1 Help Now