Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Problem with spanned cells

Status
Not open for further replies.
Jonnn

Jonnn

Programmer
Nov 17, 2004
135
GB
I have the following code ...

Code: 
<html>
<head>
<title> Beacon Inn Pool Team </title>

<style type="text/css">

.marquee          { font-family: verdana; font-size: 12; color: red;}
td.font           { font-family: verdana; font-size: 10; color: green;}
td.image          { background-repeat:no-repeat}
h5.tdhead         { font-family: verdana;}
a.nav_links       { font-family: verdana; font-size: 10; color: green; text-decoration: none}
a.nav_links:hover { text-decoration: underline;} 		  
p                 { font-family: verdana; font-size: 10; color: green;}

</style>

<script language="javascript">

function draw_fixture(date, home, away) {
document.write("<tr align='center'>");

document.write("<td class='font' width='25%'>");
document.write(date);
document.write("</td>");

document.write("<td class='font' width='25%'>");
document.write(home);
document.write("</td>");

document.write("<td class='font' width='5%'>");
document.write("VZ");
document.write("</td>");

document.write("<td class='font' width='25%'>");
document.write(away);
document.write("</td>");

document.write("</tr>");
}
 
</script>
</head>

<body bgcolor="#eaffea">
<div align="center"> 				

<table width="700" height="500" border="1" bordercolor="gray" cellspacing="0" cellpadding="2" bgcolor="white">		<!-- *** Start Main Table *** -->

	<tr>
		<td class="image" width="450" height="125" valign="center" background="C:\Image1.jpg"> 
		&nbsp
		</td>
	
		
		<td class="font" width="250" rowspan="2" align="right" valign="top" background="C:\Image3.jpg" style="padding-bottom:0;">

		<h5 class="tdhead"> <u> Site Navigation </u> </h5>

		<a href="" name="home" class="nav_links" id="home"> 		Home </a> <br/>
		... <br/>
		<a href="" name="fixtures" class="nav_links" id="fixtures">	<strong> Fixtures </strong> </a> <br/>
		... <br/>
		<a href="" name="team_stats" class="nav_links" id="team_stats"> Team Stats </a> <br/>
		... <br/>
		<a href="" name="pictures" class="nav_links" id="pictures"> 	Pictures </a> <br/>
		<<< pulls down when i write more text
	

		<!-- *****     IF I WRITE ANY MORE THE IMAGE WILL PULL DOWN    ***** -->


	
		</td>
	</tr>

	
	<tr>
		<td class="font" width="450" rowspan="2" valign="top" align="justify">
		<div align="center">
		<h5 class="tdhead"> <u> Fixtures </u> </h5>
		</div>
		
		The following fixtures for 10 weeks ...
		
		<br/>
		<br/>
		<br/>
		
		<table width="80%" border="0" cellspacing="0" cellpadding="1">

			<tr align="center">
				<td class="font" width="25%"> <strong> Date </strong> </td>
				<td class="font" width="25%"> <strong> Home Team </strong> </td>
				<td class="font" width="5%"> <strong> &nbsp </strong> </td>
				<td class="font" width="25%"> <strong> Away Team </strong> </td>
			</tr>
			
			<tr align="center">
				<td class="font" width="25%"> &nbsp </td>
				<td class="font" width="25%"> &nbsp </td>
				<td class="font" width="5%"> &nbsp </td>
				<td class="font" width="25%"> &nbsp </td>
			</tr>
	
			<script language="javascript">
				draw_fixture("Feb 15th", "Beacon Inn", "Toby A");
				draw_fixture("Feb 15th", "Beacon Inn", "Toby A");
				draw_fixture("Feb 15th", "Beacon Inn", "Toby A");
				draw_fixture("Feb 15th", "Beacon Inn", "Toby A");
				draw_fixture("Feb 15th", "Beacon Inn", "Toby A");
				draw_fixture("Feb 15th", "Beacon Inn", "Toby A");
				draw_fixture("Feb 15th", "Beacon Inn", "Toby A");
				draw_fixture("Feb 15th", "Beacon Inn", "Toby A");
				draw_fixture("Feb 15th", "Beacon Inn", "Toby A");
			</script>		
			

			<!-- *****     IF I WRITE ANY MORE THE RIGHT BOX WILL PUSH UP     ***** -->

	
		</table>
		
		
		pulls up when i write text >>>>>>>>>>>>>>>>>>>>>

		</td>
	</tr>

	<tr>	
		<td class="font" width="250" height="230" align="left" valign="top">
		<div align="center">
		<h5 class="tdhead"> <u> Hmmm </u> </h5>
		</div>
		</td>
	</tr>
	

	<tr>
		<td class="font" colspan="2" height="20">
		<div align="center">
		Jonathan Percy Design  .  Copyright 2005
		</div>
		</td>
	</tr>

