Hello
I am concentrating on the SEO aspect for our website and I have read that tables lead to bad SERP.
I am trying to remove table based layouts....till now I have been able to simplify the layout but don't know how CSS can be used to have same look for the website and remove tables...

Please kindly look at this and give me some suggestions

With Regards and best wishes for 2005

http://www.MyTutorOnline.com

There are a few resources on this subject:

http://www.alistapart.com
http://www.spoono.com
http://www.csszengarden.com

I just tried yesterday to redesign my page in CSS, and I failed miserably. And take in mind I've been doing CSS-based designs for as long as I can remember. Tables don't necessarily make your search engine performance decrease. Many people on these sites will tell you that it's hellbent to use them in design, but I still believe otherwise.

Many designers use tables in design, and so do I. I will use CSS when they make it streamlined and easier to use and design with (like tables). :)

Yes i too feel that CSS+Tables make the best combination and i am trying to do the same

And i have been able to remove some tables code with this change now....

Yes, I mean there are some things you can do successfully in tables and CSS combined. The full-fledged CSS measure is difficult when trying to remember:

1.) Visual Design
2.) ALL-Browsers compatibility
3.) etc.

I know, I know, csszengarden.com. But usually the same thing can be accomplished with CSS and tables.

I know, I know, csszengarden.com. But usually the same thing can be accomplished with CSS and tables.
Nope, it can't. The same effect cannot be achieved using tables. Cannot be done. Impossible. Period. This is because tables set in stone where and how each element is placed on the page. So, in six months, when it makes sense for an element to be somewhere else on the page, you have to redesign your entire site, instead of changing a couple values in a single CSS document.

There's this neat article made by the guy who first alerted the design world to the use of tables with layout. A couple years later he made a huge apology for the damage he'd caused the development world. I'll have to dig it up for y'all. It's a pretty interesting article ;)

Can't you just name the tables like


table#selector { property: here; }


and change it later to a new style, etc? That's how I've always done it. Works for me. I will probably start to use CSS more when CSS3 is standardized. By then, IE will probably be inoperable :P

Besides, I want my clients to want site maintenance from my company, anyways. When they screw it up by messing with my perfect tables, they call me lol! :)

Can't you just name the tables like...
Yes and no. CSS is a great for applying basic style to tables, just like any other HTML element. But you can't rearrange cells sitew-wide through a single document. So if you want to move an element from one area of the screen to another, you have to redesign the orginal structure of the site from scratch. So, if you wanted to move a navigation list from the right to the left, or top to a side, or add in a DHTML menu later, or move a search feature elsewhere on a template, or a news box somewhere else, or whatever you might have in mind for the future, you have to reconstruct the whole thing, instead of just telling the stylesheet "move this item on the whole site" once :)

Besides, I want my clients to want site maintenance from my company, anyways. When they screw it up by messing with my perfect tables, they call me lol!

Here's a neat idea for maintenance. Offer a retainer fee of $X/mo. for guaranteed changes in a certain amount of time. Call it maintenance insurance or something. That gives you a little steady income and your clients a little piece of mind for when they do screw something up, regardless of whether they screw up a <div> container or a table :)

Do you CSS advocates honestly believe what you're saying? What are the chances you'll never have to touch the html page again to change the design?

Let's say you have three elements grouped together, and one CSS tag for that group. A few months later you decide you want to change the design, but you want those three elements to have three different styles now. So you end up changing the html page after all.

Originally posted by benevolent001
Hello
I am concentrating on the SEO aspect for our website and I have read that tables lead to bad SERP.
I am trying to remove table based layouts....till now I have been able to simplify the layout but don't know how CSS can be used to have same look for the website and remove tables...

Please kindly look at this and give me some suggestions

With Regards and best wishes for 2005

http://www.MyTutorOnline.com

well you asked for suggestions but I can't really see exactly where you are having trouble ..
For Css this is what I see
header <---logo
nav <-home , parents ...
other <--this is where you have get free..
control box<--this is where left and right content go
box1 <---left side stuff join our community, member login ...
box2 <---right side stuff need urgent homework .bullet points...
bottom left <--this is your icq, AIM and Msn stuff
bottom nav <---all those other links you have

Now from looking at it you have the girl with the cap and gown on you can either make a seperate content box for her
call box mid or whatever or you could include it in box 2

I'm not here to debate design choices..just here to provide help to the poster who asked for it also after I looked at your site I wonder ..can you explain exactly what your difficulty is because the layout is not really complex.

Do you CSS advocates honestly believe what you're saying? What are the chances you'll never have to touch the html page again to change the design?
Yes. I do it all the time. I'll be completely revamping IWDN in the next few days, and I'm not going to touch any HTML documents, just one CSS document. But it's the user benefits that carry more weight than developer benefits anyway.

