Topic: How to Write VALIGN in CSS

I am converting my coding skills to css finally, and the process is a little slow going. I am so used to coding tables into everything, it's a hard habit to break. I do have a question in the middle of this.

How do I use the valign command in a stylesheet? I'd like to specify certain elements (td, table, etc.) with a vertical alignment, but I don't know if margin-top: 0px is close enough or not.

Thanks!

OK... the first step is to stop thinking in terms of tables. There is no VALIGN in CSS. You do have positioning, though, and you can give your block elements absolute (position:absolute) or relative (position:relative) positioning. Absolute positioning means that whatever measurements you specify, they are calculated from the end of the previous block element. In other words, your block elements will flow one after another, and if you specify top:20px (for example) with relative positioning, your element should start 20px after the previous element ends. Absolute positioning starts everything from the upper-left corner of the screen.

So, if you want vertical spacing (not alignment), you should use something like top:??px. If you're looking to vertically align something in the center of the page, you can always give it top:50% (with absolute positioning, of course). Note that the element will start at the halfway mark, so it won't be exactly centered. One way to get around this would be to give the element a negative top margin of half its height (which might be difficult if you don't know the height, of course).

Um, I hope I'm not going into too much detail here. The main thing I want to stress, though, is that you shouldn't be "converting" your coding skills. That implies that you want to overlay CSS on your table-based design philosophy. That's not the way it works. You need to forget about using tables for layout and start fresh with CSS. I know it's difficult to let go (everyone goes through it), but it is a necessary step.

Good luck with your quest.

[Edit: For clarification: Rather than thinking, "OK, how can I do this table technique in CSS?" you need to think, "OK, what is CSS, and what can I do with it?"]

[This message has been edited by Suho1004 (edited 03-10-2003).]

Suho's general advice is sound, but I should also draw your attention to the vertical-align property, which has flaky support (doesn't everything?) but might be another possible solution. If you use vertical-align, test it carefully.

I am not exactly trying to "convert" those coding skills into css; that was a bad use of words on my part. I am sure that there are stages (just like any death) of adjustment to using css instead of HTML for layout. I would say that I am somewhere between denial and overwhelmed futility.

That said, I can say that I am actually creating my css in Notepad, which is helping greatly for me to learn this new way of thought.

What I should have asked was : If you're used to using tables and clunky HTML to position elements on a page, how would you position those same things using css? For example, I don't know if it's okay to use div align commands or if there is a way to express the same thing in css.

Suho, your suggestions are helpful; I'll take a look.

Thanks!

For centering, using div align=blah isn't 'correct' -- the 'correct' way of doing it is margin: auto.

However... margin: auto doesn't &%#$ work in Internet Explorer, requiring more drastic medicine. Look up any of the famed CSS layout repositories (glish, bluerobot, etc) and you'll learn all about it.

So if you're coding to XHTML Strict -- which there's no earthly reason to do other than bragging rights and mental exercise -- you can't use div align. But if you're using HTML 4.0 Transitional, or XHTML 1.0 Loose, you can do whatever your heart desires. You should do whatever works best. If you're not trying to be a standards showcase, why not just use div align when you absolutely need centering, and pure CSS for everything else? You won't get any flak from me. I use the Strict doctype (and yet I allow validation-breaking HTML in user posts on my weblog)... why? No good reason.

in XHTML 1.0 strict, with the correct doctype, margin:auto; does work in IE 6.

And I code all my pages in XHTML 1.0 strict. And not for bragging rights - it's good practice, and it isn't very difficult.



[This message has been edited by DL-44 (edited 03-10-2003).]

Nethermind: Yeah, I understand what you mean. Didn't mean to come down too hard on you there.

How do you position things in CSS is a good question, and it really comes down to your design mentality: do you want everything in a precise location, down to the pixel, or are you willing to go with the flow? I'm more of a "flow" guy myself, and I concentrate more on making sure that the structure of my documents makes semantic sense. That being said, I still like to make a nice looking page, and there are a number of different ways to position your elements. Play around with the positioning values (of course), but don't neglect your margins, either.

Also understand that a lot of things are still flaky on certain browsers (in other words, the browsers haven't caught up with the standards yet). This is why I didn't mention vertical-align. I like to stick with the basics--that way I don't have too many headaches when dealing with different browsers. That might not be a bad idea for someone starting out in CSS as well.

So, on that note, is it sacrilige to use css in part, allowing for some HTML while I learn? What I mean is, will anybody shoot me down if I use some HTML as I am learning css and XHTML? Heck, I don't even really know what XHTML really is.

My problem is that now that I truly understand how little I know about how to put a good website together, I feel more than a little design paralysis. I don't want to stop learning, but I am hoping that there's a curve!

~N

Nethermind: I think you might be better off learning CSS with HTML and then once you are comfortable make the transition to XHTML (see briggl's tutorial at the GN). That way you'll better appreciate the way that CSS picks up the duties of some of the depreciated tag attributes.

___________________
Emps

FAQs: Emperor

^^^ What he said.

Don't worry, Nethermind, nobody is going to shoot you.

Suho1004: I always reserve the option actually.

___________________
Emps

FAQs: Emperor

No one will shoot you for mixing presentational HTML with CSS while you're learning CSS. Just keep in mind that it's a transition phase, and you should work on moving out of it and into separating style information (CSS) from content and structure information (HTML).

As for mixing HTML with XHTML, I wouldn't recommend it, and it's not really necessary (once you know HTML, you basically know XHTML - it's just a few extra rules.)

[funny - i used the phrase "no one will shoot you" before reading suho's post]

xhtml, like slime said, is just html with more structure to fit into an XML framework.

The language is the same, the rules are just a little different. For some basic info that won't eat up too many brain cells on you, read this - http://www.gurusnetwork.com/tutorials/html/xhtml/xhtml1.html



[This message has been edited by DL-44 (edited 03-11-2003).]

Emps: That's why I've taken all the bullets out of your guns and melted them down.

Dracusis answered another post with this suggestion:
http://www.bluerobot.com/web/layouts/

I think it will really help me learn how to use css for alignment and positioning. Ever optimistic, she forges on....
If I specify an absolute, like margin in pixels, will this screw things up in different browser resolutions? I thought that it would, but it seems to be the only way to make a three column layout work.