Solved

Stop test from over-lapping Table in Table Cell.

Posted on 2011-03-01
9
228 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
 
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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 Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jQuery or CSS 9 38
can't display bootstrap glyphs in select menu 4 17
CSS grid style change 2 14
Adjust the position 3 13
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
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…

762 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

18 Experts available now in Live!

Get 1:1 Help Now