Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Stop test from over-lapping Table in Table Cell.

Posted on 2011-03-01
9
Medium Priority
?
233 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
[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
  • 7
  • 2
9 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 35013813
can you try without using line breaks?
0
 
LVL 31

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 31

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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
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 31

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 31

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 31

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 31

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 31

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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
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…
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…

719 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