Scrolling tables problem

Question

Stewie 0 Light Poster

17 Years Ago

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

<!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>

and here is my css

/* 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;
}

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

any help would be great.

Thanks

web-design

2 Contributors
3 Replies
106 Views
1 Day Discussion Span
Latest Post 17 Years Ago Latest Post by Stewie

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Stewie 0 Light Poster · Answer 1 · 2006-05-25T03:10:10+00:00

I got it fixed now using <div>'s does anyone know of another way to do this with out using <divs>'s? Thanks

havilah 0 Newbie Poster · Answer 2 · 2006-05-25T14:32:44+00:00

Please can I see the entire code of how u fixed it?

Stewie 0 Light Poster · Answer 3 · 2006-05-25T20:29:41+00:00

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

<!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>
			
    <div id="header"><img src="Images/top3.jpg"></div>
       	
    <div id="nav"> <cfinclude template="navigation.cfm"> </div>
    	   	
    <div 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>
    </div>
   	    
    <div id="right" valign="top">and here is extra, maybe an ad or something</div>

</body>
</html>

and here is my css

/* CSS Document */
body 
{
	background-color: #000000;
	font-family:arial, verdana, sans-serif;
}
#navbar
{
	height:2;
	background-color: #666666;
	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;
}