Centering design on 'page'

[skase98]

I am working on cleaning up the code as per validation but the very first HTML problem it gives me is the <center> tag that aligns my 800px width design in the window.

The design is a table-based one because I build my image in PhotoShop and slice it in ImageReady which generates the HTML for it. I tweak as I go to make it work but I honestly do not know any way to ensure that my design displays mid-screen unless I use <center> tags in the body.

How would I make this happen using CSS? Every attribute I try doesn't have center as an option (like float which just makes sense that it should). I am completely baffled and I thank you for any education!

Kathy

[skase98]

Thinking out loud after more consideration.. .

Do I use a body <div> that somehow uses a relative position? If so, what would it look like?

#bodyplcmt { position:relati ve; (but relative to what?!?)

I also get the feeling that, because I have no specified height for the table so that it stretches to accomodate all content, something in my CSS is breaking the table apart. Each table cell is valigned to top and has a specified height to avoid those breaks but they are now visible.

I wish I could just find these answers without asking and asking here! I hate deadlines!!! :)

Kathy

[drhowarddrfine]

Kathy,
I just drank a wonderful wine on an empty stomach and I'm surprised my spelling is correct right now and I love you. Anyway, the center tag is deprecated so furgettabotit.

Never, ever design using tables. They are for data only and meant to be that way and have I said anything inappropriate yet?

Relative positioining will put the div relative to where it would normally go in the flow of the document.

If you want to center a div, try margin:0 auto;

Man this stuff is good but I'm wasted. Give me an hour.

Honestly, I'm not a drinker at all.

[skase98]

:) Your spelling is dandy!

Honestly, I really do want to learn how to get away from tables and I am really willing to learn. So far, I haven't found a 'Complete Moron's Guide to Not Using Tables Because They're Stoopit.' Unfortunately, I started doing this sort of stuff when tables were "THE WAY TO LAY OUT A PAGE" and those old habits refuse to go quietly into the night.

I think I'm going to spend the night playing with <div> tags. You just enjoy that wine!

Kathy

[skase98]

Paging Dr Howard... Paging Dr Fine...

Holy cannoli, Batman! Why didn't anyone tell me that this CSS stuff was so amazing?!? I have spent a bit of time redoing the site, eliminating the tables. So far, it's all going well except I'm having some trouble getting my background images to show.

Thank you for teaching me about the center alignment code! That gave me the courage to go 'all the way' as it were! I'm sure I still have plenty of questions and much work to do but I am doing a happy dance and keep saying out loud, "Oh my gosh! Look at that!"

Of course, there's always IE to battle...

Thank you more than you know,

Kathy

[steven]

Throw your table inside a div.

Style the div. Set the margins as such

margin: 0 auto 0 auto;

You can play around with it, but essentially, it will centre the div horizontally because the left and right margin setting are set to auto.

The thing to remember with properties of CSS like this, are that when defining things like this in one statement, the order is -

property: top_value right_value bottom_value left_value;

[drhowarddrfine]

She's trying to get away from using tables so just throwing them in a div is not appropriate.

Kathy, I have just the opposite experience. I had no interest in coding for the web until about two years ago. I have never used tables for layout and have a hard time helping people who do.

[skase98]

Thank you for the advice! I did read the margin order at one point and sort of chant to myself every time - "like a clock... "

Admittedly, I was quite nervous about letting go of my table security blanket but I am finding using CSS is really entertaining. I change a number here or move a <div> there and elements just slide around! It's really amazing!

I have a long way to go before I truly understand each tag and what it does. At this point, I'm a hacker, much like when I play around with php and perl.

I'm still being confounded by my background images but, at the moment I can proudly report that I validated my code in progress and got no errors on both the HTML and the CSS!

So far, so good! And, heck - I've got another day before the phone calls and emails start flying fast and furious... ;)

Thank you for all your help so far!

Kathy