Layer position

alcool9999

05-27-2010, 07:18 PM

Hi, is it possible for a css layer to be positioned over a html table because my layers seem to just sit around it and wont move.

Thanks

effpeetee

05-28-2010, 01:55 PM

We really need to see your code. It is not possible to help you with so little information.

Frank

alcool9999

05-29-2010, 12:04 PM

hi i have a horizontal drop down menu and then a few other layers. They are not all visible at the same time normally but ive got rid of the javascript just so its easier to see. Now i can't get any of the layers to move for some reason. I think the problem lies with the nfb layer but im not sure. i want everyhing to stay as it is but i want the two layers on the left (nfb, rowclickui) to be in the center of the page.

<html>
<head>
</head>
<body>
<style type="text/css">
#background {position:absolute; left:0;top:0; z-Index:-1;height:"1500";width:"1500";background-color:"#CCCCCC"}
#menu {position:relative; left:-5;top:1; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:visible;cursor:hand;background-color:#CCCCCC;height:24;width:40;}
#menu2 {position:relative; left:3;top:1; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:visible;background-color:#999999;height:30;width:90;border-style:solid;border-width:1px;height:24;width:81;cursor:hand}
#menu4 {position:relative; left:3;top:1; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:visible;background-color:#999999;height:30;width:90;border-style:solid;border-width:1px;height:"24";width:81;cursor:hand}
#menu3 {position:relative; left:85;top:-47; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:visible;background-color:#999999;height:30;width:90;border-style:solid;border-width:1px;height:"24";width:81;cursor:hand}
#modify {position:relative; left:36;top:-95; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:visible;cursor:hand;background-color:#CCCCCC;height:24;width:66;}
#queery {position:relative; left:42;top:-95; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:visible;background-color:#999999;height:30;width:90;border-style:solid;border-width:1px;height:"24";width:81;cursor:hand}
#queery2 {position:relative; left:42;top:-95; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:visible;background-color:#999999;height:30;width:90;border-style:solid;border-width:1px;height:"24";width:81;cursor:hand}
#queery3 {position:relative; left:115;top:-341; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:visible;background-color:#999999;height:30;width:90;border-style:solid;border-width:1px;height:"24";width:81;cursor:hand}
#queery4 {position:relative; left:196;top:-413; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:visible;background-color:#999999;height:30;width:90;border-style:solid;border-width:1px;height="24";width:81;cursor:hand}
#nfb {position;absolute; left:200; top:200; height:150; width:300; z-Index:2; border-style:outset; border-width:5px; font-family:arial; font-size:15px; color:black; background-color:#CCCCCC; visibility:visible;}
#bank2 {position:relative;left:42;top:-246;z-Index:1;font-family:arial; font-size:18px; color:black; visibility:visible;background-color:#999999;height:30;width:90;border-style:solid;border-width:1px;height:"24";width:81;cursor:hand}
#bank3 {position:relative;left:115;top:-341;z-Index:1;font-family:arial; font-size:18px; color:black; visibility:visible;background-color:#999999;height:30;width:90;border-style:solid;border-width:1px;height:"24";width:81;cursor:hand}
#filebank {position:relative;left:85;top:-269; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:visible;background-color:#999999;height:30;width:90;border-style:solid;border-width:1px;height:"24";width:81;cursor:hand}
#remove {position:relative; left:105;top:-341; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:visible;cursor:hand;background-color:#CCCCCC;height:24;width:76;}
#tools {position:relative; left:184;top:-412; z-Index:0;font-family:arial; font-size:18px; color:black; visibility:visible;cursor:hand;background-color:#CCCCCC;height:24;width:54;}
#search {position:relative; left:196;top:-413; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:visible;background-color:#999999;height:30;width:90;border-style:solid;border-width:1px;height:"24";width:81;cursor:hand}
#workspace {position:absolute; left:100;top:100; z-Index:-1;height:"1200";width:"800";background-color:"white";cursor:hand;visibility:visible;color:#CCCCCC;}
#workspace2 {position:absolute; left:100;top:100; z-Index:-1;height:"1200";width:"800";background-color:"white";cursor:hand;visibility:visible;color:#CCCCCC;}
#workspace3 {position:absolute; left:100;top:100; z-Index:-1;height:"1200";width:"800";background-color:"white";cursor:hand;visibility:visible;color:#CCCCCC;}
#workspace4 {position:absolute; left:100;top:100; z-Index:-1;height:"1200";width:"800";background-color:"white";cursor:hand;visibility:visible;color:#CCCCCC;}
#all {position:relative; left:278;top:-461; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:visible;background-color:#999999;height:30;width:90;border-style:solid;border-width:1px;height:"24";width:81;cursor:hand}
#bank4 {position:relative; left:278;top:-461; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:visible;background-color:#999999;height:30;width:90;border-style:solid;border-width:1px;height:"24";width:81;cursor:hand}
#all2 {position:relative; left:278;top:-485; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:visible;background-color:#999999;height:30;width:90;border-style:solid;border-width:1px;height:"24";width:81;cursor:hand}
#bank5 {position:relative; left:278;top:-485; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:visible;background-color:#999999;height:30;width:90;border-style:solid;border-width:1px;height:"24";width:81;cursor:hand}
#options {position:relative; left:244;top:-580; z-Index:0;font-family:arial; font-size:18px; color:black; visibility:visible;cursor:hand;background-color:#CCCCCC;height:24;width:74;}
#general {position:relative; left:258;top:-581; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:visible;background-color:#999999;height:30;width:90;border-style:solid;border-width:1px;height:"24";width:81;cursor:hand}
#help {position:relative; left:320;top:-628; z-Index:0;font-family:arial; font-size:18px; color:black; visibility:visible;cursor:hand;background-color:#CCCCCC;height:24;width:54;}
#about {position:relative; left:339;top:-629; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:visible;background-color:#999999;height:30;width:90;border-style:solid;border-width:1px;height:"24";width:81;cursor:hand}
#bankbut1 {position:absolute; left:460;top:50;z-index:1;font-family:arial;font-size:21px;color:blue;visibility:visible;background-color:yellow;height:26;width:50;cursor:hand;border-style:solid;border-width:2px;}
#bankbut2 {position:absolute; left:530;top:50;z-index:1;font-family:arial;font-size:21px;color:blue;visibility:visible;background-color:yellow;height:26;width:50;cursor:hand;border-style:solid;border-width:2px;}
#bankbut3 {position:absolute; left:600;top:50;z-index:1;font-family:arial;font-size:21px;color:blue;visibility:visible;background-color:yellow;height:26;width:50;cursor:hand;border-style:solid;border-width:2px;}
#bankbut4 {position:absolute; left:670;top:50;z-index:1;font-family:arial;font-size:21px;color:blue;visibility:visible;background-color:yellow;height:26;width:50;cursor:hand;border-style:solid;border-width:2px;}
#rowclickui {position;absolute; left:0; top:0; height:30; width:180; z-Index:2; border-style:outset; border-width:5px; font-family:arial; font-size:15px; color:black; background-color:#CCCCCC; visibility:visible;}
#save {position:absolute;left:13;top:88; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:visible;background-color:#999999;height:30;width:90;border-style:solid;border-width:1px;height="24";width:81;cursor:hand}
</style>
<div ID="menu">
<center>File</center>
</div>
<div ID="menu2">
New*****→
</div>
<div ID="menu4">
Open
</div>
<div ID="background">
</div>
<div ID="menu3">
Bank
</div>
<div ID="modify">
<center>Modify</center>
</div>
<div ID="queery">
Queery
</div>
<div ID="nfb">
<br />
 Name: <input type="text" name="nme" value="">
