Convert HTML table layout to CSS/XHTML Project

[mikmik]

Convert HTML table layout to CSS/XHTML Project

I have been talking about this before so we want to go ahead with this 'tutorial' soon.

Myself, paulhiles, matauri, and wclew have agreed to help with this presentation, so look for lots of knowledgeable input.

The purpose

We are going to go through the whole process of taking a typical 'what have you' page that uses tables for structure and html tags in the page code for styling and formatting, and convert it into a page that uses xhtml and css valid code for the markup.

It is as much a learning process for me (and all the others I think, to varying degrees) as it will be instructional and educational.

I am planning the tutorial out with the others right now, and we hope to start formally by Wednesday.

We will provide some reading and then some examples of each step about once a week to give everyone plenty of time to follow along and post questions and comments.

Here are a couple of links about the reasons for making this type of change in our designing. It is not meant as a 'proper way of doing design' lecture at all, just a learning tool because there is so much talk about it these days.
It is for informative purposes only!
-------------------------------------------
Background reading - espescially good for people just starting out.

BASICS, general
About website design, three pages: http://www.w3schools.com/site/site_design.asp

Why XHTML? - one page: http://www.w3schools.com/xhtml/xhtml_why.asp

How websites work
Getting acquainted with URIs, and especially URLs. Here's a quick dissection of an http URL:http://www.webreference.com/html/tut.../2.html#HEAD-2 and this is very good to know - a look at a few of the more important headers used by both browsers and servers:http://www.webreference.com/html/tutorial29/

WHY? (we will rely on this excellent tutorial much as we go along)

http://www.createwebmagic.com/css101/history/

----------------------------------------

I also want to highly recommend installing these browsers for checking your results, in general as we go along, but specifically because it is what many good designers and developers do (depending upon their target audience)
- Internet Explorer 6 and 5.5 (because the vast majority of people use these two browsers to access the internet):
IE6:http://www.microsoft.com/windows/ie/...p1/default.asp


ALL IE versions (stand alone - they can all run simultaneously on a computer(PC)):
http://www.skyzyx.com/downloads/ - now don't say I never gave you anything haha, but really, this is a fantastic site and resource.


Mozilla Firefox (I think this is also equivalent to Netscape, but I am not sure): http://www.mozilla.org/products/firefox/


Opera - if you want to get really crazy! lol:http://www.opera.com/


Finally - an extremely, extremely (did I mention 'extremely?) handy and great freeware tool for switching between, and using, multiple browsers to view a page simultaneously:

if you are a developer and want to check the page in several browsers without the hassle of cutting and pasting the URL

http://www.kreacom.dk/tools/optool/

-------------------------------------
As always, I will appreciate any input, advice, questions, etc. and look forward to this.
---------------------------------------

[mikmik]

Hi, everybody.
I want to start this tutorial going, and I have a page all picked out to use as an example, but how about if we take the rest of this week to accept any submissions from others.

We can use a page from someone here if anyone is interested in getting their pages converted to CSS/xhtml, AND learning how to do it!

Please post links here for your suggested pages. I will contact you if it is a good example for us to use.

I will make a copy, and put it on my server. Thanks for your interest.

[Jurgen]

Mik, mine is up for a test.... I am all 'tables and i am trying to learn CSS.
So far I am not comfortable to go online with CSS, but sure will watch what is going on and learn... :-)

Jurgen
www.absolutelyfabulousflowers.com

[sijpie]

I've got a page here (asp generated, but the design principle will still be valid), which uses purely tables at the moment, but also has a valid table element in it, as far as that it lists data in tabular format. But the rest of the tables is used for layout purposes. So feel free to use this one as an example.

http://www.palmvenue.com/pda_data/sh...el=Clie%20TH55

[mikmik]

Thanks, both of you guys!

I think that for our primary project, Jurgen's page would be fantastic, but I want to say sijpie, your site is very nice, and it would be good for a more advanced 'class'.
If this works out, we can keep going on sites that present alternative layouts and specific difficulties that using CSS presents.