</table>										<!-- *** End Main Table *** -->

</div>						

</body>
</html>

The problem is ..

When i type more links into the navigation cell, the image cell pulls down and the same happens with the fixtures because the cell on the right pushes up.

Is there any way of controlling these cells so they dont move.

I hope you can help, ive tried for hours with this one.

- Jon

JavaScript Beginner at work :)
 
Sort by date Sort by votes
I just want the borders to stay the same as they originally where, if you delete the comments i have added on the page, the borders will resize to their original position. When i add more content the borders expand. I want to basically super glue them to the page regardless of the amount of content. Is it the span of the cell that is affecting the border height ?

JavaScript Beginner at work :)
 
Upvote 0 Downvote
Code: 
<html>
<head>
<title> Beacon Inn Pool Team </title>

<style type="text/css">

.marquee          { font-family: verdana; font-size: 12; color: red;}
td.font           { font-family: verdana; font-size: 10; color: green;}
td.image          { background-repeat:no-repeat}
h5.tdhead         { font-family: verdana;}
a.nav_links       { font-family: verdana; font-size: 10; color: green; text-decoration: none}
a.nav_links:hover { text-decoration: underline;} 		  
p                 { font-family: verdana; font-size: 10; color: green;}

</style>

<script language="javascript">

function draw_fixture(date, home, away) {
document.write("<tr align='center'>");

document.write("<td class='font' width='25%'>");
document.write(date);
document.write("</td>");

document.write("<td class='font' width='25%'>");
document.write(home);
document.write("</td>");

document.write("<td class='font' width='5%'>");
document.write("VZ");
document.write("</td>");

document.write("<td class='font' width='25%'>");
document.write(away);
document.write("</td>");

document.write("</tr>");
}
 
</script>
</head>

<body bgcolor="#eaffea">
<div align="center"> 				

<table width="700" height="500" border="1" bordercolor="gray" cellspacing="0" cellpadding="2" bgcolor="white">		<!-- *** Start Main Table *** -->

	<tr>
		<td class="image" width="450" height="125" valign="center" background="C:\Image1.jpg"> 
		&nbsp
		</td>
	
		
		<td class="font" width="250" rowspan="2" align="right" valign="top" background="C:\Image3.jpg" style="padding-bottom:0;">

		<h5 class="tdhead"> <u> Site Navigation </u> </h5>

		<a href="" name="home" class="nav_links" id="home"> 		Home </a> <br/>
		... <br/>
		<a href="" name="fixtures" class="nav_links" id="fixtures">	<strong> Fixtures </strong> </a> <br/>
		... <br/>
		<a href="" name="team_stats" class="nav_links" id="team_stats"> Team Stats </a> <br/>
		... <br/>
		<a href="" name="pictures" class="nav_links" id="pictures"> 	Pictures </a> <br/>
		
		</td>
	</tr>

	
	<tr>
		<td class="font" width="450" rowspan="2" valign="top" align="justify">
		<div align="center">
		<h5 class="tdhead"> <u> Fixtures </u> </h5>
		</div>
		
		The following fixtures for 10 weeks ...
		
		<br/>
		<br/>
		<br/>
		
		<table width="80%" border="0" cellspacing="0" cellpadding="1">

			<tr align="center">
				<td class="font" width="25%"> <strong> Date </strong> </td>
				<td class="font" width="25%"> <strong> Home Team </strong> </td>
				<td class="font" width="5%"> <strong> &nbsp </strong> </td>
				<td class="font" width="25%"> <strong> Away Team </strong> </td>
			</tr>
			
			<tr align="center">
				<td class="font" width="25%"> &nbsp </td>
				<td class="font" width="25%"> &nbsp </td>
				<td class="font" width="5%"> &nbsp </td>
				<td class="font" width="25%"> &nbsp </td>
			</tr>
	
			<script language="javascript">
				draw_fixture("Feb 15th", "Beacon Inn", "Toby A");
				draw_fixture("Feb 15th", "Beacon Inn", "Toby A");
				draw_fixture("Feb 15th", "Beacon Inn", "Toby A");
				draw_fixture("Feb 15th", "Beacon Inn", "Toby A");
				draw_fixture("Feb 15th", "Beacon Inn", "Toby A");
				draw_fixture("Feb 15th", "Beacon Inn", "Toby A");
				draw_fixture("Feb 15th", "Beacon Inn", "Toby A");
				draw_fixture("Feb 15th", "Beacon Inn", "Toby A");
				draw_fixture("Feb 15th", "Beacon Inn", "Toby A");
			</script>		

		</table>

		</td>
	</tr>

	<tr>	
		<td class="font" width="250" height="230" align="left" valign="top">
		<div align="center">
		<h5 class="tdhead"> <u> Hmmm </u> </h5>
		</div>
		</td>
	</tr>
	

	<tr>
		<td class="font" colspan="2" height="20">
		<div align="center">
		Jonathan Percy Design  .  Copyright 2005
		</div>
		</td>
	</tr>

