DIV placement in top left corner of table 1

ironhide1975 · Jan 23, 2007

I'm having the hardest time trying to get a DIV to accurately place on a page. I'm trying to use it to hide a section of the page so the user can't click a submit button once they show the DIV.

I've tried to create a div within a div to center it on the page, but because of the way the page is structured it draws the div at the time of when it's in the middle of the table. Thus it thinks the div is only as large at the table cell.

To make up for this, is there a way I can tell the DIV to be specially placed in the upper left hand corner of the table cell? And if so, can someone provide me an example of how to do this? I believe I need to reference one div with another??? Any help is appreciated.

monksnake · Jan 23, 2007

You can just hide the submit button once you show the div. Assuming you are showing this div with an event handler to call a javascript method to display the div, assign an id to the submit button and add

Code:

document.getElementById([i]submitbuttonId[/i]).style.display = "none"

ironhide1975 · Jan 23, 2007

Cool, but I still want to accurately place the DIV on top of a cell in a table. Is there a way to do this?

monksnake · Jan 23, 2007

I think I would need to see your code to know exactly what you are asking

ironhide1975 · Jan 23, 2007

First off thank you for your help.

Ok I have a generic table here. I basically want the DIV to overlap the entire table cell, but since the table may move around in the center of the page, dependant of the size of the user's screen I can't pinpoint the position of the DIV by pixels.

Now I tried inclosing the DIV in another DIV and have that centered in a table. The problem lies at the creation of the DIV where it has to be within another table, and the table cell automatically shrinks the DIV to 600 pixels even though it is set to float on top of everything else.

Here is the CSS file.

Code:

#Directory 
{
text-align: center;
position: absolute;
height: 250px;
width: 649px;
left: 250px;
top: 200px;
z-index: 0;
visibility: none; }

Here is an appoximation of the code.

Code:

<center>
<table width="600">
<tr>
<td width="600">
<div id="Directory" style='display: none;'>
  <table width="100%">
      <tr>
        <td align="center">
          <table bgcolor="white" width="600">
            <tr>
              <td align="center">Overlay here</td>
            </tr>
           </tr>
          </table>
        </td>
      </tr>
  </table>  
</div>

   <table>
     <tr>
      <td>Content to be overlayed here</td>
     </tr>
   </table>

   </td>
  </tr>
</table>
</center>

ironhide1975 · Jan 23, 2007

sorta also asked the question here

http://www.tek-tips.com/viewthread.cfm?qid=1318596&page=1

monksnake · Jan 23, 2007

I believe I have what you want, from your code you want the overlaying div to contain a table. set a background color on the overlaying div and set the z-index higher than 0. The following code shows the overlaying div covering up the content to be overlayed:

Code:

<style type="text/css">


#Directory {
text-align: center;
position: absolute;
height: 250px;
width: 649px;
left: 170px;
top: 10px;
z-index: 100;
background-color:#ffffff;
}

</style>
</head>


<body>
<center>
<div id="Directory">
  <table width="100%">
      <tr>
        <td align="center">
          <table bgcolor="white" width="600">
            <tr>
              <td align="center">Overlay here</td>
            </tr>
           </tr>
          </table>
        </td>
      </tr>
  </table>  
</div>


<table width="600">
   <tr>
      <td width="600">
         <table>
            <tr>
               <td>Content to be overlayed here</td>
            </tr>
         </table>

      </td>
   </tr>
</table>
</center>

</body>
</html>

You should be able to use this code to get what you want. Hope this helps.

ironhide1975 · Jan 23, 2007

I think I figured it out,
I was confused on how the position statement works. If I placed the div right after I place the <td> tag and give it 0 position, it covers the content in the cell fine (also set the content in the cell to a div and made it a negative z number.

Thank you again.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

DIV placement in top left corner of table 1

ironhide1975

Programmer

monksnake

Programmer

ironhide1975

Programmer

monksnake

Programmer

ironhide1975

Programmer

ironhide1975

Programmer

monksnake

Programmer

ironhide1975

Programmer

Similar threads

Part and Inventory Search

Sponsor