|
-
Mar 19th, 2002, 01:41 AM
#1
Thread Starter
Fanatic Member
Layers and CSS
Does anyone have a most basic example of a layer using
1) the layer tag
2) CSS and positioning attributes
-
Mar 19th, 2002, 03:22 AM
#2
Fanatic Member
Code:
<font style="position: absolute; top: 10px; left: 10px">
bla bla bla
</font>
places the text 10 pixels from left and top of page.
hope this helps 
-
Mar 19th, 2002, 03:24 AM
#3
Fanatic Member
1 The example below shows one method of setting the position of a layer using CSS and the Class Tag.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>A Div Layer</title>
<style type="text/css">
<!--
#layer1 {position:absolute;
left:150px;
top:200px;
width:200px;
height:200px;
background:cyan;}
-->
</style>
</head>
<body>
<div id="layer1" class="layer">This is a layer</div>
</body>
</html>
2 This one is the same as above but uses style tag instead
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>A Div Layer</title>
</head>
<body>
<div id="layer1" style="position:absolute; left:150px; top:200px; width:200px; height:200px; background:cyan;">This is a layer</div>
</body>
</html>
3 This is a little bit more advanced. It uses DHTML (Javascript) to get and set the layer positions
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Get Layer Positions</title>
<script language="JavaScript" type="text/javascript">
// Set/Get Layer Positions by Lee M McCormick 2002
// http://www.dynamicallywebbed.com
<!--
function setNewPositions(){
if (findDom('left').value.length>0){
findDom('layer1').style.left = findDom('left').value;
}
if (findDom('width').value.length>0){
findDom('layer1').style.width = findDom('width').value;
}
if (findDom('top').value.length>0){
findDom('layer1').style.top = findDom('top').value;
}
if (findDom('height').value.length>0){
findDom('layer1').style.height = findDom('height').value;
}
}
function findleft(objectID){
domStyle = findDom(objectID); // find style of dom
if (domStyle.left){return domStyle.left;}
if (domStyle.pixelLeft){return domStyle.pixelLeft;}
if (domStyle.offsetLeft){return domStyle.offsetLeft;}
return 'null';
}
function findtop(objectID){
domStyle = findDom(objectID); // find style of dom
if (domStyle.top){return domStyle.top;}
if (domStyle.pixelTop){return domStyle.pixelTop;}
if (domStyle.offsetTop){return domStyle.offsetTop;}
return 'null';
}
function findwidth(objectID){
domStyle = findDom(objectID); // find style of dom
if (domStyle.offsetWidth){return domStyle.offsetWidth;}
if (domStyle.clip.width){return domStyle.clip.width;}
return 'null';
}
function findheight(objectID){
domStyle = findDom(objectID); // find style of dom
if (domStyle.offsetHeight){return domStyle.offsetHeight;}
if (domStyle.clip.height){return domStyle.clip.height;}
return 'null';
}
function findDom(objectid){
if (document.getElementById){
return document.getElementById(objectid);
}else if (document.all){
return document.all(objectid);
}
}
//-->
</script>
</head>
<body>
<div id="layer1" style="position:absolute; left:150px; top:200px; width:200px; height:200px; background:cyan;">This is a layer</div>
<input type="button" value="Get Left Position" onclick="alert(findleft('layer1'))">
<input type="button" value="Get Top Position" onclick="alert(findtop('layer1'))">
<input type="button" value="Get Width" onclick="alert(findwidth('layer1'))">
<input type="button" value="Get Height" onclick="alert(findheight('layer1'))"><br><bR>
<label style="background:cyan;">Set Left</label><input type="text" id="left"><br>
<label style="background:cyan;">Set Width</label><input type="text" id="width"><br>
<label style="background:cyan;">Set Top</label><input type="text" id="top"><br>
<label style="background:cyan;">Set Height</label><input type="text" id="height"><br>
<input type="button" value="Set New Position" onclick="setNewPositions()">
</body>
</html>
4 Or it I'm completely misunderstood and you want to actually position the <layer> tag then have a look herehttp://developer.netscape.com/docs/m...31.htm#1026297 but remember that the layer tag only works correctly in netscape.
-
Mar 19th, 2002, 03:33 AM
#4
-
Mar 19th, 2002, 04:25 AM
#5
-
Mar 20th, 2002, 03:41 AM
#6
Thread Starter
Fanatic Member
Thanks to all. The example is simple enough. I think I'll leave the layer tag alone since it only works in Netscape.
LOL. The layer tag is the first one I tried. Just a pitty I was using IE
-
Mar 20th, 2002, 08:19 PM
#7
Fanatic Member
-
Mar 21st, 2002, 12:53 AM
#8
The designers who work with IE generally use <DIV> instead of <LAYER>
betcha know that.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|
Reply With Quote
He He, yeah. I was never one to keep answers simple... Its a wonder I never get anything done 
if i had teeth strong enough i'd be eating it for breakfast 