I will get in contact with you shortly, Jurgen. Your page is perfect for what I have in mind, and I will discuss any plans with you first.

[mikmik]

We are going to take a table structured page, which also contains all the ‘formatting and display elements’ (the instructions to the browser about how to display the page in the window) embedded in the html, and transform it into a document that uses CSS for the purpose of setting the appearance.
In other words, we are taking a typical web page and ‘upgrading’ the coding in order to separate the presented content and the presentation rules.

There are two reasons for doing this, that I am aware of, and they are :

1) To make increased efficiency in developing and maintaining websites possible, with less fuss;
2) To create work that is compliant with ‘standards’ which are becoming more important to meet for a number of reasons – basically so that a wider range of compatability is achieved.


So, where to start?

We must have a plan to follow to keep our work organized.
I am very DIS-organized and undisciplined, and it gets me into all sorts of trouble, like getting behind schedule before I even get to the start line. Ha ha.

So, I was thinking that we would get familiar with this page of Jurgens : http://www.absolutelyfabulousflowers.com/ which I have copied here : http://factor1.net/serv/tutorials/tbl2css.htm .

We will then look at what parts of the code we should be aware of, and make a list of them so that we can decide an efficient way to apply the style rules without being redundant.

Let’s have a quick look at this page so we know where it is. It is the HTML ‘element tree’( but it doesn’t produce any good fruit to eat, or even leaves to rake in the fall). We can see how the parts of a web page are related – which we pretty much all know this part, except that I often forget, so please bear with me. http://www.blooberry.com/indexdot/html/tree/body.htm This is not THAT important here, just an intro for another of my favourite resources for html(and xhtml and css, deeply cross-indexed and user friendly.

Now, let’s look at the code in our page. http://factor1.net//serv/tutorials/codeView.html


Here, then, is our task. Identify all the unique tags that refer to formatting text in the "

" tags, and all the tags that refer to background colors and borders in the "structure" (table, tbody, tr, and td ) tags.

I will get some graphical breakdowns of the underlying table up in the next few days (I am halfway there already) so that we can further categorize style with blocks of the page. I will outline all the tables, tr’s, and td’s and number them for reference.

I will also read some of the tutorials on this subject and get a better idea of how others approach this sort of thing – and I am more than open to feedback and suggestions.


This is one year, plus one day, since I first got a real host for web pages, so I am very new to the whole shebang myself. I have done this much off the top of my head because I want to try for an original approach with plenty of feedback and suggestions going both ways. I am trying to see what may be needed, in general, about understanding the difficulties and confusion that us ‘greenhorns’ have learning this, due to oversights and unawareness on the part of veterans trying to relate to us.

So paul, if you have any suggestions about organising our ‘lessons’ – maybe have some disposable threads for throwing up all our exercise results and all, with a subset of our work being saved or whatever, I am all ears, as you can see in this picture –

[sijpie]

I have gone through the code, and highlighted all the font tags, background and border tags in bold blue:
http://www.macsijp.net/css-tut/tut1.html

There are a number of other tags that probably can be highlighted as well, such as a number of tags and text alignment code.

[mikmik]

Let's us think about our general game plan, because you guys might not know this - it is certainly news to me as of two days ago, but apparently it is more difficult to completely use CSS for the styling on TABLES! Laughs out loud rolling on the ....

So I was tinkin' we would separate the layout into blocks, ie Header, left, middle, right columns, and footer, but there are still some natural divisions that can be made to get still smaller 'chunks'.

Then we can have the CSS properties in maneageable sized groups.

[sijpie]

Mike, I've done some more on your suggestion, and split up the page in what I see are logical main blocks.

See what you think. Let's here from everybody joining in on this project, even if just to show you're interested!

[c1sissy]

I'm looking for a regular horizontal menu, no bread crumbs for now.

I have been told that there are two ways to accomplish this.