Let's say you have three elements grouped together, and one CSS tag for that group. A few months later you decide you want to change the design, but you want those three elements to have three different styles now. So you end up changing the html page after all.
If you've IDed each element properly within that group, you won't have to change anything. CSS layouts still have to be made properly with care. Yes, if you make a crappy CSS layout, you'll end up having to fiddle with it. So make it properly. Problem solved :)

So, to handle OPs question, taking tables out of this layout should be pretty easy. The top area is just a Flash movie with a background. Stick it in a <div> and you're done.

For the two columns, there are a few techniques you can use. One would be to wrap the two columns in <div> and position them using position:absolute - not my favorite way of going about things, but for your layout, I think you can do it.

What I would do is float one of the <div>s, declare its size (whether in pixels or percentages) and apply a margin to the other <div> on the same side as the float equal to the declared size of the floated <div>. Table gone - replaced with two <div> tags. If you ever want to flip 'em, stack 'em, change their sizes or their properties, one change in your stylesheet will rearrange the entire site. To keep the bottom stuff on the bottom, use the clear style. This will mean taking a giant leap into the 21st century and shedding the HTML4.01 Transitional doctype ;), but at this point, you should already have code that validates to at least XHTML1.0 strict, so it's as simple and just declaring a different doctype and releasing the site back into the wild. Moving out of HTML4.01 Transitional transcends a bunch of IE browser bugs - there are still tons more to deal with, but one very significant one involving float/clear will disappear - hence why this move should be made.

HTH!

Hold up! I tried that just last night. I was working in Firefox and when I swapped over to IE, hell broke loose. (I mourn thee, IE.)

Are you saying that the cusp of the matter is to use the XHTML 1.0 strict doctype as opposed to the HTML 4.01? I knew there were things in IE whose behavior changed with the doctype...but...

...

Wow, apparently it truly is that crazy. Since I just did this to see what the_pm was talking about, I suppose you can use it as an example (I think it's right, but don't quote me on it).

http://www.virtualrevolution.net/zbin/floatnclear_ex.html
http://www.virtualrevolution.net/zbin/floatnclear_ex.css

And the weirdest part of all this is that doctypes have absolutely nothing to do with CSS. Isn't that crazy?

Actually it makes sense, since IE in quirks mode affects how it renders everything, though a proper 4.01 trans doctype declaration will put IE in standards mode. A lot of people don't declare it properly though, or don't declare it at all. Still, better to hold yourself to a higher standard anyway.

Great example there, absolethe. Ain't that a fun way to code? Nice and easy ;)

Thank you for the compliment. I looked at that when I finished and said to myself, "that is so pretty!" Haha.

The sad part is that if I were to now redesign my site using that, I would tear it up. I tend to change my mind as I go along and get sloppy. I'm a lazy person at heart.

Perhaps if I can develop better habits my source will always look that nice.

Part of the trouble is that I never saw the point of declaring the doctype until recently. Then when I read... For some reason I can't remember what it is, but it's something I do fairly often on my pages... IE displays it quirky you declare XHTML strict. So I never got into the habit of declaring even though I don't deviate from XHTML 1.0 very often anymore.

But since I am making it my mission to design with CSS from now on, I will simply begin holding myself to that standard. I don't usually do complicated designs that require table splices anyway (I am thinking of spliced images here).

You do notice, however, the floating left column's height doesn't extend. As I said in that other thread--I hate that. I read last night that it's common to use a background image (a la "faux columns" on alistapart.com), which amused me, because that's what I did on my boss's website when I redesigned it. At that time I assumed there had to be a better way, but figured, "this will take care of it quickly."

The moral of the doctype being, I guess, that conforming to the standards will be rewarding in the end.

Though I sympathize with the feelings about CSS3 I've heard some express. I feel that way too. I can't WAIT for overflow-x and overflow-y (in addition to a few other things I've seen and liked). Which, incidentally, work in IE but not in Firefox ... err, at least when I tried it 2 months ago.

Since benevolent001 hasn't posted in a few days, I don't feel so bad in continuing the thread hijack.

the_pm, those are good points you've made. I figured you'd say the CSS would need to be designed right in the first place. Don't mind me. Since I'm just learning this CSS layout stuff, I'm playing the skeptic.

Since absolethe posted that test page, I gave it a look. Here's a simple question for anyone. How is it that the bodycol div isn't wrapping to the left in the space that leftcol doesn't take up?

the_pm, those are good points you've made. I figured you'd say the CSS would need to be designed right in the first place. Don't mind me. Since I'm just learning this CSS layout stuff, I'm playing the skeptic.No problem. It's always good to see someone pursuing this line of design.
Since absolethe posted that test page, I gave it a look. Here's a simple question for anyone. How is it that the bodycol div isn't wrapping to the left in the space that leftcol doesn't take up?It doesn't wrap because bodycol has a margin applied to it that accounts for that space.

im pretty sure theres a CSS tutorial about this on purephotoshop.com