<br />
<input type="checkbox" name="swbanks" checked="true"> Start with banks
<br />
 Number: <input type="text" name="nob" value="">
<br />
<br />
   <input type="button" value="Cancel" name="cancel">  <input type="button" value="Create" name="create">
</div>
<div ID="bank2">
Bank
</div>
<div ID="filebank">
Filebank
</div>
<div ID="remove">
<center>Remove</center>
</div>
<div ID="bank3">
Bank
</div>
<div ID="queery3">
Queery
</div>
<div ID="tools">
<center>Tools</center>
</div>
<div ID="queery4">
Queery→
</div>
<div ID="Search">
Search→
</div>
<div id="all">
All
</div>
<div id="bank4">
Bank
</div>
<div id="all2">
All
</div>
<div id="bank5">
Bank
</div>
<div id="options">
<center>Options</center>
</div>
<div id="general">
General
</div>
<div id="help">
<center>Help</center>
</div>
<div id="about">
About
</div>
<div id="bankbut1">
Bank1
</div>
<div id="bankbut2">
Bank2
</div>
<div id="bankbut3">
Bank3
</div>
<div id="bankbut4">
Bank4
</div>
<div id="save">
Save
</div>
<div id="rowclickui">
<input type="button" name="open" value="Open" align="left">
<input type="button" name="edit" value="Edit" align="center">
<input type="button" name="remove" value="Remove" align="right">
</div>
</body>
</html>

