Solved

Stop test from over-lapping Table in Table Cell.

Posted on 2011-03-01
9
229 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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
css img-response wont work properly 7 26
move widget title down 4 18
Only three borders showing on image 5 18
Help to align the buttons in a row 2 24
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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 embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

815 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

12 Experts available now in Live!

Get 1:1 Help Now