HTML and CSS RSS HTML and CSS RSS

Scrolling tables problem

Reply

•
•
Join Date: Apr 2006
Posts: 30
Reputation: Stewie is an unknown quantity at this point 
Solved Threads: 0
Stewie Stewie is offline Offline
Light Poster

Scrolling tables problem

 
0
  #1
May 24th, 2006
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2006
Posts: 30
Reputation: Stewie is an unknown quantity at this point 
Solved Threads: 0
Stewie Stewie is offline Offline
Light Poster

Re: Scrolling tables problem

 
0
  #2
May 24th, 2006
I got it fixed now using <div>'s does anyone know of another way to do this with out using <divs>'s? Thanks
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2006
Posts: 20
Reputation: havilah is an unknown quantity at this point 
Solved Threads: 0
havilah's Avatar
havilah havilah is offline Offline
Newbie Poster

Re: Scrolling tables problem

 
0
  #3
May 25th, 2006
Please can I see the entire code of how u fixed it?
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2006
Posts: 30
Reputation: Stewie is an unknown quantity at this point 
Solved Threads: 0
Stewie Stewie is offline Offline
Light Poster

Re: Scrolling tables problem

 
0
  #4
May 25th, 2006
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. }
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC