locked
Position a div within a table cell RRS feed

  • Question

  • Hi

    Is there a method of possitioning a div relative to the top/left of a cell so that it stays where I want it ?

    As an example the div Location is in the right place on some screens that we have here but on other (bigger or smaller) it isn't.
    http://www.ukoutdoorpursuits.org/pages/folgarida_resort_details.html

    If you mouse over the red icons in the picture at the bottom of the page you may (or may not) see the div text.
    I have tried absolute - but this still moves with the screen size and also relative (but it still moves.

    Am I missing something obvious here ?

    Thanks if you can offer any advice or a link to a webapage with details.  I have googled this and looked through many tutourials but none of them seem to give any advice on this subject.

    What is most likely BTW is that my whole idea of a div within a cell is wrong - if so feel free to tell me - I'm just starting to learn web design so I do appreciate any advcie

     

     

    Wednesday, April 28, 2010 10:38 AM

Answers

  • You should rethink your design. Tables are for tabular data not
    layout. Divs are for layout.
     
    Regards Jens Peter Karlsen.
     
    On Wed, 28 Apr 2010 10:38:50 +0000, Wayne-I-M wrote:
     
    >
    >
    >Hi
    >
    >Is there a method of possitioning a div relative to the top/left of a cell so that it stays where I want it ?
    >
    >As an example the div Location is in the right place on some screens that we have here but on other (bigger or smaller) it isn't. http://www.ukoutdoorpursuits.org/pages/folgarida_resort_details.html
    >
    >If you mouse over the red icons in the picture at the bottom of the page you may (or may not) see the div text. I have tried absolute - but this still moves with the screen size and also relative (but it still moves.
    >
    >Am I missing something obvious here ?
    >
    >Thanks if you can offer any advice or a link to a webapage with details. I have googled this and looked through many tutourials but none of them seem to give any advice on this subject.
    >
    >What is most likely BTW is that my whole idea of a div within a cell is wrong - if so feel free to tell me - I'm just starting to learn web design so I do appreciate any advcie
    >
    >
    >
    >
     

    Regards Jens Peter Karlsen.
    • Marked as answer by Wayne-I-M Wednesday, April 28, 2010 5:14 PM
    Wednesday, April 28, 2010 12:15 PM
  • I am not sure what the technical limitations of a Div in a table are but I think you should forget the table and use a container Div and then place a div within that and apply the formatting you want to get the desired position. For example the use of centering for the container and floats or centering for the inserted div should do the trick and provide the correct layout that would work across the range of monitor sizes and resolutions.
    • Marked as answer by Wayne-I-M Wednesday, April 28, 2010 5:14 PM
    Wednesday, April 28, 2010 12:25 PM

All replies

  • You should rethink your design. Tables are for tabular data not
    layout. Divs are for layout.
     
    Regards Jens Peter Karlsen.
     
    On Wed, 28 Apr 2010 10:38:50 +0000, Wayne-I-M wrote:
     
    >
    >
    >Hi
    >
    >Is there a method of possitioning a div relative to the top/left of a cell so that it stays where I want it ?
    >
    >As an example the div Location is in the right place on some screens that we have here but on other (bigger or smaller) it isn't. http://www.ukoutdoorpursuits.org/pages/folgarida_resort_details.html
    >
    >If you mouse over the red icons in the picture at the bottom of the page you may (or may not) see the div text. I have tried absolute - but this still moves with the screen size and also relative (but it still moves.
    >
    >Am I missing something obvious here ?
    >
    >Thanks if you can offer any advice or a link to a webapage with details. I have googled this and looked through many tutourials but none of them seem to give any advice on this subject.
    >
    >What is most likely BTW is that my whole idea of a div within a cell is wrong - if so feel free to tell me - I'm just starting to learn web design so I do appreciate any advcie
    >
    >
    >
    >
     

    Regards Jens Peter Karlsen.
    • Marked as answer by Wayne-I-M Wednesday, April 28, 2010 5:14 PM
    Wednesday, April 28, 2010 12:15 PM
  • I am not sure what the technical limitations of a Div in a table are but I think you should forget the table and use a container Div and then place a div within that and apply the formatting you want to get the desired position. For example the use of centering for the container and floats or centering for the inserted div should do the trick and provide the correct layout that would work across the range of monitor sizes and resolutions.
    • Marked as answer by Wayne-I-M Wednesday, April 28, 2010 5:14 PM
    Wednesday, April 28, 2010 12:25 PM
  • Wayne, although the other suggestions are better, to simply answer your question, you apply padding to the top and left sides of the cell to position the div.

     


    Expression Web MVP
    Wednesday, April 28, 2010 2:19 PM
  • As you have discovered position absolute isn't as simple as it looks. As I said in my reply to Waheed it can be difficult to tell what is the "parent" referenced for positioning since it isn't always the top left corner of the page but can be a positioned element anywhere in the html hierachy.

    Having siad that the better way to position someting from an element/content near it is to use margin and/or padding along with floats. For example if you wanted to put an image on the right side of a table cell with content on the left and have 15px of space around it you'd use something like:

    .rightimg {float: right; margin: 15px;}

    Instead of:

    <img alt="" class="picture_margin" height="175" src="../images/img_resort_details/folgarida.jpg" style="float: right" width="509" />

    You would have

    <img alt="" class="rightimg" height="175" src="../images/img_resort_details/folgarida.jpg" width="509" />

    Mixing inline and classes makes it much harder to figure out what is going on AND harder to maintain. BTW, remember to add text to the alt attribute if the image is there for anything more than eye candy.

    Assuming that your height & width for your images are in the html which to my mind is better practice since that way I don't have to have separate classes for every image floated or not.

    Now I'm going to agree with Jens that tables are not the best layout option for your site. They rarely are because they are bloated and less flexible. Tables should be reserved for data and not layout. You could eliminate a lot of code simply by wrapping the entire page in your page_content div and quit using widths in the html itself for anything other than images.

    Code like:

     <tr>
     <td valign="top">
     &nbsp;</td>
    </tr>

    Serves no useful purpose nor does nesting a table around your map help either. Your menu is nice and semantically coded but the same cannot be said for the rest of your page is very poorly structured. I see no headings or paragraphs which give will help people-search engines determine what the page is about quicker.

     FWIW, in IE 8 I'm getting some strange flashing behind the menu as I rollover each item.


    MS MVP Expression Tutorials & Help http://by-expression.com
    Wednesday, April 28, 2010 2:34 PM
  • Thank you all

    I have looked over the tuorials and have found that you are correct.

    ooops  :-)

    So following your advice I have taken out all the tables and replaced them with divs where needed.  It works really well now
    http://www.ukoutdoorpursuits.org/pages/folgarida_resort_details.html
    Whe you hover over the red icons the text shows up where it's meant to be regardless of the size of the screen.

    Thank you all again for your expertise.

    (would much rather be playing with a simple bit of sql, vba, net or whatever, but this internet stuff is quite fun when you start playing with it.  Lots more questions to follow :-)

     

     

    Wednesday, April 28, 2010 5:13 PM
  • "FWIW, in IE 8 I'm getting some strange flashing behind the menu as I rollover each item."

    I don't see any flashing, but I did notice that the drop-down menus don't work in Compatibility Mode (so presumably don't work in IE7--still a very popular browser).


    I dream of a better world...a world in which a chicken can cross the road without its motives being questioned.
    Wednesday, April 28, 2010 11:41 PM
  • Thanks Bill

    I have fixed this now - thanks for noticing it.  I have placed a background image on the #nav a and (I hope ?) this seem to have fixed it.

    I am told that it's the default setting in Options (check for new page every time I visit the page). I do notice that if the Options is changed to anything other than this (check for new page every time I visit the page) there was no flicker, but I have also read that this is the default in IE7 and maybe IE8 so it was good idea to sort it out.

    I used the Son-Of-Suckerfish code which most website say is fine in all browsers.

    Thanks for the imput though.  Always good to have an expert look at something.

     

     

    Thursday, April 29, 2010 7:31 AM