(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.
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? ;)
gil davis
12-17-2002, 10:48 AM
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.
Falconix
12-17-2002, 11:38 AM
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. :)
gil davis
12-17-2002, 12:57 PM
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,
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
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.
gil davis
12-20-2002, 04:13 PM
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?
Falconix
12-20-2002, 05:23 PM
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.
gil davis
12-20-2002, 06:32 PM
Here is another file with more fixes.
Stefan
12-20-2002, 07:55 PM
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 :)
gil davis
12-20-2002, 09:03 PM
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
Stefan
12-20-2002, 09:21 PM
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?
Falconix
12-20-2002, 11:18 PM
Sorry if I was vague in my example description; anyway, it didn't apply specifically to my layout.
Here's a better example: Say I have an image, whatever it may be, and I want the top-left corner to be 50 px to the left of the center of the document and 20 px from the top of the document, positioned absolutely. What would the code for that be?
Anyway, Gil's version of the page works nicely (thanks a lot), so I'll probably go with that for now. However, I still would like to know how to offset from the center with CSS for future reference.
:)
P.S. Gil, what do the <tbody></tbody> tags do? They seem to have some significance, but I've never heard of them.
King Pellinore
12-20-2002, 11:47 PM
Center align a div with a specific width and left align an image inside. Eg:
<body style="text-align: center;"> -for IE5
<DIV STYLE="
margin: 0 auto; -like Stefan said
width: 300px; -fixed width
background: #f00; -delete this (demo purposes)
text-align: left;"> -for IE5
<img width="30" height="50"></div>
Stefan
12-21-2002, 12:15 AM
Originally posted by Falconix Here's a better example: Say I have an image, whatever it may be, and I want the top-left corner to be 50 px to the left of the center of the document and 20 px from the top of the document, positioned absolutely. What would the code for that be?
Originally posted by Stefan
<img style="position:absolute; top:20px; left:50%; margin-left:-50px;" ...
Hmm.. I see what that topic was about now. But I still have one question, that pertians to my case. Say you have that script already on a page. Can you have a script like this:
At the same time? It seems like the margins would interfere, whereas you could do this with absolute positioning if you weren't going by the center.
:)
By the way, if anyone wants to check out the almost finished product, it can be found at:
http://www.cgplatinum.com/DFG/DFGtest5.html
Stefan
12-21-2002, 07:06 AM
Originally posted by Falconix Say you have that script already on a page. Can you have a script like this:
<img style="position:absolute; top:20px; left:50%; margin-left:-40px;" ...
At the same time?
Yes, and 50 more if you feel like it. Each is compleatly separate.
It seems like the margins would interfere
They won't becuse the images will be stacked one above the other in the order they appear in the document or however you want them by modifying their z-index value.
gil davis
12-21-2002, 07:47 AM
Originally posted by Falconix
P.S. Gil, what do the <tbody></tbody> tags do? They seem to have some significance, but I've never heard of them.
The W3C reccommendations for TABLE include three sections: THEAD, TBODY and TFOOT. From the W3C:
Table rows may be grouped into a table head, table foot, and one or more table body sections, using the THEAD, TFOOT and TBODY elements, respectively. This division enables user agents to support scrolling of table bodies independently of the table head and foot. When long tables are printed, the table head and foot information may be repeated on each page that contains table data.
The table head and table foot should contain information about the table's columns. The table body should contain rows of table data.
http://www.w3.org/TR/html4/struct/tables.html
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.