Improve company productivity with a Business Account.Sign Up

x
?
Solved

Stop test from over-lapping Table in Table Cell.

Posted on 2011-03-01
9
Medium Priority
?
237 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: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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
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

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

584 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