Display block float left. This way the menu items line up and center (along with values added of course) I'm sure you realize that there is more to the layout of that but i'm giving you the basic part of it.

Then you have display inline. This is where you would use the UL LI to create your menus.

Be interesting to see what seasoned css-ers have to say about that. I have gotten different views on both methods. One being that a menu is a list and should be set up as such. Here is a link with several menus etc... on it http://www.s7u.co.uk/ He gives examples using graphics as well. Nice site to check out.

I think that one thing that was buggin me in the learning of this is the inheritance and decendants of this all. Which I find is essental to understanding all of this. So I have been reading and reading on it.(and reading.......)

I also need to stress the fact that validating your work as you go along, and using the dtd that is appropriate for the html/xhtml that you are using is SO important.

It is a pleasure to meet you as well. I totally look forward to the learning experience.

<edit> Maybe even a section in here devoted to css would be good, this way people looking for css information will be able to find it easier and post questions or problems</edit>

[mikmik]

Okay, fellow initiates(!) har har.

I have been talking with the honourable moderator 'paulhiles' about this, and I want to start over from scratch. We will work out a schedule beforehand, and I will work with paul to make decisions.

I tried to include as many people as possible before, but it ended up as an administrative nightmare, causing even more of my hairs to fall out of my head. This will not do.

What we discuussed was perhaps doing the menu together for c1sissy for a starter, and I just thought about using a "modular" system where individuals submit specific projects they would like to work on here, and then others can see a specific 'real life' application and how we deal with the coding and problems the we encounter to get the completed page.

I still really want to get the 'html table layout' to 'xhtml/css' conversion started, for that will lay the groundwork for our understanding of CSS.

I will be looking for submissions again to do that with, or I will select a good example to work with.

The reason for starting over is to distance from the confusion that obtained in the initial attempt, and we seemed to get lost, people were confused, and decided not to participate, so no more of that here!


I do agree that this is a 'programming' topic, not a design topic - everything is about designing if you want to look at it that way.

So, from now on, this is about web page developing and building, using CSS for presentation.

c1sissy, do you have a page that example that you want put the menu in? Most examples I have come across on the other sites show the menu's on an empty page, and they don't 'insert' well into our sites.

Please, all suggestions are welcome.

Another thing that we should avoid, is the indescriminate posting of links. Believe me, there are some good leads in the site design tutorials, but as I say, it is one thing to read about all this, it is quite another to actually see it being applied step by step, and that's what this is all about.

God help us now. :O)

[sijpie]

Welcome to the tutorial c1sissy!

For your menus, have a look at
http://www.projectseven.com/tutorial...menus/list_01/
where the build up of both vertical and horizontal menus is very well described.

Why I am so enthusiastic about this project of our own, is that all CSS fanatics say you shouldn't use tables for layout purposes, but they don't provide much in the way of how to structure it correctly, and what the up and downsides are of the various options you have with doing it in CSS.

And like you, I am no 'pro' web designer. So hopefully our learning curve will be steep and fun.

[c1sissy]

Hi sijpie
Pleasure to meet you!

I think that your learning curve might be a bit ahead of mine, ;) But I am totally anxious to learn all of this.

I agree with you on the table end of all of this. Tables were never my strong point, and I still need to work on them as I know that you will run into times where you need to use them for tabular data.

Thank you for the link, I will definatly check it out!

Hi Mikmik, how are you today?

I have a menu built in css on my logo homework page which I have in the submit your logo for review section in here. (if you look at it, please ignore the first lesson, lol!)

One thing that seems to be great about this is that people who want to learn are going to be working together with it. Anything I can do to help, let me know, I have tons of bookmarks, I also have a homework page set up from a css course, along with some pages that I have played with using zindex etc...(another intersting area of learning)

[mikmik]

Hi, sis, sij, it's mik.

So I finally got to look at some menu's, cl, and I found this one that was amongst my "pure css-no script" collection for drop down dynamics! (help me...)lol

