Question

in my aspx page, i have 3 td inside a table where i have placed
divs to display my content.i’m using ajax to load the data inside
each of the div.in the same td in which i am displaying my content div
i have also placed a div to show loading indicator when the data div
loads.
My problem is positioning the loading indicator div when its seen through
different machines with different resolution or screen size.
At present my loading indicator div are of type absolute.
Can any one suggest an elegant method of position my loading
indicator div in the three td’s so dat its correctly centered
no matter whatever is the screen size or resolution.
i’m using c# web application.

Below is the markup of one of the td’s,

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="Box">
                    <tr>
                        <td class="Box_TopLeftCurve">
                            &nbsp;
                        </td>
                        <td valign="top" class="Box_TopRep">
                        </td>
                        <td class="Box_TopRightCurve">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td class="Box_LeftRep">
                            &nbsp;
                        </td>
                        <td align="left" valign="top">
                            <div class="Box_GridArea">
                               Data Here
                            </div>
                            <div style="position: absolute; top: 347px; left: 207px; width: 134px;display:none;">
                                Loading Indicator
                            </div>
                        </td>
                        <td class="Box_RightRep">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td class="Box_BaseLeftCurve">
                            &nbsp;
                        </td>
                        <td class="Box_BaseRep">
                            &nbsp;
                        </td>
                        <td class="Box_BaseRightCurve">
                            &nbsp;
                        </td>
                    </tr>

Answer 1

Display the indicator as a background image so that it is easy to center on any resolution.

.loader { background: url('/images/loader.gif') center center no-repeat; }

You could assign the background image to the table or the td in which it should appear.

When loaded you could remove the loader class using jQuery for example:

if (is_loaded) {
  $('table td').removeClass('loader')
}