CSS positioning - faltering steps...

[john_b]

An initial foray into something I've been putting off for years, but I'm going to have to bite the bullet...;-(

I've skirted around CSS for a while and think I've grasped boxes in terms of content, padding, borders and margins but now need to try to connect them somehow for a page with, say, three columns. Nothing fancy: left for navigation, middle for content and right for perhaps a few small images.

I was wondering if there are any general design principles that are reasonably widely accepted? Might it be possible, for example, to specify the left and right column widths in pixels such that you can be pretty sure that any images won't go outside of them and leave the middle column to fill whatever's left?

And how do you do that? Or is it better to use percentages for all three?

In other words, I'd like it to be as flexible as possible to accommodate different screen widths so I'm trying to avoid specifying column widths as completely fixed - am I whistling in the wind?

I'm sure this issue must be old hat to many here so my apologies for that, and also for the somewhat vague nature of the question - I know what I mean...;-)

John

[Bo Aakerstrom]

A List Apart has got a lot of stuff to learn from; here is what you're wanting to do, and some other good reads.

[john_b]

Originally Posted by Bo Aakerstrom

A List Apart has got a lot of stuff to learn from; here is what you're wanting to do....

Oh that looks as if it's built for the job - many thanks! (I've duly bookmarked your 2nd reference as well... but not for today!)

As an added bonus, I almost understood the theory. Well I got as far as the negative margins anyway...
...with things like that I find that it's easier to print the thing off and study it at leisure, rather that trying to skip up and down on a screen.

I should add, by the way, that I have attempted to get to grips with all this before but without much success. I tried to work through Eric Meyer's book 'CSS: The Definitive Guide'. OK but heavy going. I got an early copy of Lie and Bos and even took that one on holiday - how sad is that??!!

Tried a few websites as well, of course, but this one looks as if it could hold the key - Holy Grail indeed, and thanks again!

[Steve Rindsberg]

Someone here, Shane I think it was, put me on to TopStyle. Bless that person, whoever it was.

http://www.bradsoft.com/index.asp

Prior to that I was keeping an editor open on the CSS file, saving changes, refreshing in the browser ad infinitum. TS previews right there in the app, lets you edit CSS and HTML both and ... ah, I'm raving again.

Give it a look.

Another thing that's helped me grok positioning, at least to the limited extent I do, is to fill each box element with a color or give it a distinctive outline temporarily. Makes it much easier to see instantly what's going on.

[ktinkel]

Originally Posted by Steve Rindsberg

Another thing that's helped me grok positioning, at least to the limited extent I do, is to fill each box element with a color or give it a distinctive outline temporarily. Makes it much easier to see instantly what's going on.

And that is preferable to using a border because the pixel-widths of the borders can screw up the way the page sits if you are using percentages.

[john_b]

Originally Posted by ktinkel

And that is preferable to using a border because the pixel-widths of the borders can screw up the way the page sits if you are using percentages.

Soooo true! I thought I'd cracked the three column thing and then put a 1 pixel border around one of them. Of course, the whole thing promptly fell down around my ears...

...back to the drawing board...;-)

[john_b]

Originally Posted by Steve Rindsberg

Prior to that I was keeping an editor open on the CSS file, saving changes, refreshing in the browser ad infinitum. TS previews right there in the app, lets you edit CSS and HTML both and ... ah, I'm raving again.

Funnily enough, one of the very first bits of (serious) software I ever bought was Homesite. Cost me almost $80 all those years ago but it was a top notch piece of kit and worth every cent. I'm not sure whether Top Style (Lite) came with it then, or only appeared later.

And now I have to pause for breath because it's time to confess. Here goes:

"Hello, my name's John and I'm an alcoh... erm... (whispers) I use Homesite!"

There, I feel better now. Yup, still use it, but I looked at your link and maybe Top Style Pro can do the job that (ssshhh) does but also deal with CSS in a seamless way. If that's the case then I could well be shelling out another $80

Another thing that's helped me grok positioning, at least to the limited extent I do, is to fill each box element with a color or give it a distinctive outline temporarily.

Yes I'm trying a few approaches at the moment and am starting to get a handle on it. I think cracking this three column thingy could be a major step forward, but I'll need to sort out theory behind the negative margin business first.

Thanks for the help - Top Style could be the way to go. Be sorry to lose Homesite, though, we've been through so much together...;-)

[Steve Rindsberg]

To tell the truth, I've just played a bit with editing HTML in TopStyle. Old habits are hard to break, old friends are hard to part with ... maybe there's a 12 Step Program people like us? But failing that, I've stuck with a mix of Notepad, UltraEdit and a kind of CMS-like app that I wrote to fit my own needs.

And to which I added a handy "Edit CSS" feature that launches TopStyle. ;-)

TS in no way insists on taking over the HTML editing end of things.

[john_b]

Originally Posted by Steve Rindsberg

To tell the truth, I've just played a bit with editing HTML in TopStyle. Old habits are hard to break, old friends are hard to part with ... maybe there's a 12 Step Program people like us? But failing that, I've stuck with a mix of Notepad, UltraEdit and a kind of CMS-like app that I wrote to fit my own needs.

Yes you do become attached to some software apps and go out of your way to make them work the way you want, even when they weren't designed for that in the first place.

Your comment prompted me to open up NoteTab Pro which is a neat and versatile replacement for Notepad. It's something I use all the time but I've just discovered - I don't even know what caused me to look - that one of its several toolbars can be used to edit CSS and that another one integrates with TopStyle (Lite) and actually opens that app. Of course, my version of TS is not new but maybe there's life in the old dog yet...

[Kelvyn]

Originally Posted by john_b

Funnily enough, one of the very first bits of (serious) software I ever bought was Homesite. Cost me almost $80 all those years ago but it was a top notch piece of kit and worth every cent.

I cut my HTML teeth on Homesite, graduating from NotePad around 1996, before it was taken into the Allaire fold. Early Topstyle was very good, but I think Nick Bradbury lost his way a bit when he introduced HTML editing into the css editor. I still use HomeSite on occasion, and sometimes TopStyle but my main tool for static sites is now DreamWeaver.

There is an excellent SitePoint book providing a good explaination of CSS and XHTML. This is the second edition. I found the first edition excellent, providing some new ideas and solutions, as well as reinforcing earlier knowledge.