Thanks

effpeetee

05-29-2010, 12:07 PM

CSS should be in the <head> section, not the <body>

Frank

alcool9999

05-29-2010, 12:15 PM

Ok thanks ive moved it but i still cant get the layers to move.

thanks

effpeetee

05-29-2010, 01:53 PM

This is from the W3 CSS validator. (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fexitfegs.co.uk%2F29_5.html&profile=css21&usermedium=all&warning=1&lang=en)

Frank

you cannot declare a width, height etc without the units in CSS,

height:24; is not acceptable.

height:24px; or height:24%; or height:5ems; is.

alcool9999

05-29-2010, 01:58 PM

ok ive just done that actually. i actually re wrote all the css is it ok now?

#background {position:absolute;
left:0;top:0;
z-Index:-1;
height:1500px;
width:1500px;
background-color:#CCCCCC;}

#menu {position:relative;
left:-5;top:1;
z-index:1;
font-family:arial;
font-size:18px;
font-color:black;
visibility:visible;
cursor:hand;
height:24px;
width:40px;
background-color:#CCCCCC;}

#menu2 {position:relative;
left:3;top:1;
z-index:1;
font-family:arial;
font-size:18px;
font-color:black;
visibility:hidden;
background-color:#999999;
height:24px;
width:81px;
border-style:solid;
border-width:1px;
cursor:hand;}

#menu4 {position:relative;
left:3;top:1;
z-index:1;
font-family:arial;
font-size:18px;
font-color:black;
visibility:hidden;
background-color:#999999;
height:24px;
width:81px;
border-style:solid;
border-width:1px;
cursor:hand;}

#menu3 {position:realtive;
left:85;top:-47;
z-index:1;
font-family:arial;
font-size:18px;
font-color:black;
visibility:hidden;
background-color:#999999;
border-style:solid;
border-width:1px;
height:24px;
width:81px;
cursor:hand;}

#modify {position:relative;
left:36;top:-95;
z-index:1;
font-family:arial;
font-size;18px;
font-color:black;
visibility:visible;
cursor:hand;
background-color:#CCCCCC;
height:24px;
width:66px;}

#queery {position:realtive;
left:42;top:-95;
z-index:1;
font-family:arial;
font-size:18px;
font-color:black;
visibility:hidden;
background-color:#999999;
border-style:solid;
border-width:1px;
height:24px;
width:81px;
cursor:hand;}

#queery2 {position:realtive;
left:42;top:-95;
z-index:1;
font-family:arial;
font-size:18px;
font-color:black;
visibility:hidden;
background-color:#999999;
border-style:solid;
border-width:1px;
height:24px;
width:81px;
cursor:hand;}

#queery3 {position:realtive;
left:115;top:-341;
z-index:1;
font-family:arial;
font-size:18px;
font-color:black;
visibility:hidden;
background-color:#999999;
border-style:solid;
border-width:1px;
height:24px;
width:81px;
cursor:hand;}

#queery4 {position:realtive;
left:196;top:-413;
z-index:1;
font-family:arial;
font-size:18px;
font-color:black;
visibility:hidden;
background-color:#999999;
border-style:solid;
border-width:1px;
height:24px;
width:81px;
cursor:hand;}

#nfb {position:absolute;
left:300;top:300;
z-Index:0;
height:150px;
width:300px;
background-color:#CCCCCC;}

#bank2 {position:realtive;
left:42;top:-246;
z-index:1;
font-family:arial;
font-size:18px;
font-color:black;
visibility:hidden;
background-color:#999999;
border-style:solid;
border-width:1px;
height:24px;
width:81px;
cursor:hand;}

#bank3 {position:realtive;
left:115;top:-341;
z-index:1;
font-family:arial;
font-size:18px;
font-color:black;
visibility:hidden;
background-color:#999999;
border-style:solid;
border-width:1px;
height:24px;
width:81px;
cursor:hand;}

#filebank {position:relative;
left:85;top:-269;
z-index:1;
font-family:arial;
font-size:18px;
font-color:black;
visibility:hidden;
background-color:#999999;
border-style:solid;
border-width:1px;
height:24px;
width:81px;
cursor:hand;}

#remove {position:relative;
left:105;top:-341;
z-index:1;
font-family:arial;
font-size:18px;
font-color:black;
visibility:visible;
cursor:hand;
background-color:#CCCCCC;
height:24px;
width:76px;}

#tools {position:relative;
left:184;top:-412;
z-index:0;
font-family:arial;
font-size:18px;
font-color:black;
visibility:visible;
cursor:hand;
background-color:#CCCCCC;
height:24px;
width:54px;}

#search {position:realtive;
left:196;top:-413;
z-index:1;
font-family:arial;
font-size:18px;
font-color:black;
visibility:hidden;
background-color:#999999;
border-style:solid;
border-width:1px;
height:24px;
width:81px;
cursor:hand;}

#workspace {position:absolute;
left:100;top:100;
z-index:-1;
height:1200px;
width:800px;
background-color:white;
cursor:hand;
visibility:hidden;
font-family:arial;
font-color:#CCCCCC;}

#workspace2 {position:absolute;
left:100;top:100;
z-index:-1;
height:1200px;
width:800px;
background-color:white;
cursor:hand;
visibility:hidden;
font-family:arial;
font-color:#CCCCCC;}

#workspace3 {position:absolute;
left:100;top:100;
z-index:-1;
height:1200px;
width:800px;
background-color:white;
cursor:hand;
visibility:hidden;
font-family:arial;
font-color:#CCCCCC;}

#workspace4 {position:absolute;
left:100;top:100;
z-index:-1;
height:1200px;
width:800px;
background-color:white;
cursor:hand;
visibility:hidden;
font-family:arial;
font-color:#CCCCCC;}

#all {position:relative;
left:278;top:-461;
z-index:1;
font-family:arial;
font-size:18px;
font-color:black;
visibility:hidden;
background-color:#999999;
height:34px;
width:81px;
border-style:solid;
border-width:1px;
cursor:hand;}

#all2 {position:relative;
left:278;top:-485;
z-index:1;
font-family:arial;
font-size:18px;
font-color:black;
visibility:hidden;
background-color:#999999;
height:34px;
width:81px;
border-style:solid;
border-width:1px;
cursor:hand;}

