CSS layers and database content

sssaudddahmed · #1 Jan 8th, 2006, 05:31

Hello all,

I have a webpage that displays a list of items from a database. I have a layer which will hold recordset content (contlayer) and a layer that will have a copyright bar (copylayer).

The problem is, if there is a large list of data the contlayer will expand over or under the copylayer. I dont want this to happen.

I want there to be a gap between the contlayer and the copylayer no matter how long the contlayer gets.

I know layers have an overflow function but i do not want to use that function.
Can anyone help me.

below is a diagram that might explain

1)
-------------
| ---------- |
| Cont layer |
| ---------- |
| -----------|
-------------
Gap
-------------
| Copylayer |
------------

2)
-------------
| --------- |
| Cont layer |
| ---------- |
| ------- -- |
| ---------- |
| ---------- |
| ---------- |
| ---------- |
| ------- -- |
| ---------- |
| ---------- |
| ---------- |
| ---------- |
| ------- -- |
------------
Gap
-------------
| Copylayer |
-------------

SweetLou · #2 Jan 8th, 2006, 08:21

Maybe I'm confused here, but why are you using layers? Wouldn't simple <div> be what you want? Just give the copyright div a

Code: Select all

padding-top:20px

or whatever you want.

herkalees · #3 Jan 8th, 2006, 16:20

Post your html and css code, we'll fix it.

sssaudddahmed · #4 Jan 9th, 2006, 01:53

thanks for the responses,

here is the CSS code for the page:

Code: Select all

body
    {
    margin: 0;
    padding: 0;
    }
#Logo
    {
    position:absolute;
    height:113px;
    width: 806px;
    z-index:10;
    margin-left: 16%;
    background-image:url(images/ghjghj_02.gif);
    background-repeat:;
    left: -10px;
    top: 0px;
    }
#Signlogoa
    {
    position:absolute;
    height:20px;
    width: 300px;
    z-index:3;
    margin-left: 10%;
    background-image:;
    background-repeat:no-repeat;
    left: 555px;
    top: 116px;
    }
#Search
    {
    position:absolute;
    height:20px;
    width: 300px;
    z-index:3;
    margin-left: 15%;
    background-image:;
    background-repeat:no-repeat;
    left:10px;
    top: 116px;
    }
#Nav
    {
    position:absolute;
    height:380px;
    width: 100px;
    z-index:0;
    margin-left: 16%;
    background-image:url(images/design_13.jpg);
    background-repeat:no-repeat;
    left: 5px;
    top: 144px;
    }
#Content
    {
    position:absolute;
    height:20px;
    width:467px;
    z-index:2;
    margin-left:16%;
    background-image:url(images/design_21+.jpg);
    background-repeat:no-repeat;
    left:111px;
    top:144px;    
    }
#Content1
    {
    position:absolute;
    height:50px;
    width:466px;
    z-index:1;
    margin-left:16%;
    background-image:url(images/design_21++.jpg);
    background-repeat:;
    left:-74px;
    top:20px;    
    }
#News
    {
    position:absolute;
    height:326px;
    width: 192px;
    z-index:1;
    margin-left: 10%;
    background-image:url(images/design_25.jpg);
    background-repeat:no-repeat;
    left: 648px;
    top:140px;
    }
#tour
    {
    position:absolute;
    height:90px;
    width: 192px;
    z-index:3;
    margin-left: 10%;
    background-image:url(images/design_20.jpg);
    background-repeat:no-repeat;
    left: 648px;
    top: 480px;
    }
#Ads1
     {
    position:absolute;
    height:240px;
    width: 100px;
    z-index:0;
    margin-left: 16%;
    background-image:url(images/design_13.jpg);
    background-repeat:no-repeat;
    left: 5px;
    top: 540px;
    }
#Ads2
    {
    position:absolute;
    height:198px;
    width: 192px;
    z-index:3;
    margin-left: 10%;
    background-image:url(images/design_25.jpg);
    background-repeat:no-repeat;
    left: 648px;
    top: 582px;
    }
#botbar /////this layer holds the copyright info
    {
    position:absolute;
    height:30px;
    width: 779px;
    z-index:3;
    margin-left: 16%;
    background-image:url(images/design_33.jpg);;
    background-repeat:;
    left: 5px;
    top: 800px;
    }

here is the html:

HTML: Select all

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="stylesearch.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
</head>

