SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    0 Post(s)
    0 Thread(s)

    Unhappy CSS vs. Tables NOT!

    I've just completed reading Peachtree's DHTML and Dan Shafer's HTML Utopia. All the table to CSS examples I've seen in this forum deal mainly with 3 column tables which allow the center column to expand. I have a table with 7 columns that overlap and an overlapping logo graphic.

    Tests were run using the W3C html and CSS valuators to remove major errors. Although the result was close to what I had expected, the coding process was not as I expected. I assumed that the locations could be mathematically pre-programmed.

    I assumed that the top of button 3 and 5 would be at the same relative distance from the top. Evidently my perception of "relative to... " is quite off.

    There is a huge white space at the bottom of the table which was unexpected. Also, at the bottom are 4 graphic boxes which refuse to move.

    The original design can be seen at
    My attempt is at

    Obviously there is a major point that I have overlooked. Can anyone get me back on-track?

    The design must show completely in an 800x600 window and centered on larger displays with a black background. Objects can not "jump" if the site is viewed at different "text size"s. This is accomplished be setting the class of each <TD>.

    Thank you for any direction you can give me.


  2. #2
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Scottsdale, Arizona
    0 Post(s)
    0 Thread(s)
    I don't have the time to really help you out right now but I'd like to ask why the design has to remain the same? Is there a reason why the look of the page can't change?

    This could be done with a whole bunch of nested divs btw.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    183 Post(s)
    6 Thread(s)
    Obviously there is a major point that I have overlooked. Can anyone get me back on-track?
    The major point that you have overlooked is to misunderstand position:relative. You will rarely use position:relative to lay out structural elements on a page. You should be using either position absolute , floats or statically placed elements.

    Position:relative moves an element in relation to where it is in the normal flow of the document. It is offset by the co-ordinates it is given. However the space the element previously occupied is preserved and all other elements will be believe that the moved object is in its original space.

    So if you move an element by 300px using relative positioning then you leave a hole in the page where the element was originally. Position relative is usually used for visual effects rather than for structuring a layout. This is the reason you are finding large spaces around your page.

    As your page is a fixed with no fluidity at all you could simply place the images absolutely where you want on the page.

    It should be quite easy to do now you know what to use


    BTW In order to place an element absolutley in relation to a parent element then the parent needs a position:relative set but with no co-ordinates.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts