943,999 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Scrolling tables problem
Ad:
Permalink
May 24th, 2006
0

Scrolling tables problem

Expand Post »
I have a table with 4 sepearte <td>'s I would like one of them to scroll up and down when needed, so that the main page does not need to scroll.
Here is my HTML
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Rumors Bar and Grill</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<cfsetting showdebugoutput="no">
<body>
<table id="wrapper" cellspacing="0" cellpadding="0">
<tr>

<td id="header"><img src="Images/top3.jpg"></td>
</tr>

<tr>

<td id="nav"> <cfinclude template="navigation.cfm"> </td>
</tr>

<tr>

<td id="content" valign="top"> stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
</td>
</tr>

<tr>

<td id="right" valign="top">and here is extra, maybe an ad or something</td>
</tr>

</table>

</body>
</html>

[/html]

and here is my css
[html]
/* CSS Document */
body
{
background-color: #000000;
font-family:arial, verdana, sans-serif;
}

#header
{
position:absolute;
top:0px; left:25%;
width:50%
bacground-color:#f3f3f3;
height:60px
}

#nav
{
position:absolute;
left:0px; top:162px;
width:100px;
font-weight:bold;
background-color:gray;
border-style:dashed; border-width:1px;
padding:5px;
height:30em;
}

#right
{
position:absolute;
left:950px; top:162px;
font-weight:bold;
background-color:gray;
border-style:dashed; border-width:1px;
padding:5px;
width:100px;
height:30em;
}

#content
{
position:absolute;
left:120px; top:162px;
padding-top:5px;
background-color:gray;
border-style:dashed; border-width:1px;
width:820px;
height:30em;
overflow:auto;
}

a
{
font-family: arial, verdana, sans-serif;
font-size:12px;
font-weight:bold;
}
a:link
{
color:#ffffff;
text-decoration:none;
}

a:visited
{
color:#ffffff;
text-decoration:none;
}

a:active
{
color:#0033ff;
text-decoration:underline;
}

a:link:hover
{
background-color:B8B8B8;
text-decoration:underline;
}
[/html]

I tried it using <div> tags and that seemed to really mess up my entire layout.

any help would be great.

Thanks
Similar Threads
Reputation Points: 10
Solved Threads: 0
Light Poster
Stewie is offline Offline
30 posts
since Apr 2006
Permalink
May 24th, 2006
0

Re: Scrolling tables problem

I got it fixed now using <div>'s does anyone know of another way to do this with out using <divs>'s? Thanks
Reputation Points: 10
Solved Threads: 0
Light Poster
Stewie is offline Offline
30 posts
since Apr 2006
Permalink
May 25th, 2006
0

Re: Scrolling tables problem

Please can I see the entire code of how u fixed it?
Reputation Points: 10
Solved Threads: 0
Newbie Poster
havilah is offline Offline
20 posts
since May 2006
Permalink
May 25th, 2006
0

Re: Scrolling tables problem

here is my index page. all that I did was I got rid of the table, and replaced the <td>'s with <div>'s

HTML and CSS Syntax (Toggle Plain Text)
  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3. <html>
  4. <head>
  5. <title>Rumors Bar and Grill</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  7. <link rel="stylesheet" href="style.css" type="text/css">
  8. </head>
  9. <cfsetting showdebugoutput="no">
  10. <body>
  11.  
  12.     <div id="header"><img src="Images/top3.jpg"></div>
  13.  
  14.     <div id="nav"> <cfinclude template="navigation.cfm"> </div>
  15.  
  16.     <div id="content" valign="top"> stuff<br>
  17.       stuff<br>
  18.       stuff<br>
  19.       stuff<br>
  20.       stuff<br>
  21.       stuff<br>
  22.       stuff<br>
  23.       stuff<br>
  24.       stuff<br>
  25.       stuff<br>
  26.       stuff<br>
  27.       stuff<br>
  28.       stuff<br>
  29.       stuff<br>
  30.       stuff<br>
  31.       stuff<br>
  32.       stuff<br>
  33.       stuff<br>
  34.       stuff<br>
  35.       stuff<br>
  36.       stuff<br>
  37.       stuff<br>
  38.       stuff<br>
  39.       stuff<br>
  40.       stuff<br>
  41.       stuff<br>
  42.       stuff<br>
  43.       stuff<br>
  44.       stuff<br>
  45.       stuff<br>
  46.       stuff<br>
  47.       stuff<br>
  48.       stuff<br>
  49.       stuff<br>
  50.     </div>
  51.  
  52.     <div id="right" valign="top">and here is extra, maybe an ad or something</div>
  53.  
  54. </body>
  55. </html>

and here is my css

HTML and CSS Syntax (Toggle Plain Text)
  1. /* CSS Document */
  2. body 
  3. {
  4. 	background-color: #000000;
  5. 	font-family:arial, verdana, sans-serif;
  6. }
  7. #navbar
  8. {
  9. 	height:2;
  10. 	background-color: #666666;
  11. 	font-family: arial, verdana, sans-serif
  12. }
  13.  
  14. #header
  15. {
  16. 	position:absolute;
  17. 	top:0px; left:25%;
  18. 	width:50%
  19. 	bacground-color:#f3f3f3;
  20. 	height:60px
  21. }
  22.  
  23. #nav
  24. {
  25. 	position:absolute;
  26. 	left:0px; top:162px;
  27. 	width:100px;
  28. 	font-weight:bold;
  29. 	background-color:gray;
  30. 	border-style:dashed; border-width:1px;
  31. 	padding:5px;
  32. 	height:30em;
  33. 	}
  34.  
  35. #right
  36. {
  37. 	position:absolute;
  38. 	left:950px; top:162px;
  39. 	font-weight:bold;
  40. 	background-color:gray;
  41. 	border-style:dashed; border-width:1px;
  42. 	padding:5px;
  43. 	width:100px;
  44. 	height:30em;
  45. }
  46.  
  47. #content
  48. {
  49. 	position:absolute;
  50. 	left:120px; top:162px;
  51. 	padding-top:5px;
  52. 	background-color:gray;
  53. 	border-style:dashed; border-width:1px;
  54. 	width:820px;
  55. 	height:30em;
  56. 	overflow:auto;
  57. }
  58.  
  59. a 
  60. {
  61. 	font-family: arial, verdana, sans-serif;
  62. 	font-size:12px;
  63. 	font-weight:bold;
  64. }
  65. a:link
  66. {
  67. 	color:#ffffff;
  68. 	text-decoration:none;
  69. }
  70.  
  71. a:visited
  72. {
  73. 	color:#ffffff;
  74. 	text-decoration:none;
  75. }
  76.  
  77. a:active
  78. {
  79. 	color:#0033ff;
  80. 	text-decoration:underline;
  81. }
  82.  
  83. a:link:hover 
  84. {
  85. 	background-color:B8B8B8;
  86. 	text-decoration:underline;
  87. }
Reputation Points: 10
Solved Threads: 0
Light Poster
Stewie is offline Offline
30 posts
since Apr 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Frame detection possible?
Next Thread in HTML and CSS Forum Timeline: Image Swap help





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC