Results 1 to 5 of 5

Thread: Tying location of dev layer to a table

  1. #1
    Join Date
    Jun 2006

    Question Tying location of div layer to a table

    I have a table:

    HTML Code:
    <table border="0" cellspacing="0" cellpadding="0" bgcolor="#CCFF66">
                <td><img src="cars/1_bmw_sedan_1.gif" width="56" height="69"></td>
                <td><img src="cars/2_bmw_sedan_2door_1.gif" width="100" height="69"></td>
                <td><img src="cars/3_bmw_sedan_1.gif" width="44" height="69"></td>
    and I have two identical layers:
    HTML Code:
    <div id="Layer2" style="position:absolute; left:406px; top:145px; width:32; height:32; z-index:3"><img src="tyres/tire_01_1.gif" width="32" height="32"></div>
    I would like to be able to have the layers float directly over the table, and always have the location relative to the table., i.e no matter where the table is located on the page, the layers floating over it will always be in the same place relative to the table. The table is located within some text, so the location of the table will be often dubious.

    Additionally I will have multiple instances of this table, and the associate layers, on the page, (so each table and layer will be unique, i.e. unique id's)

    Any help would be appreciated.
    Last edited by SirMildred; 06-08-2006 at 08:21 AM.

  2. #2
    Join Date
    Jun 2006

  3. #3
    Join Date
    Jun 2006
    Bump! again!

  4. #4
    Join Date
    Jun 2005
    United Kingdom
    Could be that no one here would do what you are trying to do - in which case there is not much point bumping a thread.

    Personally, I use tables for tabular data only, and for the rest lay out in CSS - and I don't use layers because I am not sure I can create accessible web pages with them.

    Not very helpful for you, so I have not answered in the past.

  5. #5
    Join Date
    Dec 2005
    American, living in Toronto, ON. CANADA
    Some of use eat, sleep, -work... and come here inbetween. And now, it's the weekend. -Can't jump on every new question always but I do understand the impatience. Been there myself.

    Question: Why not use a container DIV that is "position:relative;" and have your three images inside of that (instead of TABLE and TDs), and then put your two smaller DIV "position:absolute;" inside of the first DIV? The two 'always on-top and perfectly-always positioned' smaller DIVs being 'absolute' are out of the document-flow and won't push other things around, and will atay attached to the DIV beneith... This will work, and be better than TABLE markup.

    I think using your example, I'll give it a try...

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    <title> New Document </title>
     <meta name="Generator" content="" />
     <meta name="Author" content="" />
     <meta name="Keywords" content="" />
     <meta name="Description" content="" />
    <style type="text/css">
    body, html   {margin:0; padding:0; border:0;} /* Re-sets IE to "zero" for these values */
    img	{border:1px solid black;}
    #pos1	{}/*your styles for pos1*/
    #pos2	{}/*your styles for pos2*/
    #pos1 img, #pos2 img	{border:3px double red;}/*red border on absolute-positioned images*/
    <!-- next replaces old, outdated TABLE markup with CSS -->
    <div title="This is the base DIV that contains three images" style="position:relative; left:150px; top:50px; width:105px; height:auto; border:2px dashed gray; padding:5px; background-color:#ececec">
     <img alt="pic 1" src="cars/1_bmw_sedan_1.gif" style="width:56px; height:69px; float:left; clear:left;" />
     <img alt="pic 2" src="cars/2_bmw_sedan_2door_1.gif"style="width:100px; height:69px; float:left; clear:left;" />
     <img alt="pic 3" src="cars/3_bmw_sedan_1.gif"style="width:44px; height:69px; float:left; clear:left;" />
    <!-- next: DIVs with images that are 'attached' to above DIV -->
    <div id="pos1" style="position:absolute; left:130px; top:45px; width:32; height:32; z-index:3"><img alt="tire_01_image" src="tyres/tire_01_1.gif" width="32" height="32"></div>
    <div id="pos2" style="position:absolute; left:-56px; top:125px; width:32; height:32; z-index:3"><img alt="tire_01_1_image" src="tyres/tire_01_1.gif" width="32" height="32"></div>
    Something like this?
    Last edited by WebJoel; 07-16-2006 at 09:16 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center