Power By 专否社区

CSS help needed to make the Image go to the top

Go To StackoverFlow.com

0

I have a table that is split into 3. My problem is I have content on the left side and pic on the right side. When I open the page the pic is starting in the middle of the page I need the pic to be displayed at the top of the page. How can I do that? 

       <table border="0" cellspacing="0" cellpadding="5">
        <tr>
        <td > 
        <table> Lots of Content </table>

        </td>

        <td width ="10%">
          <table> Empty table (that gives space between left content and right image                         </table>

           </td>

        <td width = "20%">
        <table width="100%">
             <tr>
             <td> <Asp:Image Runat="server" Id="Image" align="top"> </td>
             </tr>



              </table> </td>
          </tr>
           </table>
2012-04-04 19:49
by SmilingLily
The best way would be getting rid of the tables and making a css layou - Sven Bieder 2012-04-04 19:52
Using tables to format a layout and creating a table to hold the image is pointless. just drop the image in the td. Or better yet stop using the table to format your layout and use divs and then position the image absolute or relative top depending on the effect you wan - CBRRacer 2012-04-04 19:55
Tables for layout are the wrong way to make a page. Tables are for tabular data only - laymanje 2012-04-04 19:55
It is not something I created. I am maintaining an existing page and I have to find a way to fix it using somefix. I don't have the permissions to rebuild the page - SmilingLily 2012-04-04 19:58

1

Use this page to figure out what kind of positioning you want (not sure from post) http://www.w3schools.com/css/css_positioning.asp

And then embed the code like this:

<head>
 <style type="text/css">
 img
  {
  [Style properties you pic]
  }
 </style>
</head>

Or consult css_howto and use a proper CSS file for you entire page layout (no more tables)

2012-04-04 20:02
by RyanS
I started creating css to that page. Thank you - SmilingLily 2012-04-05 16:30

2

If you really want / need to keep the existing structure and look for a quick and dirty fix, then set the position of the Image to absolute and with top and left position it exactly where you want.

2012-04-04 20:05
by Sven Bieder
isn't that exactly what he wanted? The img at the top of the page - Sven Bieder 2012-04-04 20:13
sorry Sven, I was thinking top of the td - should have read more closely - ryankeairns 2012-04-04 20:16
np. Happens to me all the time ; - Sven Bieder 2012-04-04 20:16
It didn't work - SmilingLily 2012-04-04 20:42
Can you perhaps give the css or inline css of what exactly you have done - Sven Bieder 2012-04-04 21:07
You should avoid statements like it didn't work. What didn't work? Your toaster? Provide details regarding how it doesn't work or what you have done to attempt it. This will allow for more useful and informed responses - RyanS 2012-04-05 17:32

0

that's easy... here's the hack... add a class to the td

.positionhack {position:relative}

then on the image

 .positionTop {
    position:absolute;
    top:0;
    }
2012-04-04 20:07
by George Gurrola
I'm sorry, but that is wrong. With this "hack" he changes absolute nothing in the rendered position of the image - Sven Bieder 2012-04-04 20:21
Ads