http://factor1.net/demo/index.html

It is not a nested list haha.

it has like 12 lines of code (okay, more like 30) in the style sheet, and it works in all browsers (except I did not test Opera, or Whackintosh's).

I have seen more code for 1 onMouseover script and preloaded img. that didn't work as well.

Follow the link above, I had to do a bit of debugging but the only real problem was with IE5.x and the explanation is there - as well as a link to the page I originally swiped it from (just kidding, credit where credit due!).

Somebody get us a page to convert... B0])

[c1sissy]

Hi Mikmik and Sijipe,

I have printed out the pages from the link that you provided Sijipe, it looks like a good read. Thank you.

Mikmik, I have also looked at your link, wow, it is detailed! I'm going to spend more time later on today focusing on it.

[mikmik]

c1sissy said this:

I'm going to spend more time later on today focusing on it.

I looked at your page, , so maybe I should just put a straight forward one up there? No drop down stuff, make the colors easier?
I will put another link here if I can get to it, or should I say when.

See you all soon 8o]

[c1sissy]

I looked at your page, , so maybe I should just put a straight forward one up there? No drop down stuff, make the colors easier?

Ok, here is the thing, if this is going to be for say beginners, then you need to make sure that a beginner isn't going to look at the code and think that it is too much. And, how much does the beginner know? If you start basic, make sure that the understanding is there, then you can go forward with the dynamic part of it and the bread crumb part. You need to learn to crawl, walk, then run. Colors aren't a bad idea to help seeing things (example, the menu from the rest of the page), but not really fancy to start with.

You want to make sure that people are following you. And if they are and are learning great, they will refer people that they know to the tutorial, and if it is a good one and easy to follow, they won't take long to catch up.

[glyphrunner]

Originally Posted by c1sissy

Ok, here is the thing, if this is going to be for say beginners, then you need to make sure that a beginner isn't going to look at the code and think that it is too much. And, how much does the beginner know?

One of the ways that I have always found it easiest to pass along information or notes pertaining to the "code" in my HMTL and CSS is to include comments within the very same "code." This is something extremely handy when performing training or simply passing it along to the next person in the chain of development.

For our CSS, it's a simple as:
/* Insert Comment Here */

And in the HTML (XHTML) simply use:
<!- Insert Comment Here ->


Thardferr Online AD&D Roleplaying
Online AD&D forums

[Niko Holopainen]

I'd love a CSS thread, all things CSS since the design section is so broad, but then again I'm not sure there'd be enough posts...

Anyways, I wanted to say a word of warning: if you use lists as horizontal menu, be very careful about page minimum width - especially on CMS systems this will cause no end to grief =)

It can be fixed with a lot of work, but basically horizontal lists "fold" when the screen space is too tight, and when they fold they both a) links stop working, b) the layout is broken and oft-times unreadable.

Hope this helps,

[Nomad]

This looks like it's well needed. I'm all for tutorials that show simply how to actually do some thing than teh others that have page after page of of retoric and a small code sample that has no meaning..

btw I'm planning on taking this site to xhtml 1.1/css

http://www.thebuteykocentre.com/
Frames/Nested Frames/ Tables/Nested Tables....scary
I'll see, may have to change the template but I'd rather not...


There's a challenge now...

The reason behind that project is I allready have that site with absolutlely no marketing as such getting top 1st page listings in most major search engines under the search string b_uteyko bre_ath therapy(Please excuse the underscores - it's the top search string - I'm sure you appreciate why I've disabled it).
I obviously want to keep that top spot. Only way is to update every thing to the required valid standard. That being xhtml 1.1/css 2.0, that is what I want. Then I'll be fixing my own two sites and starting 1 maybe two more. A property one and a local free news paper one.
As I now know I can do it once there is absolutely no reason why I can't maintain that across all sites..
Thats what I'm aiming for anyway.
If I achieve it that way and at minimal cost then it begs the question on search engine optimization..

You can check results your self but when I last checked Google, Yahoo, Ask Jeeves, Altavista, MSN I had top 5 listings and most were 1st top 3 listings.
not bad for un-optimised site I think.

~ :)

