Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Jun 2003
    Posts
    4
    Member #
    1750
    I've tried and searched, and can't find a way to make a CSS layer stay within the confines of a table. I DON'T want it to be a certain % or pixels from the edge of the browser because of the nature of the site.

    Can anybody tell me how to anchor a CSS Layer to a table, image, or anything?

    Thanks in advance.

  2.  

  3. #2
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    I think it is this...
    Code:
    <html>
    <head>
    <style type="text/css">
    .layer1 {
    position: relative;
    top: 0px;
    left: 0px;
    }
    </style>
    <body>
    <table>
    <tr>
    <td>
    <layer class="layer1"></layer>
    </td>
    </tr>
    </table>
    </body>
    </html>
    JR

  4. #3
    Junior Member
    Join Date
    Jun 2003
    Posts
    4
    Member #
    1750
    Nevermind

    That won't quite work as I need it to snap to image, etc even when resized and for onmouseOvers, etc

    BUT I DO HAVE THE ANSWER!!!!

    I guess I didn't search well enough. Found this a few posts below mine:

    "Answered my own question. If anyone else needs a solution for this problem go to http://projectseven.com
    and download either Snap Layers or Layout Designer extension, both will work. "

    That's a great site for CSS Dreamweaver Extensions as well.

    Thanks

  5. #4
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    Here is something I threw together, just in case anybody needs it...

    Code:
    <html>
    <head>
    <style type="text/css">
    #div {
    	width: 100px;
    	height: 100px;
    	background-color: #0000ff;
    	z-index: 2;
    	position: absolute;
    	left: 300px;
    	top: 300px;
    	filter: alpha(opacity=50);
    }
    #image {
    	width: 100px;
    	height: 100px;
    	position: absolute;
    	left: 50%;
    	top: 10px;
    }
    </style>
    <script type="text/javascript">
    function movelayer() {
    	img = document.getElementById('image')
    	layer = document.getElementById('div')
    	posX = img.offsetLeft;
    	posY = img.offsetTop;
    	layer.style.left = posX;
    	layer.style.top = posY;
    }
    </script>
    </head>
    
    <body onLoad="movelayer()" onResize="movelayer()" onFocus="movelayer()">
    <div id="div"></div>
    <img id="image" src="someimage.gif">
    </body>
    </html>
    JR

  6. #5
    Junior Member
    Join Date
    Jun 2003
    Posts
    4
    Member #
    1750
    Nice - I wish I could just "throw together" stuff like that


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:11 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com