www.webdeveloper.com
Results 1 to 9 of 9

Thread: X/Y positioning within a table cell

  1. #1
    Join Date
    Aug 2011
    Location
    near Sacramento, CA
    Posts
    50

    X/Y positioning within a table cell

    This seems like it should be simple, but I haven't figured it out.

    I've got a page which has a background image and several pieces of information that must be positioned at precise places relative to the image.

    At present this is done by placing each piece of information in a <div> block with a different ID. Each ID is defined with "position: absolute" and appropriate "left" and "top" values.

    This works well, except that the image needs to be centered, and when I do that the pieces of text don't move. Furthermore, no adjustment to the "left" and "top" values will work because the background image moves when the window is resized, and the text does not.

    I want to put the text in a one-cell table, apply the background image to the cell, and set the text positions relative to the cell. Then the table can float anywhere it wants to, and all of the text should move with it.

    But I can't figure out a way to make that happen. The description of the "position" property appears to say that it positions an element relative to the most local containing element that is positioned. That's self-defeating -- if I position a containing element (e.g., the table) I can't center it, and if I don't, I can't position the text. I've tried many combinations of "position" settings on the table and the text, without results.

    Does anyone know the magic formula?

  2. #2
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    273
    if I position a containing element (e.g., the table) I can't center it
    If the containing element has a fixed width: Yes, you can! Try this:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    td { 
    	width: 100px;
    	height: 100px;
    	border: 1px solid black;
    	vertical-align: center;
    	text-align: center;
    	}
    #table-1 { 
    	position: relative;
    	margin: auto;
    	}
    #table-2 { 
    	position: absolute;
    	left: 50&#37;;
    	margin-left: -50px; /* half its width, in this case the cell width */
    	}
    </style>
    </head>
    <body>
    
    	<table id="table-1" summary="">
    		<tr>
    			<td>Test</td>
    		</tr>
    	</table>
    	
    	<table id="table-2" summary="">
    		<tr>
    			<td>Test</td>
    		</tr>
    	</table>
    
    </body>
    </html>
    The centering may need a bit of fine-tuning, as you can see if you have the code rendered. But all elements inside the cell can be positioned relative to it, with position:absolute. That is always relative to the containing element if that element has position.
    Last edited by Frank62; 08-04-2011 at 01:33 PM.

  3. #3
    Join Date
    Aug 2011
    Location
    near Sacramento, CA
    Posts
    50
    Thank you for trying to help out, Frank62. I don't understand everything in your reply, but I think you misunderstood my question.

    I modified your example to make it do what I want, and it positions text relative to the page, not the cell, just as it did in my own code.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    table { 
    	position: absolute;
    	left: 50%;
    	margin-left: -50px; /* half its width */
    	width: 3in;
    	height: 2in;
    	border: 0;
    }
    td { 
    	border: 1px solid black;
    	vertical-align: center;
    	text-align: center;
    }
    #one {
       position: absolute;
       left:0.500in;
       top:0.200in;
       height:0.200in;
       width:1.00in;
    }
    #two {
       position: absolute;
       left:0.500in;
       top:0.400in;
       height:0.200in;
       width:1.00in;
    }
    #three {
       position: absolute;
       left:0.500in;
       top:0.600in;
       height:0.200in;
       width:1.00in;
    }
    #four {
       position: absolute;
       left:0.500in;
       top:0.800in;
       height:0.200in;
       width:1.00in;
    }
    </style>
    </head>
    <body>
       <table>
          <tr>
             <td>
                <div id="one">ONE</div>
                <div id="two">TWO</div>
                <div id="three">THREE</div>
                <div id="four">FOUR</div>
             </td>
          </tr>
       </table>
    </body>

  4. #4
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    273
    it positions text relative to the page, not the cell
    I don't understand how you can say that. It is clear that the divs position themselves relative to the table (cell), not to the page. Just give the table cell and divs a background color, convert inches to pixels (1in ~ 100px), and see for yourself. If the divs would be positioned relative to the page with this code, they would be at some 50px from the browser's left border. In reality, they are at some 50px from the tables left border.

  5. #5
    Join Date
    Aug 2011
    Location
    near Sacramento, CA
    Posts
    50
    I said that because I observed it. When I displayed the page in Firefox 3.0, it showed the text at the left and the box in the middle. I made the window narrower and the box moved while the text remained where it was. You can see how it looked at http://jhsachs.com/forums/post1166934wide.png and http://jhsachs.com/forums/post1166934narrow.png.

    Then I tried the same thing in IE 8, the text appeared in the box, in a fixed position relative to the box.

    So it appears that your code does work, but not in all browsers.

    By the way, I bit the bullet and redid the page without using absolute positions, so this is no longer an urgent problem. I'd still like to resolve it for future reference, though.

  6. #6
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    273
    Wow! Now I do understand how you can say that. That's amazing! Especially because I tested it in IE 6, 7 and 8 and FF 4, and all rendered the divs inside the table! You've discovered something very important! Could you check how matters render in FF 3.5? That can be easily done through http://spoon.net/browsers/.

  7. #7
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    273
    I found the answer: the table must get a display:block. Only then will FF position relative to it. Try this:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Demo 3</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .container { 
    	width: 100px;
    	height: 100px;
    	margin: auto;
    	background: yellow;
    	position: relative;
    	display: block;
    	}
    .innerDiv { 
    	width: 10px;
    	height: 10px;
    	background: blue;
    	position: absolute;
    	top: 10px;
    	left: 10px;
    	}
    </style>
    </head>
    <body>
    <div class="container">
    	<div class="innerDiv"></div>
    </div>
    <br />
    <br />
    <table class="container" summary="">
    	<tr>
    		<td>
    			<div class="innerDiv"></div>
    		</td>
    	</tr>
    </table>
    </body>
    </html>
    Remove the display:block and see that FF will only position the blue square inside the big yellow for the div-in-div, not the div-in-table. (You had me scared there, because I am using the relative-absolute positioning frequently nowadays, and I thought that it was a FF glitch in the older versions, which are still used quite a lot....)
    Last edited by Frank62; 08-05-2011 at 08:55 PM.

  8. #8
    Join Date
    Aug 2011
    Location
    near Sacramento, CA
    Posts
    50
    Yes, that does it. Thanks for helping me solve this problem.

    I tried my code in spoon.net (a good resource, by the way, and thank you for suggesting it). It works in FF3.5 the same way it works in FF3.0.

    I experimented with the display property, but I didn't hit on the display:block value. I'm again amazed by how convoluted HTML and CSS are, and how tricky the various combinations of techniques and browsers can be.

  9. #9
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    273
    Tricky it is.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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



Recent Articles