dcsimg
www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 21

Thread: Table Image Positioning

  1. #1
    Join Date
    Dec 2002
    Posts
    34

    Table Image Positioning

    (Background) A friend gave me this image:
    http://www.cgplatinum.com/DFG/WholeSiteGIF.gif

    To put into HTML. Here's what I have so far:
    http://www.cgplatinum.com/DFG/indexWEB.html

    As you might notice, there are some spacing issues. I would like to do the whole thing in CSS, but then it won't be centered at higher resolutions, and it's a pretty small layout to be stuck on the left side. So that you can see where the particular extra space is located, here's a version that has the TDs bordered:
    http://www.cgplatinum.com/DFG/indexWEB2.html

    Any suggestions for fixing this?

    PS: I'm not too worried about the space around the bottom bar, because I CAN use CSS for that, utilizing the center value. The main problem is the space above the left links.

  2. #2
    Join Date
    Nov 2002
    Posts
    4,473
    There is a good discussion here

    http://forums.webdeveloper.com/showt...&threadid=1041

    third post down, by Stefan.

  3. #3
    Join Date
    Dec 2002
    Posts
    34
    Thanks but, honestly, I don't see how that discussion helps me. With CSS positioning, making the majority of the objects centered won't matter because they aren't supposed to be centered. Aside from the bottom bar which doesn't concern me anyway, they are all OFFSET from the center, something I don't believe is possible to do with CSS, so I'm using tables. Can anyone help me?

  4. #4
    Join Date
    Nov 2002
    Posts
    4,473
    I have seen cases where the <TD></TD> being on a different line adds unwanted white space. Also, specify height & width in the IMG tag rather than the <TD> tag (let the cell contents size the table).

    See attached file, tested on IE 5.5.
    Attached Files Attached Files

  5. #5
    Join Date
    Dec 2002
    Posts
    34
    Hmm.. I uploaded that script, but it doesn't seem to fully help the problem. The TD above the links is a bit smaller, but it's still far from the size I have specified (though the bottom bar is now good). Here it is (I highlighted to TD borders):

    http://www.cgplatinum.com/DFG/DFGtest.html

    And the normal one:
    http://www.cgplatinum.com/DFG/DFGtest2.html

    Any more suggestions? That one did help somewhat, so thanks.
    Last edited by Falconix; 12-17-2002 at 12:42 PM.

  6. #6
    Join Date
    Nov 2002
    Posts
    4,473
    All I fixed was the bottom one. I thought you'd get the idea from what I changed in it.

    My previous suggestions still hold. Let the contents size the cells. Specifically,

    yours:
    <TD style="PADDING-BOTTOM: 0px" vAlign=top width=116 height=14 border="0"><IMG style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px" height=14 src="greenbar.gif" width=116 border=0></TD>
    mine:
    <TD valign=top><IMG height=14 src="greenbar.gif" width=116 border=0></TD>

  7. #7
    Join Date
    Nov 2002
    Posts
    4,473
    I took another look at it, and that left side isn't cooperating. I ended up specifying the row height:

    <TR valign="top" height=14>
    <TD><IMG height=14 src="greenbar.gif" width=116 border=0></TD>
    <TD><IMG height=14 src="smallbar.gif" width=31 border=0></TD>
    </TR>


    Also, you have missed a cell in the table.

    +-----+---+
    |bar..|bar|
    +-----+---+
    |links|???|
    +---------+


    Did you really want:

    +-----+---+
    |bar..|bar|
    +-----+---+
    |..links..|
    +---------+


    then add COLSPAN=2 to the links cell.

  8. #8
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by Falconix
    Thanks but, honestly, I don't see how that discussion helps me. With CSS positioning, making the majority of the objects centered won't matter because they aren't supposed to be centered. Aside from the bottom bar which doesn't concern me anyway, they are all OFFSET from the center, something I don't believe is possible to do with CSS, so I'm using tables. Can anyone help me?
    Actually that thread discusses exactly how to get your page "OFFSET from the center" like you call it.
    And it's most certainly possible to do that with CSS.

    Try eg this code and see how it's placed on your page

    <body style="text-align:center;">
    <div style="margin:0 auto; width:692px; text-align:left;">

    <!-- Here you place the content of your page -->

    </div>
    </body>

  9. #9
    Join Date
    Dec 2002
    Posts
    34
    Hmm.. Gil, I editted your version of the page with your second bit of code (w/ width/hieght for images and TR) and with colspan=2 on the links TD, but nothing happened:

    http://www.cgplatinum.com/DFG/DFGtest3.html

    Did it work for you?

    And, Stefan, what I mean by having objects offset from the center is this: Say you have an image, and you want it positioned excactly 50 pixels to the left of the page's center (just that image). Is THAT possible with CSS? If so, could you give me a code example that does excactly that? Sorry, but I don't understand what the code you provided (and that in the topic Gil linked to) do.

  10. #10
    Join Date
    Nov 2002
    Posts
    4,473
    Originally posted by Falconix
    with colspan=2 on the links TD, but nothing happened
    You wouldn't see any difference unless there was some actual content, or a background color that was supposed to show up. It's just bad form to have any cell spaces unaccounted for in a table. Some (NS 4.x) browsers break if tables aren't done just right.

    I don't see anything wrong with your new example page. Do you still have a problem?

  11. #11
    Join Date
    Dec 2002
    Posts
    34
    LOL, the main problem in the beginning still hasn't been fixed. There is extra space just above the links (below the green bar) that shouldn't be there. Look at the image again; you'll see that the space there should be smaller.

  12. #12
    Join Date
    Nov 2002
    Posts
    4,473
    Here is another file with more fixes.
    Attached Files Attached Files

  13. #13
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by Falconix
    And, Stefan, what I mean by having objects offset from the center is this: Say you have an image, and you want it positioned excactly 50 pixels to the left of the page's center (just that image). Is THAT possible with CSS? If so, could you give me a code example that does excactly that?
    Yes it's possible, but do you mean that the top left corner should be 50px left of the center or something else?

    When you are talking about pixel precision you have to be pixel specific in your description

    Also, how do you want it to interact with the rest of the page?

    Should it be placed ontop of other content, below, next to or what?

    Be as specific as you can if you want exact codeexamples. And remember sometimes a picture sais more then a 1000 words

  14. #14
    Join Date
    Nov 2002
    Posts
    4,473
    Originally posted by Stefan
    And remember sometimes a picture sais more then a 1000 words
    Funny, he started this post with a picture...

    http://www.cgplatinum.com/DFG/WholeSiteGIF.gif

  15. #15
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by gil davis
    Funny, he started this post with a picture...

    http://www.cgplatinum.com/DFG/WholeSiteGIF.gif
    And which one is the image to be 50px left of center?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles