Solved

Stop test from over-lapping Table in Table Cell.

Posted on 2011-03-01
9
230 Views
Last Modified: 2012-08-13
Hello All;

OK, I have a slight situaltion here.
OK.
<table>
<tr><td id="1">Hello</td><td rowspan="2" id="2">

<table><tr><td>content goes here<br />
and here<br />
and here<br />
and here<br />
and here<br />
and here<br />
and here<br />
and here<br />
and here<br />
and here<br />
</td></tr></table>

</td></tr>
<tr><td colspan="2" id="3">
See Me when the world goes around the world and we see the world go around the world and then the world will come to the world to see the world.. Ya, that will do it! :~()</td></tr>
</table>

Open in new window



Going to explain with the ID's of the above Table Cells.
ID=1 will have a set width
ID=2 will have a nested Table.
ID=3 Text needs to NOT overlap ID=2

Is there a way to stop ID=3 from Overlapping ID=2?
ID=2 Table will grow in size or shrink, depending on the content that is provided to it, so, once the ID=2 Table ends, the text from ID=3 should flow beneath the bottom of the table.

rows         ===Table===
rows           |                    |
rows           |                    |
rows         ==========
rows Content starts going under table

This is a dynamic site, and the content is dynamic.
So this is something that I need to add into a css (or) other attribute within the hardcoded table elements...

Thanks All
Carrzkiss
0
Comment
Question by:Wayne Barron
  • 7
  • 2
9 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35013813
can you try without using line breaks?
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 35013963
I have thought about using linebreaks after a certain amount of characters, but not sure how that would look as a resulting effect on larger resolution monitors.
I have the site working right now with 1024x768 to 1280x1024
So, whatever looks good with 1024 may not look so hot with 1280.
So, if I say cut the words per line to 10, then there is a gap in 1280 and if I cut to 15 per line then it write ontop of the table.

What I need to do is find a way to make the text stop when it hits the table.
If that is even possible?
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 35020862
How about replacing the outside table with <div> tags.
BUT, keeping the table inside of id=2, as it cannot change.
But, I might be able to convert the <table> to <div>
So, that might work.
Any idea's on this?

Thanks
Carrzkiss
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 40

Expert Comment

by:gurvinder372
ID: 35024304
Yes, that is a good idea.

Let me know how the container should look. I can give a sample using DIV and CSS
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 35030332
The only way that I need it to look at least from the start
Is the way I have it in the code source provided in the beginning of this thread.
And provided here.

If you can do something like this, that would be great.
Then all I have to do is make it fit into my project itself, which is always fun to do.

The main idea here is this.
When text is displayed in the left column, it stops once it reaches the table, and then, once it reaches the bottom of the table, it goes under it.

rows         ===Table===
rows           |                    |
rows           |                    |
rows         ==========
rows Content starts going under table

This is what I am needing, due to the design of the server-side JS code, this is how I am having to accomplish what I am needing.

<table>
<tr><td id="1">Hello</td><td rowspan="2" id="2">

<table><tr><td>content goes here<br />
and here<br />
and here<br />
and here<br />
and here<br />
and here<br />
and here<br />
and here<br />
and here<br />
and here<br />
</td></tr></table>

</td></tr>
<tr><td colspan="2" id="3">
See Me when the world goes around the world and we see the world go around the world and then the world will come to the world to see the world.. Ya, that will do it! :~()</td></tr>
</table>

Open in new window


Thank You
Carrzkiss
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 35068937
@gurvinder372
Had to deal with loosing a server motherboard through-out the weekend, and was down for 2 days, and now I am backup and running again.

Would really love to see your example of this soon if you can provide it.

Thank You
Carrzkiss
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 35081229
@gurvinder372
Any idea on when you can have an example of this done?
I REALLY!!! Need it, badly.
Please let me know something, instead of just hanging around.
If you are unable to provide an example, let me know that as well and I will
Close this question out.

Carrzkiss
0
 
LVL 30

Accepted Solution

by:
Wayne Barron earned 0 total points
ID: 35081331
Issue Resolved.
http://css-discuss.incutio.com/wiki/Why_I_think_divs_are_better_than_tables

Code used:
(float:right;) <-- This is what I needed the whole time to make it work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#navigation
 {
  float: right;
  width: 20%;
  padding: 5px;
  border: 1px solid black;
 }
</style>
</head>

<body>
<h1 id="top">Title</h1>
 

 
 <table id="navigation">
 <tr><td>1</td></tr>
 <tr><td>2</td></tr>
 <tr><td>3</td></tr>
 <tr><td>4</td></tr>
 </table>
 
 <div id="main">
  The main content
  <div id="secondary">
   secondary navigation, if this is going to work, I am going to freak the F out, you know what I mean joe blow, and plain jane, I think that I might need, just a little more of this, and that.
  </div>
 </div>

</body>
</html>

Open in new window


Carrzkiss
0
 
LVL 30

Author Closing Comment

by:Wayne Barron
ID: 35126117
Find the right site with the right resouce and then just had to remove all the Dynamic Table content from my code, and wa-la
Works like a charm...
Now time to upload to the LIVE site.

Carrzkiss
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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…
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 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 …
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 …

830 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