Scrolling issues with DD CSS Top Frame Layout [Archive]

View Full Version : Scrolling issues with DD CSS Top Frame Layout

tinkertron

01-25-2010, 07:43 AM

I took this CCS layout from the Dynamic Drive / CSS Frames Layouts / CSS Top Frame Layout page and had acouple of question:

When I removed the javascript code as shown below:

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

and add my php grid table (which is twice as long as the page itself) the scroll bars disappears and locks the main content, so I can't see my whole grid. Is there away so that the main content area will scroll up and down and left to right without affecting the header of the page? Please see my site to see what i'm talking about http://tdcj.homeip.net/test2.php ...

Your help is greatly appreciated!

simcomedia

01-25-2010, 03:45 PM

Show us your CSS code for the container of your table, and/or, the page code.

tinkertron

01-25-2010, 06:31 PM

OK

To see what i'm talking about goto:
http://tdcj.homeip.net/test2.php (http://tdcj.homeip.net/test2.php#)

But here's the code:


<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dallas I PRTU - InCustody Database</title>
<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}

#framecontent{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px; /*Height of frame div*/
overflow: fixed; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#maincontent{
position: fixed;
width: 100%;
top: 100px; /*Set top value to HeightOfFrameDiv*/
left: 0;
right: 0;
bottom: 0;
overflow: scroll;
background: #fff;
}

* html body{ /*IE6 hack*/
padding: 100px 0 0 0; /*Set value to (HeightOfFrameDiv 0 0 0)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}

</style>

<?php
include("include/phpgrid.php");
include("config/db_conf.php"); // Contains the db config that was in here!
?>

<?php
$dg = new C_DataGrid($hostName, $userName, $password, $dbName);

$dg -> set_gridpath ("include/");
$dg -> set_sql ("SELECT * FROM Grid_Employees");
$dg -> set_sql_table ("Grid_Employees");
$dg -> set_sql_key ("EmployeeId");
$dg -> set_theme("royal");
$dg -> display();
?>

</head>

<body>

<div id="framecontent">
<div class="innertube">

<h1>Dallas I PRTU - InCustody Database</h1>
<h5>Logout</h5>

</div>
</div>
</body>
</html>

I was able to get the screen to scroll late last night, but it scroll the header too. I just want the main content area (my grid) to scroll up and down, and left to right

simcomedia

01-25-2010, 11:38 PM

If your table header is part of the same element that displays your table data then it's going to scroll with everything else. You'd have to separate it from the grid to get it to stay.

For the scrollbars, here's the CSS choices:

* overflow: auto – This will create a scrollbar – horizontal, vertical or both only if the content in the block requires it. For practical web development, this is probably the most useful for creating a scrolling area.

* overflow: scroll – This will will insert horizontal and vertical scrollbars. They will become active only if the content requires it.

* overflow: visible – This will cause the block to expand to view the content.

* overflow: hidden – This forces the block to only show content that fits in the block. Other content will be clipped and not hidden with no scrollbars.

Try removing the overflow: hidden; from your body section.

tinkertron

01-26-2010, 05:39 AM

I was able to do that and just like you said the header also move with the content area also. I would have though that area would be able to remain static and not move with the content area. I could I have saw a simple like that before, but unable to find it right now, but I know i've seen it before. If I should find it I will report back.