</table>										<!-- *** End Main Table *** -->

</div>						

</body>
</html>

Here is original cell positions...

Try adding more data to the Navigation Cell and the Fixtures Cell and see what happens

JavaScript Beginner at work :)
 
Upvote 0 Downvote
I'm not sure if this is what you're looking for (I'm still a little confused :) ) but try adding this to your cell definition:

Code: 
<td style="height: [red]150[/red]px; width: 250px; overflow: auto;"></td>

This will force the cell to be 150px in height (change it if you want), 250 px in width, and if the content becomes too large, scrollbars will appear, rather than the cell resizing.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
as a side note, you should strongly consider adding a complete doctype. When you do, you'll get temporarily scared, because the look of your site will change. This is only because in your CSS you need to define units for font-size (px, em, etc.).

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Nope this does not seem to alter anything ...

Let me explain the problem again.

When i add more links to my navigation cell. The cell to the left (which contains my image) increases with height.

When i add more fixtures to the fixtures cell. The cell on the right (hmmm cell) increases with height.

I want to be able to add more links and more fixtures (without) the borders increasing in height.

Hope you understand

- Jon

JavaScript Beginner at work :)
 
Upvote 0 Downvote
you're not making any sense to me. if you're going to add more content, then more height will automatically be allotted, unless you set the style of [tt]overflow[/tt] to either [tt]scroll[/tt], [tt]auto[/tt] or [tt]hidden[/tt].

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
LOOK AT THE AMOUNT OF BLOODY SPACE FROM THE LAST LINK TO THE BOTTOM OF THE CELL !!!

JavaScript Beginner at work :)
 
Upvote 0 Downvote
I understand that the cells will increase once the given space is allocated. But its not, there is tonnes left of space to use but when i try to *use* it, it starts expanding other cells ......

JavaScript Beginner at work :)
 
Upvote 0 Downvote
cLFlaVA is right. You do not need tables. Your problem clearly indicates floated elements. They float next to each other but each has a height of its own.
 
Upvote 0 Downvote
Think of tables as a grid.
Each cell will be the width of the column it is in and the height of the row it is in.
Consequently if one cell in a row expands in height, then all the cells in that row will have the same height.

The span attribute allows us to range cells across a number of rows or columns. But all the time the cells must fit to the basic grid structure.

That is how they work, that is what they are for.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
771
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
694
PeDa
PeDa
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
149
CoolBreeze007
CoolBreeze007
LyndonOHRC
  • Locked
  • Question
Need advice with printing on check stock
Replies
5
Views
284
LyndonOHRC
LyndonOHRC

Part and Inventory Search

Sponsor

Back
Top