<body bgcolor="#000000">
<div id="Logo"></div>
<div id="Nav"></div>
<div id="Content">
  
  <div id="Content1">
    <table width="466" height="209" border="0">
      <tr>
        <th width="95" height="21" valign="top" scope="col"><div align="left"></div></th>
        <th width="80" scope="col"><div align="left"></div></th>
        <th width="84" scope="col"><div align="left"></div></th>
        <th width="89" scope="col"><div align="left"></div></th>
        <th width="96" scope="col"><div align="left"></div></th>
      </tr>
      <tr>
        <th rowspan="3" scope="col"><div align="left"></div>          <div align="left"></div>          <div align="left"><img src="http://www.webforumz.com/images/design_20.jpg" width="151"></div></th>
        <th scope="col"><div align="left"></div></th>
        <th scope="col"><div align="left"></div></th>
        <th scope="col"><div align="left"></div></th>
        <th scope="col"><div align="left"></div></th>
      </tr>
      <tr>
        <th height="21" scope="col"><div align="left"></div></th>
        <th scope="col"><div align="left"></div></th>
        <th scope="col"><div align="left"></div></th>
        <th scope="col"><div align="left"></div></th>
      </tr>
      <tr>
        <th height="21" scope="col"><div align="left"></div></th>
        <th scope="col"><div align="left"></div></th>
        <th scope="col"><div align="left"></div></th>
        <th scope="col"><div align="left"></div></th>
      </tr>
      <tr>
        <th height="21" scope="col"><div align="left"></div></th>
        <th scope="col"><div align="left"></div></th>
        <th scope="col"><div align="left"></div></th>
        <th scope="col"><div align="left"></div></th>
        <th scope="col"><div align="left"></div></th>
      </tr>
      <tr>
        <th height="21" scope="row"><div align="left"></div></th>
        <td><div align="left"></div></td>
        <td><div align="left"></div></td>
        <td><div align="left"></div></td>
        <td><div align="left"></div></td>
      </tr>
      <tr>
        <th height="21" scope="row"><div align="left"></div></th>
        <td><div align="left"></div></td>
        <td><div align="left"></div></td>
        <td><div align="left"></div></td>
        <td><div align="left"></div></td>
      </tr>
      <tr>
        <th height="21" scope="row"><div align="left"></div></th>
        <td><div align="left"></div></td>
        <td><div align="left"></div></td>
        <td><div align="left"></div></td>
        <td><div align="left"></div></td>
      </tr>
      <tr>
        <th scope="row"><div align="left"></div></th>
        <td><div align="left"></div></td>
        <td><div align="left"></div></td>
        <td><div align="left"></div></td>
        <td><div align="left"></div></td>
      </tr>
    </table>
    <p>&nbsp;</p>
  
  </div>
</div>
<div id="Search" class="style1">Content for id "SfgdHere</div>
<div id="News">Content for id "News" Goes Here</div>
<div id="tour">Content for id "tour" Goes Here</div>
<div id="Signlogoa" class="style1">Content for11111111 id "Signlogoa" Goes Here</div>
<div id="Ads1">Content for id "Ads1" Goes Here</div>
<div id="Ads2">Content for id "Ads2" Goes Here</div>
<div id="botbar">Content for id "botbar" Goes Here</div>

</body>
</html>

sorry for the excessiveness

Corey Bryant · #5 Jan 9th, 2006, 11:19

Your botbar - you are using absolute position on this as well as all the other layers. Using this - the layer will appear at from the left: 5px and from the top: 800px.

You should consider using relative and let the layer fall where the browser(s) place them. This should help you out somewhat and then as SweetLou recommended, add padding perhaps to the botbar and see if that might help you out.

sssaudddahmed · #6 Jan 10th, 2006, 03:31

i tried making making the botbar a relative layer and positioned it at the same place as the previous absolute botbar layer. The same problem is still occuring. I even added the padding both on the contlayer and botbar layer still nothing. Furthermore , i switched the Z-indexs on the both layers several times as well in case this was the problem but no solution was found.

is there a CSS function that does the following: if a layer horizontaly expands to a point where it contacts with a layer below it, the lower layer should move down as well. instead of the lower layer gettting overlapped be the expanding layer above.

anymore solutions

SweetLou · #7 Jan 13th, 2006, 08:45

Horizontally expand down? The way I said above will work, but you are using layers and absolute positioning, so no there isn't. If you don't want the div's to overlap, then why are you using layers?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Expandable Content Script (Swtich Content)	Matc	JavaScript Forum	0	Apr 8th, 2008 10:53
Content Placement + Content Dividing	josephman1988	Website Planning	2	Jan 22nd, 2008 05:02
XML Code for transfering data from one SQL Server Database to another database	plolla	Other Programming Languages	1	Aug 3rd, 2006 18:37
Layers	GCrame5832	Web Page Design	6	Dec 31st, 2005 21:42
Using layers in CSS	jwalker80	Web Page Design	3	Dec 21st, 2005 14:08

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS layers and database content