[MattE]

Why not look at some basic stuff as well, like recreating this in tabless css

<table border="1" width="100%">
<tr>
<td width="20%"></td>
<td width="80%"></td>
</tr>
<tr>
<td width="20%"></td>
<td width="80%"></td>
</tr>
<tr>
<td width="20%"></td>
<td width="80%"></td>
</tr>
</table>

[frobn]

Originally Posted by Nomad

This looks like it's well needed. I'm all for tutorials that show simply how to actually do some thing than teh others that have page after page of of retoric and a small code sample that has no meaning..

btw I'm planning on taking this site to xhtml 1.1/css

http://www.thebuteykocentre.com/
Frames/Nested Frames/ Tables/Nested Tables....scary
I'll see, may have to change the template but I'd rather not...


There's a challenge now...

The reason behind that project is I allready have that site with absolutlely no marketing as such getting top 1st page listings in most major search engines under the search string b_uteyko bre_ath therapy(Please excuse the underscores - it's the top search string - I'm sure you appreciate why I've disabled it).
I obviously want to keep that top spot. Only way is to update every thing to the required valid standard. That being xhtml 1.1/css 2.0, that is what I want. Then I'll be fixing my own two sites and starting 1 maybe two more. A property one and a local free news paper one.
As I now know I can do it once there is absolutely no reason why I can't maintain that across all sites..
Thats what I'm aiming for anyway.
If I achieve it that way and at minimal cost then it begs the question on search engine optimization..

You can check results your self but when I last checked Google, Yahoo, Ask Jeeves, Altavista, MSN I had top 5 listings and most were 1st top 3 listings.
not bad for un-optimised site I think.

~ :)

There is no challange to converting your site to css/xhtml. As far as keeping your ratings, why do you think they would be effected?

[sgaykhe]

where can i get a good css editor, i am zero as far as css coding is concerned, i wan to build a website in css, i have heard that css is far more faster than html, so i wanna try it

regards

[KeithO]

http://www.rollins.edu/development/Planned_Giving/
I just completed my 1st full xHTML/CSS web site. What a sense of pride I have for it.

[Steelchord]

Time for a CSS junkie to weigh in.

KeithO, great job. The code is beautifully laid out--it's pretty obvious it was done by hand, or at least edited by hand. Although it looks like you've got two bugs, a height bug in IE (content_home_left) and a margin coding error in Firefox/gecko driven browsers... very minor, though.

sgaykhe, your best bet is going to be w3schools.com. Go there. Learn. Then, once you've got a bit under your belt, go grab dreamweaver 7 or above--it does the best job of immediately updating WYSIWYG from a .css file, it'll give you the best intuitive feel for what's going on. Another good site is A List Apart (a.k.a. ALA), and when you're all grown up, go to the Zen Garden. There, you will be awed by this thing that is CSS.

Now, here's the question I have: I *frequently* find myself needing to repair awful jobs done by other people, and one of the most frequent problems I face is changing a fubar'd table structure into cool, clean, refreshing css. I'm tired of doing this by hand. Does anyone know any good tools that automate some or all of this process?

--GeekWithAGuitar

[NJ]

Originally Posted by sijpie

Welcome to the tutorial c1sissy!

For your menus, have a look at
http://www.projectseven.com/tutorial...menus/list_01/
where the build up of both vertical and horizontal menus is very well described.

I was checking out the site and noticed this "We'll also use a simple JavaScript to automatically detect the current page and highlight the menu link tohat points to that page."

Any comments on the wisdom of using JavaScript this way? I've heard that JavaScript can be a problem because it can be turned off and that IE is turning it off as default. It seems to me that it goes against the ideal of using "standards" and usability issues to use something that might not work. On the other hand, I don't think that there is a good replacement for JavaScript. I have to scratch my head on that one!