#bank4 {position:realtive;
left:278;top:-461;
z-index:1;
font-family:arial;
font-size:18px;
font-color:black;
visibility:hidden;
background-color:#999999;
border-style:solid;
border-width:1px;
height:24px;
width:81px;
cursor:hand;}

#bank5 {position:realtive;
left:278;top:-485;
z-index:1;
font-family:arial;
font-size:18px;
font-color:black;
visibility:hidden;
background-color:#999999;
border-style:solid;
border-width:1px;
height:24px;
width:81px;
cursor:hand;}

#options {position:relative;
left:244;top:-580;
z-index:0;
font-family:arial;
font-size:18px;
font-color:black;
visibility:visible;
cursor:hand;
background-color:#CCCCCC;
height:24px;
width:74px;}

#general {position:relative;
left;258;top:-581;
z-index:1;
font-family:arial;
font-size:18px;
font-color:black;
visibility:hidden;
background-color:#999999;
border-style:solid;
border-width:1px;
height:24px;
width:81px;
cursor:hand;}

#help {position:relative;
left:320;top:-628;
z-index:0;
font-family:arial;
font-size:18px;
font-color:black;
visibility:visible;
cursor:hand;
background-color:#CCCCCC;
height:24px;
width:54px;}

#about {position:realtive;
left:339;top:-629;
z-index:1;
font-family:arial;
font-size:18px;
font-color:black;
visibility:hidden;
background-color:#999999;
border-style:solid;
border-width:1px;
height:24px;
width:81px;
cursor:hand;}

#bankbut1 {position:absolute;
left:460;top:50;
z-index:1;
font-family:arial;
font-size:21px;
font-color:blue;
visibility:hidden;
background-color:yellow;
height:26px;
width:50px;
border-style:solid;
border-width:2px;
cursor:hand;}

#bankbut2 {position:absolute;
left:530;top:50;
z-index:1;
font-family:arial;
font-size:21px;
font-color:blue;
visibility:hidden;
background-color:yellow;
height:26px;
width:50px;
border-style:solid;
border-width:2px;
cursor:hand;}

#bankbut3 {position:absolute;
left:600;top:50;
z-index:1;
font-family:arial;
font-size:21px;
font-color:blue;
visibility:hidden;
background-color:yellow;
height:26px;
width:50px;
border-style:solid;
border-width:2px;
cursor:hand;}

#bankbut4 {position:absolute;
left:670;top:50;
z-index:1;
font-family:arial;
font-size:21px;
font-color:blue;
visibility:hidden;
background-color:yellow;
height:26px;
width:50px;
border-style:solid;
border-width:2px;
cursor:hand;}

#rowclickui {position:absolute;
left:350;top:350;
height:30px;
width:180px;
z-index:2;
border-style:outset;
border-width:5px;
font-family:arial;
font-size:15px;
font-color:black;
background-color:#CCCCCC;
visibility:hidden;}

#save {position:absolute;
left:13;top:88;
z-index:1;
font-family:arial;
font-size:18px;
font-color:black;
visibility:hidden;
background-color:#999999;
border-style:solid;
border-width:1px;
height:24px;
width:81px;
cursor:hand;}

thanks

effpeetee

05-29-2010, 02:15 PM

There were a few error, semi-colons instead of colons.

This should be OK now. (http://exitfegs.co.uk/29_5.html) validatorwise.

I put a doctype in. You may want to use a different one, but you must use one for consistent results

Frank

effpeetee

05-29-2010, 02:18 PM

alcool9999

05-29-2010, 02:19 PM

For some reason all the positions are messed up but ill just re align them. Thanks for all your help.

effpeetee

05-29-2010, 02:22 PM

For some reason all the positions are messed up but ill just re align them. Thanks for all your help.
The mixed up colons/semicolons may have caused that.

Frank

alcool9999

05-29-2010, 02:40 PM

Even on your link it is but im nearly finished now. thanks