So CSS is starting to make a little sense, but position is tough.

Factual Questions
1

So I am happy to say that CSS is no longer like Greek in the original alphabet, not a single word of which means a thing to me.

Now it’s more like Spanish: I actually understand maybe a hundred or more words, can discuss some very simple things, and can suss out the meaning of more given enough time because I understand the root or the context. (Gotta love that latin! dormir = sleep = dormant…)

Which is pretty good, considering how marginally competent I am with HTML to begin with.

Anyway, before I start gettin’ all fancy and changing everything, I want to gain a grounding by translating my super-simple, 1998-era HTML coded site, which relies entirely on very simple tables to look reasonably decent, to CSS. I’m comprehending the font things, background, color, etc. I understand class vs. id (mostly, I still have to pause and think hard to make sure). And I’ve been reading up about the whole positioning thing, including stumbling into lots of commentary and problems with with absolute vs. relative and making sure it all works. And now that I have some little bit of understanding, I recognize when I’m on a website that has messed up coding because things are sort of piled on top of each other.

Anyway, my site is very very simple. (no links, it’s commercial and NSFW, message if you want to look and don’t know) Most pages have a narrow navigation table down the left with about 10 icons and text links underneath. There’s an image across the top, and then whatever the content of the page is in a table in the center. The way it’s all set up, if you widen the window, it all stays nicely lined up relative to each other in the center of the page. I actually want to change this somewhat, but not until I understand it by translating it to CSS first.

So, all this to ask: how do I position that left hand vertical navigation and the other elements to all stay nicely spaced relative to each other? In my still very limited understanding, it seems that somehow I should be utilizing relative rather than absolute positioning, but when I look at how that works, it seems to be relative to the corners of the page/window/ not relative to the other elements of the page.

So I’m just looking for nudges in the right direction to help me comprehend this.

To the extent that anyone volunteers their expertise, thank you.

(I plan on making many changes, including a complete shift to a CMS, but I do not want or intend to do that without having a fundamental understanding of what the CMS is doing, because that will help me to navigate any issues that will almost certainly arise at that point. One step at a time…)

2

You don’t need to use any positioning. Think KISS Principle.

One method worth learning is a grid. The 960 grid is getting old but it’s worth a shot.

3

You don’t need to use CSS for positioning. You can apply CSS to tables.

I assume you’re talking about your people-pay-to-see-images site. So, since your pages are password-protected, you are not trying to use CSS to help your Search Engine Optimization, so you don’t fall in the “OMG U NEED CSS FOR BOTS TO FIND U!” camp.

You also don’t need to fall in the “TEXT READERS FOR THE BLIND CAN’T READ TABLES!” camp, since your audience is not of the non-seeing type.

Using CSS for positioning is maddening and time-wasting if you don’t need to do it. And you don’t.

Use CSS to format text and maybe do a little bit of positioning inside of table cells. Do NOT use CSS to completely re-format the layout of your site and then have a 50-page thread here where people scratch their heads for days trying to get shit to line up right for you across all browsers. It is just not worth it.

It’s not.

4

I need to have the NON-password protected pages optimized, of course.

5

You definitely still can optimize with table-based layout. Meta tags, h1 tags, strong tags, keyword-rich text, applying CSS to your tables instead of styling inline…using divs over tables is one of a thousand different little “SEO tips and tricks” that may or may not work, and even if it helps today it might not help tomorrow.

If you can do a layout that takes less times than tables, looks better than tables, has less code than tables and actually puts keyword-rich content at the top of your code where tables could have never positioned it, then rock out with your cock out.

I have yet to see any “designer” I’ve worked with pull this off. The CSS positioning code they write is humongous, bloated, confusing, extremely hard to expand or change and I’ve never once seen them put any keyword-rich anything anywhere near the top of the page.

But if you want to use divs, knock yourself out.

6

What I want is consistency, clean lines, and as little added coding as I can possibly get away with. I want to be able to make my own templates and just slap in some content and have it all look good. And I don’t want to SACRIFICE any SEO in the process; it’s not about the CSS adding to the effectiveness of the SEO, it’s about making sure it doesn’t detract from it.

AND, as noted, I intend to move to a CMS and a big gallery program soon, and I want to have a baseline understanding of what is being done so if it gets screwed up I’m not completely lost.